Box Shadow-ի գեներատոր

Կարգավորե՛ք սահիչները՝ box-shadow ստանալու համար, համադրե՛ք շերտերը խորության համար և պատճենե՛ք պատրաստի CSS-ը:

Ստվերի շերտեր
Շերտ 1
CSS
Կարգավորե՛ք սահիչները՝ ստվերը ձևավորելու համար:

Յուրաքանչյուր ստվեր գեներացվում է Ձեր բրաուզերում: Ձեր սահմանած տվյալներից ոչինչ չի վերբեռնվում BroBroGo:

ՀՏՀ

Ի՞նչ են իրականում կառավարում offset-ը, blur-ը և spread-ը:

Շեղումը (offset) տեղաշարժում է ստվերը ձախ/աջ և վերև/ներքև, աղոտությունը (blur) փափկեցնում է դրա եզրերը, իսկ տարածումը (spread) մեծացնում կամ փոքրացնում է այն նախքան աղոտացնելը: Բացասական տարածումը սեղմում է ստվերը դեպի ներս, ինչը օգտակար է խիտ, մոտ ստվերների համար:

Ի՞նչ է անում inset տարբերակը:

Սովորական ստվերն ընկնում է տարրից դուրս՝ ստեղծելով բարձրացված քարտի տպավորություն: «Inset» տարբերակն այն շրջում է դեպի ներս, ինչի շնորհիվ տարրը թվում է ներս սեղմված. սա հարմար է ներս ընկած մուտքագրման դաշտերի կամ սեղմված կոճակների համար:

Ինչո՞ւ համադրել մեկից ավելի ստվերի շերտեր:

Մեկ ստվերը որոշակի չափից հետո տափակ տեսք է ստանում: Իրական խորություն ստանալու համար սովորաբար համադրում են խիտ, մուգ ստվերը ավելի փափուկ ու լայն ստվերի հետ: Ավելացրե՛ք երկրորդ շերտը և կարգավորե՛ք յուրաքանչյուրն առանձին՝ այդ էֆեկտին հասնելու համար:

CSS Cubic Bezier-ի գեներատորՔաշե՛ք երկու բռնակները՝ անիմացիայի կորը ձևավորելու համար, հետևե՛ք շարժմանը և պատճենե՛ք cubic-bezier() արժեքը:Գրադիենտի գեներատորՍտեղծե՛ք գծային, շառավղային կամ կոնաձև գրադիենտ, ավելացրե՛ք գունային կետեր, սահմանե՛ք ուղղությունը և պատճենե՛ք CSS-ը մեկ կտտոցով:Border Radius-ի գեներատորԿլորացրե՛ք յուրաքանչյուր անկյունը սահիչներով, ստեղծե՛ք օրգանական ձևեր էլիպսաձև ռեժիմով և ակնթարթորեն պատճենե՛ք CSS-ը:Flexbox-ի գեներատորԿարգավորե՛ք flex կոնտեյները և դրա տարրերը տեսողական գործիքներով, հետևե՛ք փոփոխություններին իրական ժամանակում և պատճենե՛ք CSS-ը մեկ կտտոցով:CSS Grid-ի գեներատորՍահմանե՛ք սյուներն ու տողերը, քաշե՛ք վանդակների վրայով տարրեր տեղադրելու համար և պատճենե՛ք grid CSS-ը համապատասխան HTML-ի հետ մեկ կտտոցով:CSS clamp() հաշվիչՄուտքագրե՛ք չափսեր փոքր և մեծ էկրանների համար և ստացե՛ք դինամիկ clamp() արժեք, որը սահուն կերպով փոփոխվում է դրանց միջև՝ տառատեսակների, padding-ների, margin-ների կամ gap-երի համար:Գույների փոխարկիչՓոխարկե՛ք գույները HEX, RGB, HSL, HSV, CMYK և LAB ձևաչափերի միջև. խմբագրե՛ք ցանկացած դաշտ, և մյուսները կթարմացվեն ավտոմատ:CSS Գեղեցկացնող և ՄինիմալացնողՎերադասավորեք անխնամ CSS-ը՝ այն հեշտ կարդալու համար, կամ մինիմալացրեք այն թողարկման համար՝ անվտանգ ռեժիմով, որը երբեք չի փոխում Ձեր կանոնների հերթականությունը:Կոնտրաստի ստուգիչՄուտքագրե՛ք տեքստի և ֆոնի գույները՝ տեսնելու WCAG կոնտրաստի հարաբերակցությունը և թե որ AA ու AAA մակարդակներն են համապատասխանում: