درس 30 ارومیا دیزاین: border، border-radius و box-shadow
1. ZIP را استخراج کنید و index.html را در مرورگر باز کنید؛ اینترنت لازم نیست.
2. style.css نمونه های آماده را دارد. عرض پنجره را کوچک کنید و بزرگ نمایی مرورگر را افزایش دهید.
3. نوع کادر .solid را به dashed یا dotted تغییر دهید و سپس برگردانید.
4. مقدار border-radius در .rounded را از 16px به 0 تغییر دهید و مقایسه کنید.
5. عرض و ارتفاع .avatar را برابر نگه دارید؛ border-radius: 50% با کادر مربع، دایره می سازد.
6. .sharp-shadow و .soft-shadow و .inner-shadow را مقایسه کنید.
7. جابه جایی افقی سایه را با عدد مثبت و منفی آزمایش کنید؛ در متن RTL نیز مثبت یعنی سمت راست.
8. عرض دو جعبه .measure را در ابزار توسعه ببینید؛ هر دو 240px هستند. سایه فقط نقاشی می شود و عرض جعبه را افزایش نمی دهد.
9. تمرین: .exercise باید کادر 1px، گوشه 16px و سایه نرم داشته باشد؛ پیوند با فاصله داخلی 8px 16px و گوشه 8px باشد.
10. پاسخ از ابتدا فعال نیست. بعد از لینک style.css در head این خط را اضافه کنید:
<link rel="stylesheet" href="solution.css">
11. با Tab روی پیوند بروید؛ نشانگر فوکوس باید دیده شود. outline را حذف نکنید.
12. تمام اعداد داخل HTML و CSS انگلیسی هستند. هیچ وابستگی یا تصویر خارجی لازم نیست.
