CSS box-shadow գեներատոր
Ստեղծեք CSS box-shadow ոճի կոդ շեղման, լղոզման, տարածման, գույնի և ներքին ստվերի (inset) կարգավորումներով։
Գործարկել գործիքը
Այս առցանց գործիքը ստեղծում է CSS box-shadow ոճային հատկության կոդ ըստ տրված պարամետրերի։ Դուք կարող եք փոխել հորիզոնական և ուղղահայաց շեղումները, լղոզման ու տարածման չափերը, ինչպես նաև ստվերի գույնը։ Գործիքը յուրաքանչյուր թվային արժեքի ավելացնում է պիքսելների (px) չափման միավորը և կազմում ամբողջական CSS հայտարարություն։ Եթե անհրաժեշտ է ստվերն ուղղել տարրի ներսը, ակտիվացրեք ներքին ստվերի նշումը, և գեներացված տողում կավելանա համապատասխան inset ցուցիչը։ Լռելյայն պարամետրերն են 2 հորիզոնական շեղման համար, 2 ուղղահայաց շեղման համար, 5 լղոզման համար, 0 տարածման համար և կիսաթափանցիկ սև գույն (#00000033)։ Գործիքը թույլ է տալիս նշել նաև զրոյական արժեքներ բոլոր թվային դաշտերում, ինչը հարմար է փափուկ եզրագծեր կամ հատուկ էֆեկտներ ստանալիս։ Դաշտերը կարող եք փոփոխել ըստ անհրաժեշտության, իսկ լղոզման շառավիղը մեծացնելիս ստվերի եզրերը դառնում են ավելի սահուն։ Տարածման չափը հնարավորություն է տալիս ստվերը համաչափ մեծացնել բոլոր ուղղություններով։ Ստացված CSS կոդը պատրաստ է անմիջապես վեբ նախագծերում օգտագործելու համար։
Հրահանգներ
- Մուտքագրեք հորիզոնական (Offset X) և ուղղահայաց (Offset Y) շեղման արժեքները:
- Սահմանեք լղոզման (Blur) և տարածման (Spread) չափերը:
- Նշեք ստվերի գույնը (Color) տեքստային ձևաչափով կամ HEX կոդով:
- Եթե ցանկանում եք ներքին ստվեր ստանալ, նշեք Inset ընտրանքը:
- Ստացեք պատրաստի box-shadow հայտարարությունը և տեղադրեք այն ձեր CSS կոդում:
Օրինակներ
- Ստանդարտ արտաքին ստվեր. Offset X = 2, Offset Y = 2, Blur = 5, Spread = 0, Color = #00000033, Inset = անջատված -> ձևավորվում է 2px 2px 5px 0px #00000033 հայտարարությունը:
- Ներքին ստվեր զրոյական շեղմամբ. Offset X = 0, Offset Y = 0, Blur = 10, Spread = 2, Color = #00000080, Inset = միացված -> ձևավորվում է inset 0px 0px 10px 2px #00000080 հայտարարությունը:
ՀՏՀ
Ի՞նչ է տեղի ունենում, երբ ակտիվացվում է Inset տարբերակը:
Գեներացված CSS տողի սկզբում ավելանում է inset բառը, ինչի շնորհիվ ստվերն արտապատկերվում է տարրի ներսում, այլ ոչ թե դրսում:
Հնարավո՞ր է նշել զրոյական արժեքներ շեղման և լղոզման համար:
Այո, դաշտերում կարող եք մուտքագրել 0: Գործիքը կստեղծի համապատասխան 0px պարամետրերով արտահայտություն:
Ի՞նչ չափման միավոր է ավելացվում թվային արժեքներին:
Գործիքը հորիզոնական շեղման, ուղղահայաց շեղման, լղոզման և տարածման թվային արժեքներին ավելացնում է px (պիքսել) միավորը: