CSS3 keçidləri Nice Fade Effects yaradın
Web-dizaynerlər uzun müddət CSS3 səhnə vurduqda yaradılan səhifələr üzərində daha çox nəzarət istədilər. CSS3- də təqdim olunan yeni üslublar veb-mütəxəssislərə səhifələrinə Photoshop kimi effektlər əlavə etmək imkanı verdi. Bura gölgələr və parıltılar , yuvarlaq künclər və daha çox kimi xüsusiyyətlər daxildir. CSS3 də saytlarda gözəl interaktivlik yaratmaq üçün istifadə edilə bilən animasiya kimi təsvirləri təqdim etdi.
CSS3- dən istifadə edərək, veb saytınızdakı elementlərə əlavə edə biləcəyiniz çox gözəl vizual effekt qeyri-şəffaflıq və keçid üçün xassələrin birləşməsindən istifadə etmək və onları söndürməkdir. Bu, sitenin ziyaretçisinin bir şey yapması halında odaklanmaya başlayan soluk alanları oluşturarak sayfalarınızı daha etkileşimli hale getirmek üçün, asan və yaxşı şekilde desteklenen bir yoldur.
Web səhifələrinizdə müxtəlif elementlərə bu təsirli vizual effekt əlavə etmək nə qədər asan olduğunu nəzərdən keçirək ..
Hover üstündə şəffaflığı dəyişməyə icazə verin
Müştərinin bu element üzərində hərəkət etdiyində bir görüntünün qeyri-şəffaflığını necə dəyişdirəcəyinə baxaraq başlayacağıq. Bu nümunə üçün (HTML aşağıda göstərilir) gridout'un sinif özniteli ilə bir şəkil istifadə edirəm.
Düyündən çıxartmaq üçün CSS stil səhifəsinə aşağıdakı stil qaydalarını əlavə edirik:
.greydout {
-webkit-opacity: 0.25;
-moz-şəffaflıq: 0,25;
qeyri-şəffaflıq: 0,25;
}
Bu qeyri-şəffaflıq parametrləri 25% -ə çevrilir. Yəni şəkil normal şəffaflığın 1/4 kimi göstəriləcəkdir. Şəffaflığı olmayan tamamilə şəffaf, 100% tamamilə şəffaf olardı.
Daha sonra, sümük üzərinə girdikdə, görünüşü dəqiqləşdirmək üçün (ya da daha doğrusu, tamamilə şəffaf olmaq üçün) əlavə etmək olar: hover pseudo-class:
.greydout: hover {
-webkit-opacity: 1;
-moz-şəffaflıq: 1;
şəffaflıq: 1;
}
Görürsünüz ki, bu nümunələr üçün, bu brauzerlərin köhnə versiyalarının geri uyğunluğunu təmin etmək üçün satıcıdan prefixed versiyaların üstünlük versiyasını istifadə edirəm. Bu yaxşı bir praktik olsa da, reallıq, qeyri-şəffaflıq qaydağının brauzerlər tərəfindən yaxşı dəstəkləndiyini və bu satıcıdan əvvəlki xəttləri atmaq olduqca təhlükəsizdir. Hələ də, köhnə brauzer versiyalarına dəstək vermək istəyirsinizsə, bu prefiksləri əlavə etməmək üçün heç bir səbəb yoxdur. Bəyannamənin stilin normal, əvvəlcədən tərtib versiyası ilə başa çatması üçün qəbul edilən ən yaxşı təcrübəyə əməl etməyinizə əmin olun.
Bunu bir saytda yerləşdirdiyiniz təqdirdə, bu qeyri-şəffaflıq tənzimlənməsinin çox kəskin bir dəyişiklik olduğunu görürsünüz. Birincisi, boz və sonra o, bu ikisi arasında heç bir müvəqqəti dövlət olmadan. Yüngül bir keçid kimi - on və ya off. Bu istədiyiniz nə ola bilər, ancaq daha tədricən bir dəyişikliklə təcrübə etmək istəyə bilərsiniz.
Həqiqətən gözəl bir təsir əlavə etmək və bu fadein tədricən çıxarmaq üçün keçid əmlakını .greydout sinifinə əlavə etmək istəyirəm:
.greydout {
-webkit-opacity: 0.25;
-moz-şəffaflıq: 0,25;
qeyri-şəffaflıq: 0,25;
-webkit-keçid: bütün 3s rahatlığı;
-moz-keçid: bütün 3s rahatlığı;
-ms-keçid: bütün 3s rahatlığı;
-o-keçid: bütün 3s rahatlığı;
keçid: bütün 3s rahatlığı;
}
Bu kodla, dəyişiklik birdən-birə keçmədən, tədricən keçid olardı.
Bir daha, burada bir sıra satıcıdan istifadə qaydalarını istifadə edirik. Keçid də qeyri-şəffaflıq kimi dəstəklənmir, buna görə də bu prefikslər məntiqlidir.
Bu qarşılıqlı əlaqələri planladığınız zaman xatırlamaq üçün bir şey sensor ekranlı cihazların "hover" vəziyyətinə gəlməməsi, belə ki bu təsirlər tez-tez bir cib telefonu kimi bir toxunma ekranı cihazı istifadə edən hər kəsə itkindir. Keçid tez-tez baş verəcək, ancaq bu, həqiqətən də görülə bilməyəcəklər. Yaxşı bir mükafat təsiri olaraq əlavə edərsinizsə yaxşıdır, ancaq başa düşülməsi üçün İHTİYACIN görüləcək hər hansı bir dəyişiklikdən qaçın.
Fading Out çox mümkündür
Xırda bir şəkil ilə başlamanıza ehtiyac yoxdur, tamamilə şəffaf görünüşdən qaçmaq üçün keçidlər və qeyri-şəffaflıqdan istifadə edə bilərsiniz. Eyni görüntüyü istifadə edərək, yalnız bir sinif ilə:
class = "withfadeout">
Yalnız əvvəlki kimi, şəffaflığı istifadə edərək dəyişdirin: hover selector:
.withfadeout {
-webkit-keçid: bütün 2 -lərin rahatlığı;
-moz-keçid: bütün 2s rahatlığı;
-s-keçid: bütün 2-i asanlıqla;
-o-keçid: bütün 2 -lərin rahatlığı;
keçid: bütün 2s asanlıqla-out-out;
}
.feat: hover {
-webkit-opacity: 0.25;
-moz-şəffaflıq: 0,25;
qeyri-şəffaflıq: 0,25;
}
Bu nümunədə, şəkil tam şəffafdan bir qədər şəffaf keçid olardı - ilk nümunəmizin əksinə.
Şəkillərdən kənara çıxma
Bu vizual keçişləri tətbiq etmək və görünüşlərə fades edə bilərsiniz, ancaq bu css effektləri olan şəkilləri istifadə etməklə məhdudlaşmırsınız. Kolayca tıklandığında və tutulduğunda sola basan CSS-tipli düymələri asanlıqla edə bilərsiniz. Yalnız şəffaflığı istifadə edərək: aktiv pseudo-class istifadə edərək, keçidini təyin edən sinifə keçid qoyun. Nə olduğunu görmək üçün bu düyməni basın və saxlayın.
Üstəlik və ya tıklandığında əslində hər hansı bir vizual element söndürülə bilər. Bu nümunədə siçanın üzərindəki divanın qeyri-şəffaflığını və mətnin rəngini dəyişirəm. İşdə CSS:
#myDiv {
eni: 280px;
fon-rəng: # 557A47;
rəng: #dfdfdf;
padding: 10px;
-webkit-keçid: bütün 4s asanlıqla 0s;
-moz-keçid: bütün 4s asanlıqla 0s;
-ms-keçid: bütün 4s sadələşdirilmiş 0s;
-o-keçid: bütün 4s asanlıqla 0s;
keçid: bütün 4s asanlıqla 0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-şəffaflıq: 0,25;
qeyri-şəffaflıq: 0,25;
rəng: # 000;
}
Naviqasiya menyularında Fading Background Colors'dan faydalana bilərsiniz
Bu sadə naviqasiya menyusunda fon rənginin siçanı menyu elementləri üzərində yavaş-yavaş sönür və sönür. İşdə HTML:
- Ev
- CSS3 Tutorials
- CSS3 xüsusiyyətləri
Və burada CSS:
ul # sampleNav {list-style: none; }
ul numuneNav li {
ekran: inline;
float: sol;
padding: 5px 15px;
margin: 0 5px;
-webkit-keçid: bütün 2s linear;
-moz-keçid: bütün 2s lineer;
-ms-keçid: bütün 2s linear;
-o-keçid: bütün 2s linear;
keçid: bütün 2s lineer;
}
ul # sampleNav li a {mətn-bəzək: none; }
ul # sampleNav li: hover {
fon-rəng: # DAF197;
}
Brauzer dəstəyi
Bir neçə dəfə toxunduğum kimi, bu üslublar çox yaxşı brauzer dəstəyinə malikdir, buna görə siz hər hansı bir xəyaldan istifadə etmədən azad olmanız lazımdır. Bunun istisnası yalnız Internet Explorer-in daha köhnə versiyalarıdır, amma Microsoft-un 11-dən aşağı olan IE-nin bütün versiyalarına dəstək vermək barədə son qərarı ilə bu köhnə brauzerlər daha az və daha az bir məsələ halına gəlir - və köhnə bir brauzer bu tənəzzül keçişinə baxın, bu böyük bir problem olmamalıdır. Bu cür effektləri məhdud qarşılıqlı əlaqələrə məhdudlaşdıran və funksionallığı idarə etmək və ya əsas məzmunu açmaq üçün onlara etibar etmədiyiniz müddətdə, effektləri dəstəkləməyən köhnə brauzerlər daha az xoşagəlməz bir təcrübə əldə edəcəklər, ancaq bu brauzerlərdə istifadəçilər Xüsusilə saytın normal olaraq istifadə edə biləcəyi və lazım olan məlumatları əldə edəcəyi fərqləri bilirik.
Əlavə əyləncə, İki Şəkli Swap
Bir görüntüyü digərinə necə söndürmək üçün bir nümunə. HTML istifadə edin:
Və tamamilə şəffaf, ikincisi tamamilə qeyri-şəffaf və sonra keçid ikitərəfli bir CSS təşkil edən CSS:
.swapMe img {-webkit-keçid: bütün 1s rahatlığı-in-out; -moz-keçid: bütün 1s rahatlığı; -ms-keçid: bütün 1s rahatlığı; -o-keçid: bütün 1s rahatlığı; keçid: bütün 1s rahatlığı; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-şəffaflıq: 1; şəffaflıq: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-şəffaflıq: 0; şəffaflıq: 0; }