Հավանաբար շատ կայքէջերում տեսել եք, որ նկարները լինում են տարբեր տեսակի վիզուալ էֆեկտներով։ Այդպիսի էֆեկտներն այժմ բավականին ակտուալ են և շատ հարմարավետ՝ մեր կայքերում օգտագործելու համար։ Դրանց իրագործման համար CSS3 հատկությունների մեջ է ներմուծվել CSS Filters-ը։ Այն հնարավորություն է ընձեռում իրականացնել փոփոխություններ նկարների գույների հետ, վիզուալ առումով դրանք խավարեցնել, ավելացնել ստվերներ և այլն։ Այստեղ մենք կքննարկենք CSS Filters հատկության բոլոր հնարավոր արժեքները առանձին-առանձին փոքրիկ օրինակների վրա և կտեսնենք, թե ինչպես դրանք կարող են փոփոխել նկարները։ Իսկ իմ մյուս գրառումների մեջ այս հատկությունը կկիրառեմ արդեն ավելի մեծ օրինակների վրա։ Վերցնենք մի նկար, որը գտնվում է ինչ-որ բլոկի մեջ.
<div class='container'>
<div class="image">
<img class='effect' src="https://lorempixel.com/700/300/city" alt="">
</div>
</div>
Այս նկարի համար գրենք որոշակի սկզբնական արտաքին տեսք ապահովող CSS կոդ․
.image{
max-width: 700px;
margin: 0 auto;
box-sizing: border-box;
}
.image img{
width:100%;
box-sizing: border-box;
padding: 5px;
background: #fff;
transition: all .3s linear;
}
Հենց այս կոդի մեջ էլ կավելացնենք նկարի համապատասխան էֆեկտները, իսկ մկնիկը նրա վրա պահելիս (hover)` կվերացնենք այդ էֆեկտները,
.image img:hover{
-webkit-filter: none;
filter: none;
}
որպեսզի փոփոխություններն ավելի ակնհայտ լինեն։ Մինչև այս հատկության արժեքները ներկայացնելը, նշեմ, որ առաջատար դիտարկիչներից ոչ բոլորն են կարողանում ճիշտ ցուցադրել տվյալ էֆեկտները, որը, բարեբախտաբար, հեշտությամբ լուծվում է CSS նախածանցներ(prefix) ավելացնելով։ Այնպես որ, չմոռանանք բոլոր տեղերում filter հատկությունը գրել նախածանցներով։
Եվ այսպես՝ CSS Filter-ն ընդունում է հետևյալ արժեքները․
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- hue-rotate()
- saturate()
- opacity()
- invert()
- sepia()
Քննարկենք դրանցից յուրաքանչյուրն առանձին-առանձին։
blur
Այս հատկությունը, այսպես ասած, ֆոկուսից շեղում է նկարները։ Ինչքան ավելի մեծ է նրա ստացած արժեքը, այնքան ավելի շատ է խախտված նկարի պարզությունը։ Այն կարող է ստանալ միայն պիքսելներով արժեքներ։ Վերը քննարկած օրինակի CSS կոդի մեջ ավելացնենք հետևյալ արտահայտությունը․
img.effect{
-webkit-filter: blur(3px);
filter: blur(3px);
}
Արդյունքում մեր ընտրած նկարի վրա կավելանա blur հատկությունը, որի արժեքները փոփոխելով՝ կարող ենք ավելի խավարեցնել կամ պարզեցնել այն։
brightness
Այս արժեքի հենց թարգմանությունից էլ (պայծառություն) արդեն հասկանալի է, որ այն պատասխանատու է նկարի պայծառության համար։ Այն կարող է ընդունել 2 տեսակի արժեքներ՝ լողացող ստորակետով թվեր կամ տոկոսներ։ Ընդ որում, առաջին դեպքում 1 արժեքն է համապատասխանում նկարի օրիգինալ տեսքին, իսկ երկրորդ դեպքում՝ 100%-ը։ Այս արժեքները վերևից սահմանափակում չունեն, այսինքն՝ կարող են լինել 0-ից մեծ ցանկացած թվեր։
Այս էֆեկտը ստանալու համար CSS կոդի մեջ blur-ի փոխարեն կգրենք brightness.
img.effect{
-webkit-filter: brightness(30%);
filter: brightness(30%);
}
contrast
Նույնպես ընդունում է 0-ից մեծ լողացող ստորակետով թվեր կամ տոկոսներ։ 1 կամ 100% արժեքները այստեղ նույնպես նկարը թողնում են անփոփոխ։ 100% (կամ 1)-ից փոքր արժեքների դեպքում նկարի պայծառությունը քչանում է, և կարծես այն պատվում է մոխրագույն շերտով։ Որքան մոտենում է 0-ին, այնքան այդ շերտի թափանցելիությունն ավելի է փոքրանում։ Իսկ 100%(կամ 1)-ից մեծ արժեքների դեպքում նկարի գույների մեջ բաց գույներն ավելի արտահայտված են դառնում և այդ արժեքի մեծացմանը զուգընթաց դրանք ավելի են շատանում։
img.effect{
-webkit-filter: contrast(30%);
filter: contrast(30%);
}
Այս կոդի միջոցով է նկարների վրա իրականացվում contrast էֆեկտը։
drop-shadow
Որպես շատ գեղեցիկ էֆեկտ կարելի է նաև համարել նկարի ստվերը, որն ստանալու համար մեզ բավական է օգտվել CSS Filter-ի drop-shadow մեթոդից։ Այն հետևյալ սկզբունքով է ընդունում արժեքներ․
- առաջին պարամետրն ընդունվում է որպես նկարից x առանցքի երկայնքով ստվերի շեղվածության չափ և համարվում է պարտադիր
- երկրորդ պարամետրը նույն սկզբունքով՝ y առանցքի երկայնքով և նույնպես համարվում է պարտադիր
- երրորդը՝ ստվերի հստակությունն է, որը կարելի է և չնշել։ Այս պարամետրի բացակայության դեպքում այն ընդունվում է որպես 0
- չորրորդը՝ ստվերի գույնն է, որը նույնպես պարտադիր չէ։
img.effect{
-webkit-filter: drop-shadow(6px 6px 5px #444);
filter: drop-shadow(6px 6px 5px #444);
}
Կարծում եմ՝ ստացված արդյունքը բավականին համոզիչ է և շատ գեղեցիկ էֆեկտ է հաղորդել նկարին։
grayscale
Հաճախակի օգտագորվող էֆեկտներց է նաև grayscale-ը, որի միջոցով կարող ենք նկարը դարձնել մոխրագույն։ Այն ընդունում է 0-100% կամ 0-1 արժեքներ։ Այսինքն՝ այս միջակայքից դուրս արժեքները ոչ մի ազդեցություն չեն ունենում նկարի վրա։
img.effect{
-webkit-filter: grayscale(.8);
filter: grayscale(.8);
}
hue-rotate
Այս մեթոդը նախատեսված է նկարների գույները նշված չափով գունային պալիտրայի սկավառակի վրա պտտելու համար։ Ավելի պարզ պատկերացնելու համար խորհուրդ կտամ օգտվել հետևյալ կայքից, որտեղ գույները տեղադրված են հենց սկավառակի վրա, և ակնհայտորեն կարող եք տեսնել պտույտից հետո ստացված գույնը։ Այդ պտույտի ապահովման համար անհրաժեշտ է hue-rotate – ին փոխանցել անկյունային արժեքներ(աստիճան)։ Տրամաբանական կլինի արժեքներն ընտրել -360-ից 360 աստիճան միջակայքում։
img.effect{
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
saturate
Այս հատկությունն իրենից ներկայացնում է նկարի գույներով հագեցվածությունը։ Այն ստանում է 0 և 0-ից մեծ լողացող ստորակետով թվեր կամ տոկոսով արժեքներ։ 0 արժեքի դեպքում նկարը օժտված է լինում մինիմալ գույներով։
img.effect{
-webkit-filter: saturate(.2);
filter: saturate(.2);
}
opacity
Նկարների համար (և ոչ միայն նկարների) շատ տարածված և օգտակար հատկություն է opacity-ն։ Այն հնարավորություն է տալիս նկարը թափանցիկ դարձնել։ Ստանում է 0-1 լողացող ստորակետով թվային կամ 0-100% տոկոսային արժեքներ։ 100% (կամ 1) արժեքի դեպքում նկարը փոփոխություն չի կրում, իսկ 0 արժեքի դեպքում այն ամբողջությամբ դառնում է թափանցիկ։
img.effect{
-webkit-filter: opacity(.4);
filter: opacity(.4);
}
invert
Այս հատկությունը նկարների վրա կիրառելու դեպքում, կախված ստացած արժեքից, այն վերցնում է օրիգինալ նկարի բոլոր գույները և կամայական սկզբունքով վերաբաշխում այդ գույները նկարի տարբեր մասերի վրա։ Այլ կերպ ասած՝ այս մեթոդով կարող ենք նկարի գույները խառնել իրար։ Այս մեթոդը կարող է ստանալ 0-100% կամ 0-1 տասնորդական թվերով արժեքներ։
img.effect {
-webkit-filter: invert(0.8);
filter: invert(.8);
}
sepia
Այս մեթոդի օգնությամբ նկարներին կարող ենք հաղորդել շագանակագույն երանգ, ինչը ստեղծում է հին նկարների էֆեկտ։ Այս մեթոդը նույնպես կարող է ընդունել 0-100% կամ 0-1 տասնորդական կոտորակներով արժեքներ։
img.effect {
-webkit-filter: sepia(0.8);
filter: sepia(.8);
}
Ահա սրանք են CSS Filter-ի հատկությունները, որոնք կարող ենք օգտագործել մեր կայքէջերի վիզուալ էֆեկտների ստացման համար։ Որպես ուղեցույց՝ ձեզ համար պատրաստել եմ CSS Filter-ի հատկությունների ընդհանրական տեսքը։
Այս թեմայի վերաբերյալ ցանկացած խնդիրների և հարցերի դեպքում, ինչպես միշտ, կարող եք դիմել մեզ՝ մեկնաբանությունների բաժնում։
Շնորհակալություն մեր բլոգից օգտվելու համար։ Հարգանքներով՝ IT-Blog.am թիմ։
