Şəklin CSS-də 15 efekti 1

Salam veb həvəskarları. Saytımızda çalışırıq elə məqalələr paylaşaq ki, isrifadəçilərə və bu sahədə başlayan gənc mütəxəsislərə yardımçı olsun. Bu gün paylaşılan məqalənin ən çox veb saytların yığılması ilə məşğul olan şəxslər üçün faydalı olacağını düşünürəm. Ayrıca efektlərin təqdimatından öncə istərdim şəkillər üçün CSS3 fraqmentini təqdim edirəm. Bu kod nümunədə göstərəcəyim şəkillərin baza qaydalarıdır.

border-box təqi o deməkdir ki, şəkil ilə olan blokların hündürlüyü və eni  özünə sahənin və sərhədlərin kəmiyyətini birləşdirəcəkdir.  pic klası isə şəkillərin ümumi xassələrini təyin edəcəkdir. standart hündürlük və eni təyin etdikdən sonra overflow : hidden; təqi şəklin bir blokun içində statik qalmasını təmin edəcəkdir.

Miqyaslama və panorama

Bizim ilk efektimiz şəkillərin miqyasının və ya yerlərini dəyişməsi olacaqdır.

Böyüdülmə

cssimagehovers-2[1]
Bu efektə biz elə etməliyik ki, istifadəçi siçanın kursorunu şəklin üzərinə apardıqda, şəkil öz sərhədlərindən çıxmamaq şərti ilə böyüsün.

Bu HTML kodudur:

Gördüyünüz kimi HTML kodda biz iki klass pic və grow işlətmişik. Birinci olan pic klassını bizə artıq tanışdır. O bütün şəkillərə eyni xassələri təyin edir. İndi isə CSS fraqmentinə yaxından baxaq:

Əslində şəklin real ölçüləri 400х400px kimidir. Lakin biz onu grow img klası ilə blokun ölçülərinə uyğun olaraq  uyğunlaşdırırıq. Sonra biz transition xassəsini təyin edirik, bu da şəklin bir neçə saniyə ərzində yavaş-yavaş bir xassədən digərinə keçməsinə cavab verir. Yəni xüsusi efekt yaradır.

Kiçiltmə

cssimagehovers-3[1]
Bu birinci efektin tam əksidir. Birinci şəklin ölçüləri standart olaraq veriril. Kursoru üzərinə yerləşdirdikdən sonra isə o kiçilərək 300х300px ölçülərini alır. Belə bizim kiçiltmə efektimiz yaranır.

Üfüqi dəyişmə

cssimagehovers-4[1]
Bu efekt şəklin ölçülərini dəyişmədən blokun içində üfüqi hərəkətini təmin edir. Kursoru üzərinə qoyduqda şəkil blokun içində sağdan sola doğru hərəkət edir.

Şəklin 600х300px kimi ölçüləri vardır.

transitionmargin xassələri ilə biz şəkli sola doğru 200px yavaş yavaş hərəkət etdirmiş oluruq.

Şaquli dəyişmə

cssimagehovers-5[1]
Əvvəlki efektə analoji olaraq bu efektdə şəkil blokda aşağıdan yuxarıya doğru hərəkət edir. Aşağıda təqlərə nəzər gəzdirək:

Şəklin ölçüləri 300х600px kimidir.

Hərəkət 200px üzrə dəyişir.

Transformasiyası

İndi isə efektləri daha da çətinləşdirək. İlk öncə başlayaq əyilmə efektindən və davam edək. Bunun biz transform xassəsi yardımçı olacaqdır.

Əyilmə

cssimagehovers-6[1]
Möhtəşəm bir efektdir. Kursoru şəklin üzərinə yerləşdirərək şəklin sol tərəf əyildiyinin şahidi oluruq.

Şəkil cəmi 10 dərəcə bucaq altında dönür. Əlbətdəki, css fraqmentində siz öz dərəcənizi təyin edə bilərsiniz.

Dönüş

cssimagehovers-7[1]
İstifadəçi şəklin üzərinə siçanın kursorunu yaxınlaşdırdıqda, ortaya qeyria adi bir efekt çıxır: Şəkil 360 dərəcə dönərək öz blokunu fırladıb kvadratdan dairəyə çevirir. Düyşünürəm əksər veb proqramçılar saytlara efekt vermək üçün bu üsuldan istifadə edirlər.

Bütün məzmun ondan ibarətdir ki, morph klası üzərinə kursor olduğundan şəkli 360 dərəcə fırladıb, border-radius təqinə 50% xassə təyin edir və nəticədə blokda forlanan şəkil efektini yaradır.

Fokuslaşdırma

cssimagehovers-8[1]
Yuxarıdakı efktən fərqli olaraq, burada şəkil deyil, ətrafında olan blok qalınlaşaraq mərkəzə doğru hərəkət edəcəkdir.

Şəkil filterləri

Sonda şəkil filterlərinə ətraflı göz gəzdirək. Yuxarıda təqdim etdiyimiz efektlərdən fərqli olaraq, şəkil filterləri -WebKit prefiksi ilə istifadə edəcək. Əfsuslar olsun ki, bəzi brauzerlərdə bu efektlər işləməyə bilər. Əgər belə hallarla rastlaşsanız, zəhmət olmasa bizə bu haqda şərh formamızda ətraflı məlumat verərdini.

Yayğın

cssimagehovers-10[1]
Bu filterlərdən birinci efekti – şəklin yayğın olmasıdır. Burada koda cəhətdən daha asandır. Aşağıdakı CSS fraqmentinə nəzər yetirin.

Gördüyünüz kimi efekti almaq üçün biz -webKit-filter-ə 5px kəmiyyətini təyin etmişik.

Ağ-qara təsvir

cssimagehovers-11[1]
Bu da öz formasında daha asan efektidir. Şəkli normal (rəngli) halından ağ-qara versiyasına çeviririk.

Burada mən boz çaların əhəmiyyətini 100% kimi təyin etmişəm. Çaların əhəmiyyətini öz zövqünüzə görə dəyişə bilərsiniz.

Aydınlatma

cssimagehovers-12[1]
İndi isə şəklin parlaqlığı ilə bir az işləyək. İlk öncə şəkli tutqunlaçdıraq sonra isə kursor üzrə efektini isə əksinə öz normal vəziyyətinə qaytaraq.

Deməli ilkin rəqəmi mənfi kimi təqribən -65% civarında təyin edirik, sonra isə hover üçün başlanğıc vəziyyətinə qaytarırıq yəni 0.

Sepia

cssimagehovers-13[1]
Daha bir retro efekti. Rəngli şəkli tonal sepiyaya çevirən efekt.

Sepiya və gümüş çalarları əhəmiyyəti faizlə təqdim olunmuşdur. Və maksimal nominalda göstərilmişdir – 100%.

Zidlilik

cssimagehovers-14[1]
İndi isə zidlilik eftekti haqqında danışaq. Fikrimcə bu filtr ən qeyri-adi filtrdi. Burada siz şəklin rəng dolğunluğu ilə müxtəlif formada efektlər yarada bilərsiniz.

Təsvir çaları

cssimagehovers-16[1]
Bu filtr şəklin rəngini verilmiş bucağdan asılı olaraq dəyişir.

Təsvirin çaları 0-360 dərəcə arasında təyin edilir. Burada 0 kəmiyyəti normal hesab edilir.

İnversiya

cssimagehovers-17[1]
Webkit-dən daha bir filtr – İnversiya.

Sözügedən filtr rəngləri inversiya edir. Əhəmiyyatı faizlə verilir və 0-100 rəqəmi ilə dəyişir.

Bundan başqa biz filterləri bir qaydaya birləşdirə bilərik. Bununlada şəklə daha kompleks efekt verilir. Məsələn aşağıdakı fraqmentə şəklə ağ-qara efekti verir və zidliliyi artırır:

Şəffaflıq

cssimagehovers-18[1]
Gədik çatdıq sonuncu 15-ci efektə. Bu filtr ən çox yayılmış efektidir.  Bu efekt şəklin şəffaflıq ayarları ilə oynayaraq xüsusi efekt yaradır.

Şəffaflığın kəmiyyəti yenədə faizlə təyin edilir ki, burada 100% tam şəffaf olmamaqla 0% tam şəffaflıq  deməkdir. Bu efektin bir üstün cəhətidə odur ki, bu efekti adı CSS-də belə işlətmək mümkündür və demək olar ki bütün brauzerlərdə işləyə bilir hətda IE9+ belə.

Bu fraqmentdə isə şəffaflıq nominalı 1-də 0-a kimi təyin edilir.

BÜTÜN EFEKTLƏRİN DEMO GÖRÜNÜŞÜ

Orfoqrafik Səhv tapdınız? Səhv yazılmış sözü seçin və Ctrl + Enter düymələrini basın. Dilimizi daha düzgün yazaq.
Orphus system
loading...

Digər yazılar

Şərh forması