CSS-də 15 möhtəşəm effekt

Bəyənmək Şərh yazmaq

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.

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

body {
background: #333;
}

.pic {
border: 10px solid #fff;
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}

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ə

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:

<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>

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:

/*GROW*/
.grow img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow img:hover {
width: 400px;
height: 400px;
}

Ə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ə

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.

<div class="shrink pic">
<img src="http://lorempixel.com/400/400/nightlife/4" alt="city">
</div>
/*SHRINK*/
.shrink img {
height: 400px;
width: 400px;-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.shrink img:hover {
width: 300px;
height: 300px;
}

Üfüqi dəyişmə

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.

<div class="sidepan pic">
<img src="http://lorempixel.com/600/300/sports/8" alt="kick">
</div>

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

/*SIDEPAN*/
.sidepan img {
margin-left: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.sidepan img:hover {
margin-left: -200px;
}

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

Şaquli dəyişmə

Ə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:

<div class="vertpan pic">
<img src="http://lorempixel.com/300/600/sports/5" alt="climb">
</div>

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

/*VERTPAN*/
.vertpan img {
margin-top: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.vertpan img:hover {
margin-top: -200px;
}

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ə

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

<div class="tilt pic">
<img src="http://lorempixel.com/300/300/transport/5" alt="car">
</div>
/*TILT*/
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}

Şə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üş

İ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.

<div class="morph pic">
<img src="http://lorempixel.com/300/300/nature/5" alt="beach">
</div>
/*MORPH*/
.morph {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

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

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.

<div class="focus pic">
<img src="http://lorempixel.com/300/300/sports/1" alt="cricket">
</div>
/*FOCUS*/
.focus {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.focus:hover {
border: 70px solid #000;
border-radius: 50%;
}

Şə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

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.

<div class="blur pic">
<img src="http://lorempixel.com/300/300/transport/2" alt="plane">
</div>
/*BLUR*/
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur img:hover {
-webkit-filter: blur(5px);
}

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

Ağ-qara təsvir

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

<div class="bw pic">
<img src="http://lorempixel.com/300/300/nature/2" alt="sea">
</div>
/*B&W*/
.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.bw:hover {
-webkit-filter: grayscale(100%);
}

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

İ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.

<div class="brighten pic">
<img src="http://lorempixel.com/300/300/technics/2" alt="sea">
</div>
/*DARKEN*/
.brighten img {
-webkit-filter: brightness(-65%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.brighten img:hover {
-webkit-filter: brightness(0%);
}

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

Daha bir retro efekti. Rəngli şəkli tonal sepiyaya çevirən efekt.

<div class="sepia pic">
<img src="http://lorempixel.com/output/people-q-c-300-300-4.jpg" alt="people">
</div>
/*SEPIA*/
.sepia img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.sepia img:hover {
-webkit-filter: sepia(100%);
}

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

Zidlilik

İ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.

<div class="contrast pic">
<img src="http://lorempixel.com/output/animals-q-c-300-300-9.jpg" alt="dog">
</div>
/*CONTRAST*/
.contrast img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.contrast img:hover {
-webkit-filter: contrast(185%);
}

Təsvir çaları

Bu filtr şəklin rəngini verilmiş bucağdan asılı olaraq dəyişir.

<div class="hue-rotate pic">
<img src="http://lorempixel.com/output/transport-q-c-300-300-9.jpg" alt="train">
</div>
/*HUE_ROTATE*/
.hue-rotate img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.hue-rotate img:hover {
-webkit-filter: hue-rotate(65deg);
}

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

İnversiya

Webkit-dən daha bir filtr – İnversiya.

<div class="invert pic">
<img src="http://lorempixel.com/output/technics-q-c-300-300-1.jpg" alt="dog">
</div>
/*INVERT*/
.invert img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.invert img:hover {
-webkit-filter: invert(100%);
}

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:

img {
-webkit-filter: grayscale(100%) contrast(150%);
}

Şəffaflıq

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.

<div class="opacity pic">
<img src="http://lorempixel.com/output/sports-q-c-300-300-6.jpg" alt="soccer">
</div>
/*OPACITY*/
.opacity img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.opacity img:hover {
-webkit-filter: opacity(25%);
}

Şə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ə.

img {
opacity: 0.5;
}

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

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

CSS-də 15 möhtəşəm effekt
5 / 1 səs

Digər maraqlı məqalələrimiz

loading...

Bir cavab yazın

Orfoqrafiya səhvi bildirişi

Aşağıdakı hissə sayt rəhbərliyinə göndəriləcəkdir: