Ինչպես օգտագործել CSS Box Shadows-ը և Text Shadows-ը

Օգտագործեք այս դեկորատիվ ոճի հատկությունները՝ ձեր վեբ դիզայնին յուրահատուկ շունչ հաղորդելու համար:

CSS-ը լի է ձեր կայքերի տեսքը բարելավելու տարբերակներով. տեքստի և տուփի ստվերները պարզ օրինակներ են: Նրանք առաջարկում են նման արդյունքներ, ինչ ստվերները, որոնք հայտնաբերված են պատկերների խմբագրման ծրագրերում, ինչպիսին է Photoshop-ը:

Բայց ինչպես են աշխատում CSS ստվերները: Եկեք անմիջապես սուզվենք:

Ինչպես օգտագործել CSS Box Shadow-ը

Դուք կարող եք կիրառել CSS տուփի ստվերը CSS-ի մեկ տողով, որը պարունակում է մինչև վեց արժեքների տիրույթ: Արժեքների կարգը կարևոր է ձեր CSS տուփի ստվերի աշխատանքի համար, և այն ունի հետևյալ տեսքը.

box-shadow: offset-x offset-y blur spread color inset;

Եկեք նայենք արժեքներից յուրաքանչյուրին հերթականությամբ:

CSS Box ստվերային դիրքը

Offset-x և offset-y արժեքները վերահսկում են ձեր տուփի ստվերի դիրքը: Օֆսեթ-x արժեքը ներկայացնում է ստվերի հորիզոնական դիրքը, մինչդեռ offset-y-ը ուղղահայաց շեղումն է:

 box-shadow: 10px 10px;

Դրական արժեքների արդյունքում ստվեր է հայտնվում տարրի ներքևում և աջից:

Դուք կարող եք նաև օգտագործել բացասական արժեքներ h-offset-ի և v-offset-ի համար.

 box-shadow: -10px -10px;

Բացասական h-օֆսեթը ստվերը տեղափոխում է ձախ, մինչդեռ բացասական v-շեղումը այն տեղափոխում է դեպի վեր.

CSS Box Shadow Blur

Ինչպես տեսնում եք, h-offset-ը և v-offset-ը ավելացնելով ձեր ստվերին, ստեղծում է ամուր ստվեր՝ առանց որևէ փետուրի: Blur արժեքը լղոզում է ձեր CSS տուփի ստվերը և ուժի մեջ է մտնում, եթե տրամադրեք երրորդ արժեքը.

box-shadow: 10px 10px 20px;

Որքան մեծ է այն թիվը, որը դուք ավելացնում եք blur արժեքին, այնքան ավելի մշուշոտ կլինի ձեր CSS տուփի ստվերը: Այս արժեքը չի կարող բացասական լինել:

CSS Box Shadow Spread

Տարածման արժեքը թույլ է տալիս փոխել ձեր ստվերի չափը՝ առանց դրա դիրքը փոխելու:

 box-shadow: 10px 10px 20px 30px;

Դրական տարածման արժեքը կդարձնի ձեր CSS տուփի ստվերը ավելի մեծ, մինչդեռ բացասական արժեքը կդարձնի այն ավելի փոքր:

CSS Box Shadow Color

CSS տուփի ստվերները լռելյայն են տարրի տեքստի գույնի համար, բայց դուք կարող եք դա չեղարկել՝ ավելացնելով գույն.

box-shadow: 10px 10px 20px 10px #0000ff;

Ձեր օգտագործած գույնը պետք է լինի CSS օրինական գունային ձևաչափով, օրինակ՝ վեցանկյուն կոդ, RGB կոդ կամ նախապես սահմանված գույն: Դուք կարող եք իմանալ վեցանկյուն կոդերի և CSS-ի այլ օրինական գունային տարբերակների մասին՝ նախքան ստվերները սկսելը:

CSS Box Shadow Inset

CSS տուփի ստվերները լռելյայնորեն դուրս են մնում իրենց հանձնարարված տարրից: «box-shadow» հատկությանը ներդիր ավելացնելով, կարող եք ստվերը ցուցադրել տարրի ներսից:

box-shadow: 10px 10px 20px 10px #0000ff inset;

Սա նախապես սահմանված տեքստային արժեք է. պարզապես ավելացնել կամ հեռացնել այն արժեքը սահմանելու համար:

Ինչպես օգտագործել CSS տեքստի ստվերը

CSS տեքստի ստվերները նման են տուփի ստվերների, թեև դրանք փոփոխելու ավելի քիչ արժեքներ ունեն: CSS տեքստի ստվերի շարահյուսությունը հետևյալն է.

text-shadow: offset-x offset-y blur-radius color;

Բայց ինչպե՞ս են գործում այս արժեքները:

CSS տեքստի ստվերային դիրքը

CSS տեքստի ստվերային օֆսեթները շատ նման են նույն տուփի ստվերային արժեքներին.

text-shadow: 10px 10px;

Դրական արժեքները կտեղադրեն ստվերը տեքստի տակ և աջ:

Բացասական արժեքները հակառակն են անում՝ ստվերը տեղադրելով տեքստի վերևում և ձախում:

 text-shadow: -10px -10px;

Դուք կարող եք խառնել բացասական և դրական արժեքները՝ ձեր CSS տեքստի ստվերը կատարելապես տեղադրելու համար:

CSS Text Shadow Blur Radius

CSS տեքստի ստվերի մշուշման շառավիղը հնարավորություն է տալիս մշուշել ձեր տեքստի հետևում գտնվող ստվերը:

text-shadow: 10px 10px 10px; 

Այս արժեքի կանխադրվածը 0 է (առանց մշուշման):

CSS տեքստի ստվերային գույնը

Լռելյայնորեն, CSS տեքստի ստվերները համապատասխանում են տեքստի գույնին: Դուք կարող եք փոխել ձեր տեքստի գույնը՝ այն ավելացնելով CSS տեքստի ստվերային հատկության վերջում։

text-shadow: 10px 10px 10px #0000ff;

Ինչպես CSS տուփի ստվերային գույները, դրա համար դուք պետք է օգտագործեք CSS օրինական գույն:

CSS տուփի և տեքստի ստվերային ձևավորման օրինակներ

Դուք կարող եք սկսել փորձարկել CSS տուփի և տեքստի ստվերների օգտագործումը, երբ հասկանաք հիմունքները: Ստորև բերված գաղափարները պետք է ոգեշնչեն ձեզ այս CSS հատկություններն օգտագործելու ձեր սեփական ստեղծագործական ուղիները գտնելու համար:

Երկգույն սահմաններ երկու CSS տուփի ստվերներով

Դուք կարող եք ավելացնել մեկից ավելի տուփի ստվեր կամ տեքստի ստվեր HTML տարրին: Քանի դեռ նրանց միջև ստորակետներ կան, դուք կարող եք նոր ստվերներ ավելացնել մեկ սեփականության վրա:

box-shadow: 30px 30px #0000ff, -30px -30px 0px #00ff00;

Այս երկգույն եզրագիծը դրա լավ օրինակն է: Երկու CSS տուփի ստվերներ՝ հակադիր դիրքերով և առանց մշուշման/տարածման, ստեղծում են հիանալի ստեղծագործական սահման:

Կրկնակի CSS տեքստային ստվերներ դրամատիկ էֆեկտի համար

Վերոնշյալ գաղափարի նմանությամբ, հետաքրքիր արդյունքների համար կարող եք ավելացնել և տեղադրել տեքստի բազմաթիվ տեքստային ստվերներ:

text-shadow: 35px 20px 4px darkgray, -35px -20px 4px darkgray;

Այս օրինակը ցույց է տալիս տեքստի մի տող՝ վերևում ստվերով և ստվերով ներքևում, որոնք երկուսն էլ ունեն տեքստի վրա հիմնված գունային արժեքներ:

Բազմագույն ֆոններ՝ ներդիր CSS տուփի ստվերներով

CSS-ը բավականաչափ հզոր է եզակի և հետաքրքիր ակտիվներ ստեղծելու համար՝ առանց որևէ արտաքին ֆայլի: Ներդրված CSS տուփի ստվերի օգտագործումը որպես ֆոն դրա հիանալի օրինակ է:

box-shadow: 20px 10px 10px 40px #000000 inset, -50px -30px 8px 60px gray inset, 30px 20px 6px 90px lightgray inset;

Այս տուփն ունի սպիտակ ֆոն, ինչպես նաև տարբեր գույների երեք ներդիր ստվերներ: Ստվերները համընկնում են միմյանց՝ յուրահատուկ ֆոն ստեղծելու համար:

Այս էֆեկտի հետագա ընդլայնումը պարզ խնդիր է՝ ավելացնելով նորաձև CSS ֆոնային գրադիենտ ձեր տարրին:

CSS Box Shadows & Text Shadows ստեղծագործական վեբ դիզայնի համար

CSS տուփի և տեքստի ստվերները հեշտ է օգտագործել, երբ իմանաք, թե ինչպես աշխատել դրանց հետ: Այժմ դուք ունեք այն գործիքները, որոնք անհրաժեշտ են ձեր սեփական դիզայնի վրա աշխատելու համար, բայց դուք պետք է շարունակեք ուսումնասիրել CSS-ը՝ ձեր հմտությունները բարելավելու համար: