• Գլխավոր
  • Լուրեր
    • Առողջապահություն
    • Անվտանգություն
    • Արհեստական Ինտելեկտ
    • Էկոլոգիա
    • Մեքենաշինություն
    • Ռոբոտաշինություն
    • Համացանց
    • Համակարգիչ
    • Սմարթֆոն
    • Սոցցանց
    • Google
    • Microsoft
    • Hi-Tech
  • Վեբ
    • PHP
    • HTML
      • HTML5
    • CSS
      • CSS3
    • JavaScript
      • jQuery
    • WordPress
  • SQL
  • Թեստեր
    • PHP
    • MySQL
    • HTML
    • JavaScript
    • CSS
  • Ֆորում
  • Հետադարձ կապ
IT-Blog.am
Տեղեկատվական տեխնոլոգիաների պորտալ
  • Գլխավոր
  • Լուրեր
    • Առողջապահություն
    • Անվտանգություն
    • Արհեստական Ինտելեկտ
    • Էկոլոգիա
    • Մեքենաշինություն
    • Ռոբոտաշինություն
    • Համացանց
    • Համակարգիչ
    • Սմարթֆոն
    • Սոցցանց
    • Google
    • Microsoft
    • Hi-Tech
  • Վեբ
    • PHP
    • HTML
      • HTML5
    • CSS
      • CSS3
    • JavaScript
      • jQuery
    • WordPress
  • SQL
  • Թեստեր
    • PHP
    • MySQL
    • HTML
    • JavaScript
    • CSS
  • Ֆորում
  • Հետադարձ կապ
Գլխավոր  /  CSS • CSS3 • Web  /  Նկարների CSS էֆեկտներ․ Filters
22 Մարտի 2016

Նկարների CSS էֆեկտներ․ Filters

Հեղինակ Մկրտիչ
CSS, CSS3, Web

Հավանաբար շատ կայքէջերում տեսել եք, որ նկարները լինում են տարբեր տեսակի վիզուալ էֆեկտներով։ Այդպիսի էֆեկտներն այժմ բավականին ակտուալ են և շատ հարմարավետ՝ մեր կայքերում օգտագործելու համար։ Դրանց իրագործման համար 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 հատկությունը, որի արժեքները փոփոխելով՝ կարող ենք ավելի խավարեցնել կամ պարզեցնել այն։

pexels-photo-62262

 

brightness

Այս արժեքի հենց թարգմանությունից էլ (պայծառություն) արդեն հասկանալի է, որ այն պատասխանատու է նկարի պայծառության համար։ Այն կարող է ընդունել 2 տեսակի արժեքներ՝ լողացող ստորակետով թվեր կամ տոկոսներ։ Ընդ որում, առաջին դեպքում 1 արժեքն է համապատասխանում նկարի օրիգինալ տեսքին, իսկ երկրորդ դեպքում՝ 100%-ը։ Այս արժեքները վերևից սահմանափակում չունեն, այսինքն՝ կարող են լինել 0-ից մեծ ցանկացած թվեր։

pexels-photo-62262

Այս էֆեկտը ստանալու համար 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 էֆեկտը։

pexels-photo-62262

 

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);
        }

pexels-photo-62262

Կարծում եմ՝ ստացված արդյունքը բավականին համոզիչ է և շատ գեղեցիկ էֆեկտ է հաղորդել նկարին։

grayscale

Հաճախակի օգտագորվող էֆեկտներց է նաև grayscale-ը, որի միջոցով կարող ենք նկարը դարձնել մոխրագույն։ Այն ընդունում է 0-100% կամ 0-1 արժեքներ։  Այսինքն՝ այս միջակայքից դուրս արժեքները ոչ մի ազդեցություն չեն ունենում նկարի վրա։

     img.effect{
                    -webkit-filter: grayscale(.8);
                            filter: grayscale(.8);
        }

pexels-photo-62262

 

hue-rotate

Այս մեթոդը նախատեսված է նկարների գույները նշված չափով գունային պալիտրայի սկավառակի վրա պտտելու համար։ Ավելի պարզ պատկերացնելու համար խորհուրդ կտամ օգտվել հետևյալ կայքից, որտեղ գույները տեղադրված են հենց սկավառակի վրա, և ակնհայտորեն կարող եք տեսնել պտույտից հետո ստացված գույնը։  Այդ պտույտի ապահովման համար անհրաժեշտ է hue-rotate – ին փոխանցել անկյունային արժեքներ(աստիճան)։ Տրամաբանական կլինի արժեքներն ընտրել -360-ից 360 աստիճան միջակայքում։

img.effect{
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}

pexels-photo-62262

 

saturate

Այս հատկությունն իրենից ներկայացնում է նկարի գույներով հագեցվածությունը։ Այն ստանում է 0 և 0-ից մեծ լողացող ստորակետով թվեր կամ տոկոսով  արժեքներ։ 0 արժեքի դեպքում նկարը օժտված է լինում մինիմալ գույներով։

img.effect{
          -webkit-filter: saturate(.2);
                  filter: saturate(.2);
        }

pexels-photo-62262

 

opacity

Նկարների համար (և ոչ միայն նկարների) շատ տարածված և օգտակար հատկություն է opacity-ն։ Այն հնարավորություն է տալիս նկարը թափանցիկ դարձնել։ Ստանում է 0-1 լողացող ստորակետով թվային կամ 0-100%  տոկոսային արժեքներ։ 100% (կամ 1) արժեքի դեպքում նկարը փոփոխություն չի կրում, իսկ 0 արժեքի դեպքում այն ամբողջությամբ դառնում է թափանցիկ։

img.effect{
      -webkit-filter: opacity(.4);
              filter: opacity(.4);
        }

pexels-photo-62262

 

invert

Այս հատկությունը նկարների վրա կիրառելու դեպքում, կախված ստացած արժեքից, այն վերցնում է օրիգինալ նկարի բոլոր գույները և կամայական սկզբունքով վերաբաշխում այդ գույները նկարի տարբեր մասերի վրա։ Այլ կերպ ասած՝ այս մեթոդով կարող ենք նկարի գույները խառնել իրար։ Այս մեթոդը կարող է ստանալ 0-100% կամ 0-1 տասնորդական թվերով արժեքներ։

img.effect {
  -webkit-filter: invert(0.8);
  filter: invert(.8);
}

pexels-photo-62262

 

sepia

Այս մեթոդի օգնությամբ նկարներին կարող  ենք հաղորդել շագանակագույն երանգ, ինչը ստեղծում է հին նկարների էֆեկտ։ Այս մեթոդը նույնպես կարող է ընդունել 0-100% կամ 0-1 տասնորդական կոտորակներով արժեքներ։

img.effect {
  -webkit-filter: sepia(0.8);
  filter: sepia(.8);
}

pexels-photo-62262
Ահա սրանք են CSS Filter-ի հատկությունները, որոնք կարող ենք օգտագործել մեր կայքէջերի վիզուալ էֆեկտների ստացման համար։ Որպես ուղեցույց՝ ձեզ համար պատրաստել եմ CSS Filter-ի հատկությունների ընդհանրական տեսքը։

Այս թեմայի վերաբերյալ ցանկացած խնդիրների և հարցերի դեպքում, ինչպես միշտ, կարող եք դիմել մեզ՝ մեկնաբանությունների բաժնում։

Շնորհակալություն մեր բլոգից օգտվելու համար։ Հարգանքներով՝ IT-Blog.am թիմ։

 

 

Կապված գրառումներ

  • mysql transaction

    MySQL գործարքի(transaction) կառավարման օպերատորներ

    11/19/2016
  • Class

    Կլասների (classes) գրելաձևը (syntax)

    10/20/2016
  • MySQL Trigger

    MySQL տրիգերներ (Triggers) և իրադարձություններ(Events)

    10/04/2016
Facebook
  • Շատ Դիտված Գրառումներ
  • Նոր գրառումներ
  • Calculator
    Հաշվիչի (calculator) պատրաստում 04/18/2016
  • Recursion
    Ռեկուրսիա (recursion) հասկացությունը 06/02/2016
  • Icon տառատեսակներ 02/21/2016
  • MySQL joins
    MySQL JOINS (MySQL միացումներ) 06/13/2016
  • Սուպերգլոբալ փոփոխականներ (superglobals) 03/24/2016
  • Ի՞նչ է Pi Network-ը և ինչպե՞ս վաստակել Pi 03/27/2020
  • Honda-ն ներկայացրել է մոտոցիկլետ, որն օգտագործում է քամու էներգիա 12/23/2017
  • Նոր 3D-տպիչ սարքը ստեղծում է առարկաներ վայրկյանների ընթացքում 12/22/2017
  • Հետազոտողներն օգտագործում են էլեկտրական հոսանքներ`մարդու հյուսվածքներում քաղցկեղի հայտնաբերման համար 12/18/2017
  • Nvidia ընկերությունը ներկայացրել է երբևէ ստեղծված ամենահզոր գրաֆիկական պրոցեսորը 12/16/2017
  • WordPress -ի տեղադրումը .Net -ի վրա 03/16/2017
  • Class
    Կլասների (classes) գրելաձևը (syntax) 10/20/2016
  • encapsulation
    Ինկապսուլացիա (Encapsulation) 08/17/2016
  • object oriented programming
    Օբյեկտ կողմնորոշված ծրագրավորում (OOP) 07/04/2016
  • Ի՞նչ է Pi Network-ը և ինչպե՞ս վաստակել Pi 03/27/2020
  • Honda-ն ներկայացրել է մոտոցիկլետ, որն օգտագործում է քամու էներգիա 12/23/2017
  • Նոր 3D-տպիչ սարքը ստեղծում է առարկաներ վայրկյանների ընթացքում 12/22/2017
  • mysql transaction
    MySQL գործարքի(transaction) կառավարման օպերատորներ 11/19/2016
  • MySQL Trigger
    MySQL տրիգերներ (Triggers) և իրադարձություններ(Events) 10/04/2016
  • Procedures and Functions
    MySQL ընթացակարգեր (procedures) և ֆունկցիաներ (functions) 08/31/2016
  • MYSQL View
    MySQL ներկայացումներ (VIEWS) 07/16/2016
  • WordPress -ի տեղադրումը .Net -ի վրա 03/16/2017
  • SEO խրվակներ WordPress-ի համար 04/25/2016
  • Ծանոթացում WordPress-ի կառավարակետի հետ (մաս 2) 02/24/2016
  • Ի՞նչ է CMS-ը 02/17/2016
© 2020 թ.  IT-Blog.am Բոլոր հեղինակային իրավունքները պաշտպանված են:

Սույն կայքում տեղադրված նյութերի հեղինակային իրավունքը պատկանում է բացառապես IT-Blog.am կայքի հեղինակներին և կայքում բոլոր հրապարակված նյութերն անհատական օգտագործման համար են։ Այս կայքում  հրապարակված նյութերի (մասնակի կամ ամբողջական) վերահրապարկումը տեղեկատվություն տարածող այլ միջոցներում (բացառությամբ սոցկայքերի) արգելված է։ Խախտում թույլ տված անձինք կենթարկվեն պատասխանատվության` օրենքով սահմանված կարգով։