| 18.02.2016
CSS3 UI dizaynerləri üçün qeyri-məhdud imkanlar açır və əsas üstünlüyü ondan ibarətdir ki, demək olar ki, istənilən ideya JavaScript istifadə etmədən asanlıqla həyata keçirilə və həyata keçirilə bilər.
Təəccüblüdür ki, sadə şeylər adi bir veb səhifəni necə canlandırır və onu istifadəçilər üçün daha əlçatan edir. Söhbət CSS3 keçidlərindən gedir, onun köməyi ilə elementə üslubu çevirməyə və dəyişməyə icazə verə bilərsiniz, məsələn, hover üzərində. Aşağıda mövcud olan doqquz CSS3 animasiya nümunəsi vebsaytınızda həssaslıq yaratmağa, həmçinin gözəl, hamar keçidlərlə səhifənin ümumi görünüşünü yaxşılaşdırmağa kömək edəcək.
Daha ətraflı məlumat üçün arxivi faylları ilə yükləyə bilərsiniz.
Bütün effektlər keçid xassəsindən istifadə etməklə işləyir. keçid- "keçid", "çevirmə") və psevdo-sinif: siçan kursoru onun üzərinə getdikdə elementin üslubunu təyin edən hover (dərsliyimizdə). Nümunələrimiz üçün biz 500x309 px div, ilkin fon rəngi #6d6d6d və 0,3 saniyəlik keçid müddətindən istifadə etdik.
Bədən > div ( en: 500px; hündürlük: 309px; fon: #6d6d6d; -webkit-keçid: hamısı 0.3s asanlıq;; -moz-keçid: hamısı 0.3s asanlıq;; -o-keçid: hamısı 0.3s asanlıq;; keçid: bütün 0.3s asanlığı)
1. Hover üzərində rəng dəyişdirin
Bir zamanlar belə bir effektin həyata keçirilməsi müəyyən RGB dəyərlərinin riyazi hesablamaları ilə kifayət qədər əziyyətli iş idi. İndi sizə lazım olan yeganə şey CSS üslubunu yazmaqdır ki, orada selektora psevdo-sinif əlavə etməlisən: hover və blokun üzərinə gətirdiyiniz zaman orijinal fon rəngini rəvan (0,3 saniyə ərzində) əvəz edəcək fon rəngi təyin etməlisiniz. :
Rəng: hover (fon:#53ea93; )
2. Çərçivənin görünüşü
Maraqlı və heyrətamiz çevrilmə, siçan üzərinə gətirdiyiniz zaman rəvan görünən daxili çərçivədir. Müxtəlif düymələri bəzəmək üçün yaxşı uyğun gəlir. Bu effektə nail olmaq üçün biz psevdo-class:hover və inset parametri ilə box-shadow xassəsindən istifadə edirik (elementin daxilində kölgə təyin edir). Bundan əlavə, kölgə uzanmasını (bizim vəziyyətimizdə 23px) və rəngini təyin etməlisiniz:
Sərhəd: hover ( qutu-kölgə: daxil edin 0 0 0 23px #53ea93; )
3. Yelləncək
Bu CSS animasiyası istisnadır, çünki burada keçid xüsusiyyətindən istifadə edilmir. Bunun əvəzinə istifadə etdik:
- @keyframes, sizə deyilənləri etməyə imkan verən kadr-kadr CSS animasiya yaratmaq üçün əsas direktivdir. storyboard və animasiyanı əsas məqamların siyahısı kimi təsvir edin;
- animasiya və animasiya-iteration-count - animasiya parametrlərini (müddəti və sürəti) və dövrlərin sayını (təkrarlar) təyin etmək üçün xüsusiyyətlər. Bizim vəziyyətimizdə 1-i təkrarlayın.
animasiya: yelləncək 0.6s asanlığı;
-webkit-animasiya-iterasiya sayı: 1;
animasiya-iteration-count: 1; )
4. Zəifləmə
Solğun effekt mahiyyətcə elementin şəffaflığında sadə dəyişiklikdir. Animasiya iki mərhələdə yaradılır: əvvəlcə ilkin şəffaflıq vəziyyətini 1-ə - yəni tam qeyri-şəffaflığa, sonra isə siçanın üzərinə hərəkət edərkən onun dəyərini təyin etməlisiniz - 0,6:
Solğunluq ( qeyri-şəffaflıq: 1; ) .solğunluq: hover ( qeyri-şəffaflıq: 0,6; )
Əks nəticə üçün dəyərləri dəyişdirin:
5. Böyütmə
Bir elementi kiçik etmək, onu böyütmək qədər asandır. Beşinci abzasda miqyası artırmaq üçün 1-dən böyük bir dəyər göstərməli idiksə, bloku azaltmaq üçün sadəcə birdən az olacaq bir dəyəri göstərəcəyik, məsələn, miqyas(0.7) . İndi, siçan üzərinə sürdükdə blok proporsional olaraq orijinal ölçüsünün 30 faizi qədər kiçiləcək:
Büzülmə: hover ( -webkit-transform: miqyas(0.7); -ms-transform: miqyas(0.7); çevirmək: miqyas(0.7); )
7. Dairəyə çevrilmə
Tez-tez istifadə olunan animasiyalardan biri də üzərinə sürüldükdə dairəyə çevrilən düzbucaqlı elementdir. :hover və keçid ilə birlikdə istifadə edilən CSS border-radius xassəsindən istifadə edərək buna problemsiz nail olmaq olar:
Dairə:hover ( sərhəd radiusu: 70%; )
8. Fırlanma
Əyləncəli animasiya seçimi elementi müəyyən sayda dərəcə fırlatmaqdır. Bunu etmək üçün yenidən transform xüsusiyyətinə ehtiyacımız olacaq, lakin fərqli bir dəyərlə - rotateZ(20deg) . Bu parametrlərlə blok Z oxuna nisbətən saat əqrəbi istiqamətində 20 dərəcə fırlanacaq:
Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )
9. 3D kölgə
Dizaynerlərin fikirləri bu təsirin düz dizaynda uyğun olub-olmaması ilə bağlı fərqlidir. Bununla belə, bu CSS3 animasiyası kifayət qədər orijinaldır və veb səhifələrdə də istifadə olunur. Artıq tanış qutu-kölgə xüsusiyyətlərindən istifadə edərək üçölçülü effekt əldə edəcəyik (çox qatlı kölgə yaradacaq) və translateX(-7px) parametri ilə transformasiya edəcəyik (blokun üfüqi olaraq sola 7 piksel sürüşməsini təmin edəcək) ):
Üç: hover ( qutu-kölgə: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 6px #53ea93, 7px 7px #:Xte-form 7px; -7px); çevirmək: translateX(-7px )
Brauzer dəstəyi
Aşağıdakı brauzerlər hazırda keçid xüsusiyyətini dəstəkləyir:
| Masa üstü brauzerlər | |
|---|---|
| Internet Explorer | IE 10 və yuxarı versiyalar tərəfindən dəstəklənir |
| Chrome | 26-cı versiyadan dəstəklənir (25-ci versiya -webkit- prefiksi ilə işləyənə qədər) |
| Firefox | 16-cı versiyadan dəstəklənir (4-15-ci versiyalarda -moz- prefiksi ilə işləyir) |
| Opera | 12.1 versiyasından dəstəklənir |
| Safari | 6.1 versiyasından dəstəklənir (3.1-6 versiyalarında -webkit- prefiksi ilə işləyir) |
Bu nümunələrdə istifadə olunan qalan xüsusiyyətlər, məsələn, transform , box-shadow və s., həmçinin demək olar ki, bütün müasir brauzerlər tərəfindən dəstəklənir. Bununla belə, bu ideyaları layihələriniz üçün istifadə edəcəksinizsə, brauzerlər arası uyğunluğu iki dəfə yoxlamağı şiddətlə tövsiyə edirik.
Ümid edirik ki, bu CSS3 animasiya nümunələrini faydalı tapdınız. Sizə yaradıcılıq uğurları arzulayırıq!
Belə bir artımı təşkil etmək üçün mən iki üsul təklif edirəm. Hər ikisi təmizdir CSS, istifadə etmədən JavaScript. Birinci üsul, səhifənin qalan elementlərinə təsir etmədən, bu metodu nəyə tətbiq edəcəyinizdən asılı olaraq bloku və ya şəkli böyüdür. Qalanların üstündə böyüyür. Belə hamar bir artım təşkil etmək üçün sizə lazımdır:
1. Onun hansı element olacağını müəyyənləşdirin. Bizim vəziyyətimizdə bu, sinfi olan bir blok olacaq blok
2. Saytımızın html kodunda lazımi yerdə göstəririk
Stil faylında ona aşağıdakı parametrləri təyin edirik:
Blok( en:150px; hündürlük:150px; fon:#f30; displey: blok; qeyri-şəffaflıq: 1; -webkit-transform: miqyas(1,1); -webkit-keçid vaxtı-funksiya: asanlıq; -webkit -keçid müddəti: 550ms; -moz-transform: miqyas(1,1); -moz-keçid müddəti: 550ms; -webkit-keçid vaxtı-funksiyası: -webkit-keçid müddəti: 550ms; -moz-transform: miqyas (1.2,1.2): -moz-keçid müddəti: 550ms;
Bitmiş nəticəni yoxlaya bilərsiniz. Eni, Boy, fon və digər parametrləri istədiyiniz kimi təyin edin, əsas odur ki, parametrləri düzgün təyin edin. -çevirmək- artımın ölçüsünə cavabdehdir və sadəcə blokda ona toxunmaq lazım deyil, standart olaraq 1-dir - orijinal ölçü, lakin əmlakla : süslə onu istədiyiniz ölçüyə dəyişirik, hansı ölçüdə artım olacaq, bu halda 1.2.
Əlbəttə ki, onu əksinə dəyişə bilərsiniz, məsələn, sürüşərkən hamar bir azalmaya ehtiyacınız varsa, heç kim sizə bunu etməyi qadağan etməyəcək.
Növbəti əmlakdır -keçid, millisaniyələrdə animasiya sürətindən məsuldur. İstifadə etməsəniz, hər şey kəskin şəkildə artacaq və azalacaq. Bu nümunədə bu parametrin dəyəri belədir 550ms.
İkinci üsul birincidən bir qədər fərqlidir. Onun animasiyası və artması səhifənin digər bloklarına və elementlərinə təsir etməklə baş verir. Böyüdükdə, onları yanlara köçürdüyü görünür. Bununla belə, bu üsul da istifadə olunur və müəyyən bir problemi həll etmək üçün çoxlarına ehtiyac olacaq.
Beləliklə, hoverdə belə hamar bir böyütmə təşkil etmək üçün nə etməliyik?
1. Birinci misalda olduğu kimi, biz artıq sinfi olan bloku təyin edirik blok 2
2. Yenə biz onu lazımi yerdə göstəririk
Və ona üslub təyin edin:
Blok2( en: 150px; hündürlük: 150px; fon:#390; -webkit-keçid: hamısı 2s asan; -moz-keçid: hamısı 2s asan; -ms-keçid: hamısı 2s asan; -o-keçid: hamısı 2s asanlığı keçid: bütün 2s asan ) .block2:hover ( en: 200px; hündürlük: 200px; )
Bu halda, biz sadəcə olaraq blok ölçüsünü piksellə dəyişdiririk və xassə əlavə edirik -keçid, bu da artımı hamar edir. Birinci üsuldan fərqli olaraq biz animasiya vaxtını millisaniyələrlə deyil, saniyələrlə təyin edirik. Məsələn, bu 2 saniyədir. Bu sadə üsullarla skriptlərdən istifadə etmədən hamar bir artım edə bilərsiniz. Siz təmiz CSS ilə əldə edə bilərsiniz.
Brauzerlərin köhnə versiyaları nə istədiklərini başa düşməyə bilər, buna görə özünüz baxın. Şəxsən mən diqqət yetirmirəm və pis bir şeydən narahat deyiləm ki, bəlkə milyonda 1-i mənim saytımı qədim, zəif Internet Explorer-dən ziyarət edəcək və bir şey göstərilməyəcək. Belə istifadəçilər üçün zibildən imtina edib normal, insan brauzerinə keçməyin vaxtı çatdığına dair mesaj göstərirəm.
Hamısı budur, diqqətinizə görə təşəkkürlər. 🙂
Siçan kursorunu apararkən şəkli böyütməyin effekti çoxlarına məlumdur. Bəs necə edə bilərik ki, blok elementinin əsas məzmununu böyütmədən yalnız fon təsviri böyüdülsün?
Eni 340 piksel və hündürlüyü 230 piksel olan blok elementi yaradaq.
Bunun üçün üslubu müəyyən edək:
Vozm (
eni: 340px;
hündürlük: 230px;
float:sol;
daşqın: gizli;
}
Sola hizalayın - float:left. Arxa fon şəklinin blokumuzun ərazisindən kənara çıxmaması üçün daşqın xüsusiyyətini gizlədilmiş dəyərlə də təyin edirik.
Növbəti addım məzmunu blok elementimizə yerləşdirməkdir:
Mətn 1
Vozm p (
rəng:#da291c;
font-weight:qalın;
font ölçüsü: 16px;
xəttin hündürlüyü: 21px;
}
.vozm .red_bl (
eni: 30px;
hündürlük: 6px;
fon rəngi:#da291c;
}
Blok elementində paraqraflar üçün mətn rəngini təyin edin - #da291c dəyəri ilə rəng. Biz həmçinin bildiririk ki, mətn 16 piksel şrift ölçüsü və 21 piksel sətir hündürlüyü ilə qalın olacaq.
"red_bl" üslubu blok konteynerimizə gözəl üfüqi qırmızı element əlavə edəcək. Eni 30 pt, hündürlük 6 pt, rəng mətnlə eynidir.
Daxili blok üçün üslub əlavə edirik:
Vposf (
mövqe: qohum;
z indeksi: 9999;
sol: 45px;
yuxarı: 40px;
}
Daxili blokun nisbi mövqeyini daxili kənarları solda 45 bal və yuxarıda 40 nöqtə ilə göstəririk.
Arxa fon şəkli fon şəkli əlavə edin:
Bunun üçün üslub belə görünür:
Uşaq (
eni: 100%;
hündürlük: 100%;
fon mövqeyi: mərkəz;
fon ölçüsü: örtük;
-webkit-keçid: bütün .5s;
-moz-keçid: bütün .5s;
-o-keçid: hamısı .5s;
keçid: hamısı .5s;
}
Fərqli brauzerlər üçün keçid xüsusiyyəti hoverdə fon şəklinin artırılması effektinin 50 millisaniyə ərzində rəvan şəkildə baş verməsini təmin etmək üçün istifadə olunur. Genişliyi və hündürlüyü 100% təyin edin. Biz də mərkəzdə fon mövqeyini (fon-mövqe) təyin edirik və təsviri (fon ölçüsü) blokun eninə və hündürlüyünə uyğunlaşdırırıq.
Vozm:hover.child,
.vozm:fokus .uşaq (
-ms-transform: miqyas(1.2);
-moz-transform: miqyas(1.2);
-o-transform: miqyas (1.2);
çevirmək: miqyas (1.2);
}
Bunun üçün dəyər miqyası ilə transform xassəsindən istifadə edin. Biz onu orijinaldan 20% artırırıq.
Yaxşı, fonun özünü yükləyək:
Bg-1 (fon şəkli: url("/userf_fs/stati/fon_sh.jpg");margin-top: -59px;)
Arxa fon şəkli olan blok elementi mətnimizin altında olduğu üçün onu qaldırmaq lazımdır. Bunu etmək üçün, margin-top xüsusiyyəti üçün mənfi dəyərdən istifadə edin.
Beləliklə, html kodu belə görünür:
Mətn 1
Və css aşağıdakı kimidir:
Vozm (
eni: 340px;
hündürlük: 230px;
float:sol;
daşqın: gizli;
}
.uşaq(
eni: 100%;
hündürlük: 100%;
fon mövqeyi: mərkəz;
fon ölçüsü: örtük;
-webkit-keçid: bütün .5s;
-moz-keçid: bütün .5s;
-o-keçid: hamısı .5s;
keçid: hamısı .5s;
}
.vozm:hover .uşaq,
.vozm:fokus .uşaq (
-ms-transform: miqyas(1.2);
-moz-transform: miqyas(1.2);
-webkit-transform: miqyas(1.2);
-o-transform: miqyas (1.2);
çevirmək: miqyas (1.2);
}
.vozm p (
rəng:#da291c;
font-weight:qalın;
font ölçüsü: 16px;
xəttin hündürlüyü: 21px;
}
.vozm .red_bl (
eni: 30px;
hündürlük: 6px;
fon rəngi:#da291c;
}
..jpg");margin-top: -59px;)
.vposf(
mövqe: qohum;
z indeksi: 9999;
sol: 45px;
yuxarı: 40px;
}
Bir neçə blok elementini bir-birinə nisbətən yerləşdirsək, aşağıdakı təsviri alacağıq.
Beləliklə, istədiyimiz nəticəni əldə etdik.
Müasir veb saytlarda kifayət qədər ümumi bir təcrübə, bir şəkil ilə bir bloku rəvan böyütməkdir. Bunu CSS istifadə edərək necə edə bilərsiniz?
Hover CSS-də hamar şəkil böyütmə
Problemin həllini iki mərhələyə ayırırıq: html işarələmə və css üslubları. Əvvəlcə blokları içərisində şəkillərlə qeyd edək:
Bütün bloklara qutu sinfi təyin edildi. Onun mühüm xüsusiyyətlərindən biri daşqın olacaq: gizli, yəni blokdan kənara çıxan hər şeyi gizlət. Şəkli böyüdək? Bəli. Ancaq yalnız blok tərəfindən məhdudlaşdırılan hissə görünəcək.
Bunu sıraladıq. Üslubların təsvirinə keçək.
Qutu (
daşqın:gizli;
eni: 250px;
hündürlük: 250px;
}
Hər şey deyildiyi kimi - kvadrat bloklar, ölçüləri standarta bənzəyir, böyüdülməmiş şəkil, sonra da 250 ilə 250.
Overflow:hidden xassə, əvvəllər qeyd edildiyi kimi, böyüdükdə blokun hüdudlarından kənara çıxmağa imkan vermir.
Şəkillərlə əlaqəli xüsusiyyətlər:
Qutu img (
-moz-keçid: bütün 1s asan çıxış;
-o-keçid: bütün 1s asan çıxış;
-webkit-keçid: bütün 1s asan çıxış;
keçid: bütün 1s asan çıxış;
}
Qutu img: hover(
-webkit-transform: miqyas(1.2);
-moz-transform: miqyas(1.2);
-o-transform: miqyas (1.2);
çevirmək: miqyas (1.2);
}
Bunu CSS3 olmadan etmək mümkün deyil. Bütün müasir brauzerlər animasiyanı göstərəcək. Keçid və çevirmə parametrlərinə ehtiyacınız var. Animasiya vaxtını 1 saniyəyə (1s) təyin etdik. Artım 1,2 dəfə olacaq. Zövqünüzə uyğun dəyişə bilərsiniz.
İndi, məsələn, işləyin!
Əlbəttə ki, şəkilləri böyütməyin bir çox yolu var. Və əsasən skriptlərin və plaginlərin istifadəsi istifadə olunur. Mənim fikrimcə, bu cür üsullar çox sayda fotoşəkil və ya hər hansı bir şəkil olan resurs halında haqlıdır. Mənim blogum belə deyil. Və həmişə olduğu kimi, saytımda ən az vaxt, bilik və resurs xərcləmə yolunu izləyirəm.
Mən sizə heç bir skriptdən istifadə etmədən, ancaq html-dən istifadə etməklə veb-saytdakı şəkilləri böyütməyin bir yolunu təklif edirəm.
Veb saytdakı şəkli böyütməyin bu üsulu oxucuya şəkli tez görməyə imkan verəcək, çünki vebsaytınızın əlavə olaraq skript yükləməsinə ehtiyac olmayacaq.
Saytdakı şəklin böyüdülməsi
Metod 1 – kursoru hərəkət etdirərkən saytdakı şəkli böyüdün
Çox sadə, yaxşı, ən sadə yol, vicdanla. Şəkil xüsusiyyətlərinə aşağıdakı kodu əlavə etməlisiniz:
Onmouseover="this.style.width="Böyük şəkil eni px"" onmouseout="this.style.width="Kiçik şəkil eni px""
Siçan kursorunu üzərinə gətirdiyiniz zaman şəkil böyüyür.
Ümid edirəm ki, bütün bunların mətn redaktorunda edildiyini başa düşürsən.
Metod 2 – siçan düyməsini sıxmaqla saytdakı şəkli böyüdün
Metod oxşardır, sadəcə olaraq onmouseover-i onclick ilə əvəz etməlisiniz. Şəkil xüsusiyyətlərinə aşağıdakı kod əlavə olunur:
Style="width: "kiçik təsvirin eni dəyəri px; border:2px bərk qara;" onclick="this.style.width=lage image width px"" onmouseout="this.style.width="kiçik şəkil eni px""
Tamamilə belə görünəcək
Budur pişik şəklinin nəticəsi və kodu.
Siçanı tıkladığınız zaman şəkil orijinal şəklin ölçüsünə və ya göstərdiyiniz ölçüyə qədər böyüdülür. Ölçüsü azaltmaq, yəni şəkli orijinal ölçüsünə qaytarmaq üçün səhifənin istənilən yerinə klikləmək kifayətdir.
Ümid edirəm ki, saytdakı şəkilləri böyütmək üçün bu cür üsullardan istifadə etməkdə çətinlik çəkmədiniz - html istifadə edərək.
Ümumiyyətlə, mən inanıram ki, bir çox veb ustaları sadəcə olaraq hər hansı bir mühərrikdən istifadə etməklə məhdudlaşmır və öz saytlarında html kodlarından istifadə edirlər.
Həmçinin oxuyun:
2015-10-27T16:07:59+00:00 Ümid Skriptlər və kodlar saytdakı şəkli böyütmək, saytdakı şəkli böyütməkƏlbəttə ki, şəkilləri böyütməyin bir çox yolu var. Və əsasən skriptlərin və plaginlərin istifadəsi istifadə olunur. Mənim fikrimcə, bu cür üsullar çox sayda fotoşəkil və ya hər hansı bir şəkil olan resurs halında haqlıdır. Mənim blogum belə deyil. Və həmişə olduğu kimi, saytımda ən az vaxt, bilik və resurs xərcləmə yolunu izləyirəm. Sizə artırmağın bir yolunu təklif edirəm...
Nadejda Trofimova [email protected] Administrator Blog saytıSizi də maraqlandıra bilər:
Kateqoriya qeydlərinin əsas səhifədən və RSS-dən silinməsi
Biz saytın funksionallığını və görünüşünü təkmilləşdirməyə davam edirik. Biz əsas səhifədən və RSS-dən lazımsız yazıları silirik.
WordPress saytındakı çörək qırıntıları
Veb saytdakı çörək qırıntıları - bunlar nədir və onları necə etmək olar?
5 dəqiqə ərzində mətn kölgəsini necə etmək olar
Salam, bloqumun əziz oxucusu. Bu yazıda siz 5 dəqiqə ərzində css üslublarından və html kodundan istifadə edərək mətn kölgəsi yaratmağı öyrənəcəksiniz.
CSS kodundan istifadə edərək yükləmə düyməsini necə etmək olar
Salam, bloqumun əziz oxucusu. Düymələr mövzusunu davam etdirirəm. Bu məqalə css kodundan istifadə edərək yükləmə düyməsini necə etmək barədə danışacaq.
Veb sayt üçün aşağı düymələri necə düzəltmək olar
