Հասկանալով CSS Box Shadows-ը
Ժամանակակից վեբ դիզայնում նուրբ խորությունը տարբերում է տափակ ինտերֆեյսները հղկված փորձից: box-shadow հատկությունը հիմնական գործիքն է քարտերը, կոճակները և նավարկման վահանակները բարձրացնելու համար:
Ստվերի հատկության անատոմիան
Սტանդարտ CSS ստվերի հայտարարությունը բաղկացած է մի քանի արժեքներից՝
- Հորիզոնական շեղում: Շարժում է ստվերը ձախ կամ աջ:
- Ուղղաձիգ շեղում: Շարժում է ստվերը վերև կամ ներքև:
- Աղոտման շառավիղ: Որոշում է ստվերի եզրի սրությունը:
- Տարածման շառավիղ: Ընդարձակում կամ սեղմում է ստվերը:
- Գույն: Սահմանում է ստվերի երանգը:
Ինչու՞ օգտագործել տեսողական գեներատոր
Թեև շարյուսակը հասկանալը կարևոր է, վերացական թվերը վիզուալիզացնելը դժվար է: Հատուկ գեներատորն առաջարկում է ինտերակտիվ կտավ, որտեղ դուք կարող եք տեղաշարժել պարամետրերը և անմիջապես տեսնել արդյունքը:
Քայլ առ քայլ ուղեցույց
1. Հիմնական տարրի կարգավորում
Սկսեք մաքուր կոնտեյներից, օրինակ՝ սպիտակ քարտից բաց մոխրագույն ֆոնի վրա:
2. Շեղումների և աղոտման կարգավորում
Բնական ստվերի համար պահպանեք հորիզոնական շեղումը զրոյին մոտ և օգտագործեք մեծ աղոտման շառավիղ:
3. Բազմաշերտ ստվերներ
Իրական ստվերները հազվադեպ են միաշերտ: Բազմաթիվ արժեքների միավորումը ստեղծում է հարուստ և բազմաչափ տեսք:
Արագացրեք աշխատանքը MiniTooly-ի հետ
Խնայեք ժամանակ և ճշգրտություն ձեռք բերեք: Օգտագործեք ինտերակտիվ CSS shadow generator գործիքը՝ ոճերը ակնթարթորեն նախագծելու և արտահանելու համար:
Եզրակացություն
Խորության տիրապետումը ստանդարտ դասավորությունները վերածում է գրավիչ թվային փորձի: