Tasvir ustiga sichqonchani olib kelganda CSS effekti. Biz CSS3 yordamida original hover effektlarini yaratamiz Htmldagi turli fonlarning effekti

| 18.02.2016

CSS3 UI dizaynerlari uchun cheksiz imkoniyatlarni ochib beradi va asosiy afzalligi shundaki, amalda har qanday g‘oyani JavaScript-ga murojaat qilmasdan osongina amalga oshirish va real hayotda amalga oshirish mumkin.

Oddiy so'zlar bosh sahifani jonlantirishi va undan foydalanuvchilar uchun foydalanishi mumkinligi ajablanarli. CSS3 ga o'ting, masalan, kursorni kursor ustiga olib borganingizda, elementni qanday qilib o'zgartirish va o'zgartirishga ruxsat berishingiz mumkinligini bilib oling. Quyida mavjud bo'lgan to'qqizta CSS3 animatsion ilovalari saytda injiqlik muhitini yaratishga yordam beradi, shuningdek, chiroyli silliq o'tishlar bilan veb-saytning qiziqarli ko'rinishini yaxshilaydi.

Batafsil ma'lumot olish uchun siz fayllar arxivini yuklab olishingiz mumkin.

Barcha effektlar quvvat almashinuvi yordamida ishlaydi. o'tish- "O'tish", "qayta yaratish") va psevdo-sinf: sichqonchani yangi kursor ustiga olib kelganda elementning uslubini ko'rsatadigan hover (bizning yordamchimizda). Ilovalarimiz uchun biz 500x309 piksel o'lchamdagi div blokidan foydalandik, chiqish fon rangi #6d6d6d edi va bir bosqichdan ikkinchisiga o'tish 0,3 soniyani oldi.

Tana > div (kenglik: 500px; balandlik: 309px; fon: #6d6d6d; -webkit-o'tish: hammasi 0,3 s oson;; -moz-o'tish: hammasi 0,3 s qulaylik;; -o-o'tish: hammasi 0,3 s qulaylik; o'tish : hammasi 0,3 s oson)

1. Kursorni kursorga olib, rangni o'zgartiring

Agar bunday ta'sirni amalga oshirish qo'shiq RGB qiymatlarining matematik hisob-kitoblari bilan ko'p ishlashni talab qilsa. Endi siz CSS uslubini yozishingiz kerak, unda siz selektorga psevdo-klass qo'shishingiz kerak: kursorni kursor ustiga olib borganingizda chiqish rangini silliq (0,3 soniyada) fon bilan almashtiradigan fon rangini o'rnating. blok:

Rang: kursor (fon: #53ea93; )

2. Ramkaning tashqi ko'rinishi

Eng aniq o'zgarish - bu sichqonchani sichqonchaga olib borganida silliq paydo bo'ladigan ichki ramka. Turli tugmalarni qulayroq qilish uchun yaxshi. Ushbu effektga erishish uchun quyidagi psevdo-sinfdan foydalaning: hover va inset parametri bilan quti soyasining kuchi (element o'rtasining soyasini o'rnatadi). Bundan tashqari, siz soyani (bizning soyamizda 23px) bir xil rangga o'rnatishingiz kerak:

Chegara: kursorni ko'tarish (quti-soya: 0 0 0 23px #53ea93; )

3. Belanchak

CSS animatsiyasi berilgan - aybdor, chunki bu erda o'tish kuchi ishlatilmaydi. Buning o'rniga bizga ta'sir qildi:

@keyframes - kvadratma-kadr CSS animatsiyasini yaratish uchun asosiy ko'rsatma, bu sizga shunga o'xshash ishlash imkonini beradi. Storyboarding va asosiy fikrlar ro'yxati bilan animatsiyani tavsiflash;
animatsiya va animatsiya-iteratsiya-hisoblash - animatsiya parametrlarini (shirinlik va suyuqlik) va tsikllar sonini (takrorlash) o'rnatish uchun quvvat. Ba'zan takrorlang 1.

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(9px); transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px); transform: translateX(3px) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: 30%) ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform : translateX(6px); ) 50% ( -webkit- transform: translateX(-6px); transform: translateX(-6px); 65% (-webkit-transform: translateX(3px); transform: translateX(3px); ) 100% (-webkit-transform: translateX(0) ; transform: translateX(0 ) .swing:hover ( -webkit-animation: swing 0,6s ease; animation: swing 0,6s easy; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 ; )

4. Zgasannya

Silliq yo'q bo'lib ketish ta'siri, mohiyatiga ko'ra, elementning tiniqligining normal o'zgarishidir. Animatsiya ikki bosqichda yaratiladi: 1-darajali ko'rinishni o'rnatish kerak - keyin ko'rinish bo'lmaydi, shundan so'ng sichqonchani bosganingizda ushbu qiymatlarni kiriting - 0,6:

Fade ( shaffoflik: 1; ) .fade:hover ( shaffoflik: 0,6; )

Eng yaxshi natijaga erishish uchun qiymatlarni joylarda o'zgartiring:

5. Zbilshenya

Kursor o'rnatilganda blokni kattalashtirish uchun biz tezda transformdan foydalanamiz va qiymatni scale(1.2) ga o'rnatamiz. Bunday holda, uning nisbatlarini tejash orqali blok 20 yuzga ko'payadi:

Grow: hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. O'zgartirish

Elementni o'zgartirish uni kattalashtirish kabi oddiy. Beshinchi xatboshida o'lchovni oshirish uchun biz 1 dan katta qiymatni kiritishimiz kerak edi, keyin blokni o'zgartirish uchun biz birdan kichik qiymatni kiritamiz, masalan, shkala(0,7). Endi, sichqonchani sichqonchaning ustiga olib borganingizda, blok o'lchamining 30 yuzdan bir qismiga mutanosib ravishda o'zgaradi:

Shrink: hover ( -webkit-transform: scale(0,7); -ms-transform: scale(0,7); transform: scale(0,7); )

7. Koloniyadagi transformatsiya

Eng ommabop animatsiyalardan biri bu toʻgʻri chiziqli element boʻlib, kursorni kursor bilan olib kelganda aylanaga aylanadi. CSS chegara radiusining qo'shimcha quvvati uchun vikorista bilan teng: hover va o'tish, buni muammosiz amalga oshirish mumkin:

Doira: kursor (chegara radiusi: 70%; )

8. Obertannya

Animatsiyaning amaliy versiyasi elementni bir necha darajaga aylantirishdir. Buning uchun bizga yana transformatsiya kuchi kerak, shuningdek, boshqa qiymatlar bilan - rotateZ(20deg). Ushbu parametrlar bilan blok Z o'qi bo'ylab yil o'qidan 20 daraja orqaga buriladi:

Aylantirish: hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )

9. 3D soya

Dizaynerlarning g'oyalari tekis dizaynning aniq ta'sirida farqlanadi. Bundan kam emas, bu CSS3 animatsiyasi juda original va veb-sahifalarda ham mashhur. Box-shadow-ning allaqachon tanish bo'lgan kuchlaridan foydalangan holda ahamiyatsiz effektga erishing (boy soya yaratish uchun) va translateX(-7px) parametri bilan o'zgartiring (blok gorizontal ravishda chapga 7 pikselga siljiganligini ta'minlash uchun):

Threed: hover (box-soya: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px - 6px transform: translateX: translateX( -7px); 7px);

Brauzerni qo'llab-quvvatlash

Bugungi kunga kelib, quvvat almashinuvi quyidagi brauzerlar tomonidan qo'llab-quvvatlanadi:

Ish stoli brauzerlari
Internet Explorer	IE 10 va undan yuqori versiyalar tomonidan qo'llab-quvvatlanadi
Chrome	26-versiya bilan qo'llab-quvvatlanadi (25-versiyagacha -webkit- prefiksi bilan qo'llab-quvvatlanadi)
Firefox	16-versiya bilan qo'llab-quvvatlanadi (4-15-versiyalar -moz- prefiksidan foydalanadi)
Opera	12.1 versiyasi bilan qo'llab-quvvatlanadi
Safari	6.1 versiyasi bilan qo'llab-quvvatlanadi (3.1-6 versiyalari -webkit- prefiksidan foydalanadi)

Ushbu ilovalardagi transform, box-shadow va boshqalar kabi boshqa xususiyatlar va o'zgarishlar ham ko'pchilik joriy brauzerlar tomonidan qo'llab-quvvatlanadi. Biroq, agar siz ushbu g'oyalarni loyihalaringiz uchun ishlatmoqchi bo'lsangiz, brauzerlarning o'zaro ishlashini yana bir bor tekshirishingizni tavsiya qilamiz.

Ishonchimiz komilki, siz ushbu CSS3 animatsiya ilovalarini foydali deb topasiz. Sizga ijodiy muvaffaqiyatlar tilaymiz!

Hover-effektlar - o'rganish uchun mavzuni yakunlang. Hatto ularning amalga oshirilishi saytingizni yanada dinamik va jonli qilishi mumkin. Bugun biz tasvirlar bilan ishlash uchun ba'zi effektlarni ko'rib chiqamiz. Xuddi shu narsa o'yindan o'rganishingiz mumkin bo'lgan HTML va CSS kodlariga ham tegishli.

Zbilshennya

Yangi boshlanuvchilar uchun, agar foydalanuvchi kursorni tasvir ustiga olib kelsa, fotosurat kattalashib ketishi, lekin uning kordonlari ichida yo'qolib qolishi muhim.

Eksa HTML-kod:

"http://lorempixel.com/400/400/people/9" alt="portret" > !}!}

Iltimos, rasmdagi kabi rasm 400x400 piksel o'lchamda ekanligini unutmang. Endi hayron bo'laylik CSS.

/*GROW*/ .grow img (balandlik : 300px ; kenglik : 300px ; -webkit-o'tish: barcha 1s oson; -moz-o'tish: barcha 1s oson; -o-o'tish: barcha 1s oson; -ms-o'tish: 1s osonlik bilan o'tish: barcha 1s osonlik ) .grow img:hover ( width : 400px ; height : 400px ; )

Biz dastlab hayvonot bog'i tasvirining o'lchamini 300 pikselga o'rnatdik, keyin esa foydalanuvchi kursorni uning ustiga olib borganida, u 400 pikselgacha oshadi. Bizda overflow - yashirin, bu bizga masshtablash effektini olib tashlash imkonini beradi.

Stisnennya

Ilgari biz kursorni sichqoncha ustiga olib kelganda tasvirlar qanday kattalashishini hayratda qoldirganmiz. Keling, burilish effektini ko'rib chiqaylik. Bu usul asosan bir xil, faqat bu safar siz o'lchamlarni 400px deb hisoblaysiz va kursorni olib borganingizda ularni 300 pikselga o'zgartirasiz.

"http://lorempixel.com/400/400/nightlife/4" alt="shahar" > !}!}

/*SHRINK*/ .shrink img (balandlik : 400px ; kenglik : 400px ; -webkit-o'tish: barcha 1s oson; -moz-o'tish: barcha 1s oson; -o-o'tish: barcha 1s oson; -all-trans 1s oson o'tish: barcha 1s oson ) .shrink img:hover ( width : 300px ; balandligi : 300px ; )

Yon panorama

Joriy effektda tasvirning o'lchami o'zgarmaydi, lekin bosilganda fotosurat uzoqlashadi. Bu ob'ektning kuchini oshirishning yaxshi usuli.

"http://lorempixel.com/600/300/sports/8" alt="kick" > !}!}

Bu erda biz kengligi 600px va balandligi atigi 300px bo'lgan vikory tasviridan foydalanamiz - biz fotosuratning gorizontal holatini o'zgartiramiz va biz effektlarni balandlikda muzlatishimiz shart emas.

/*SIDEPAN*/ .sidepan img (chap chekka: 0px; -webkit-o'tish: chegara 1s oson; -moz-o'tish: chegara 1s oson; -o-o'tish: chekka 1s qulaylik; -ms-o'tish: chekka 1s oson o'tish: margin 1s qulayligi ) .sidepan img:hover (chegara-chap: -200px ; )

Panorama effektini yaratish uchun biz o‘tgan safargidek tasvir o‘lchamini o‘zgartirmaymiz, aksincha, bir xil chetidan foydalanib, tasvirni chap tomonga joylashtiramiz. Agar siz rasmni o'ng tomonga siljitmoqchi bo'lsangiz, chekka-o'ngni tanlang.

Vertikal panorama

Effektni rokga etkazish uchun keling, ushbu effektni yana bir bor takrorlaymiz - bu vertikal panning yaratish uchun ham mos keladi.

"http://lorempixel.com/300/600/sports/5" alt = "climb" > !}!}

/*VERTPAN*/ .vertpan img (margin-top : 0px ; -webkit-o'tish: margin 1s osonlik; -moz-o'tish: margin 1s osonlik; -o-o-o'tish: margin 1s osonlik; o'tish: margin 1s osonlik; ) . vertpan img: hover (chegara tepasi: -200px; )

Kod deyarli oxirgi marta bo'lgani kabi, faqat hozir biz margin-chapni margin-top bilan almashtiramiz.

Transformatsiya

Darhol ta'sir dinamikdir.

Naxil

Keling, buni shunday qilamizki, kursorni tasvirlar ustiga olib borganingizda, siz kesilgan joyni ko'rasiz.

"http://lorempixel.com/300/300/transport/5" alt=" avtomobil" > !}!}

/*TILT*/ .tilt ( -webkit-o'tish: hammasi 0 .5s oson; -moz-o'tish: hammasi 0 .5s oson; -o-o'tish: hammasi 0 .5s oson; -ms-o'tish: hammasi 0 .5s ese; o'tish: hammasi 0 .5s oson ) .tilt :hover ( -webkit-transform: rotate(-10deg) ; -moz-transform: rotate(-10deg) ; -o-transform: rotate(-10deg) ; - ms-transform: aylantirish (-10deg) ; aylantirish: aylantirish (-10deg) ;

Ko'rib turganingizdek, bizga kerak bo'lgan narsa tasvirni o'n darajaga aylantirishdir. Bu juda samarali!

Kesishlarni yaxlitlash

Tasvirga ishora qilganingizda, u qoziqdan kvadratga aylanib, aylana boshlaydi.

"http://lorempixel.com/300/300/nature/5" alt="plyaj" > !}!}

/*MORPH*/ .morph ( -webkit-o'tish: hammasi 0 ,5s oson; -moz-o'tish: hammasi 0,5s oson; -o-o'tish: hammasi 0,5s oson; -ms-o'tish: hammasi 0,5s osonlik bilan o'tish: barcha 0 .5s osonlik ) .morph :hover (chegara-radius: 50 % ; -webkit-transform: aylantirish (360deg); -Moz-transform: aylantirish (360deg); -o-transform: aylantirish (360deg); -ms-transform: aylantirish (360deg); aylantirish: aylantirish (360deg); )

Bu yerda morf sinfi kiritiladi, u sichqoncha kursorini uning ustiga olib kelganda 360 gradusga aylana boshlaydi va chegara radiusi bosqichma-bosqich 50% ga o'zgartiriladi va keyin aylanaga aylanadi.

Diqqat

Yana bir usul - tasvirni yaxlitlash uchun chegara radiusidan foydalanish. Biroq, bu safar biz nafaqat chegara radiusini, balki boshqa narsani ham oshiramiz. Chegara qutisidan foydalanish tasvirning ma'lum bir qismiga qaratilgan effekt yaratadi.

"http://lorempixel.com/300/300/sports/1" alt="kriket" > !}!}

/*FOCUS*/ .focus ( -webkit-o'tish: barcha 1s oson; -moz-o'tish: barcha 1s oson; -o-o'tish: barcha 1s oson; -ms-o'tish: barcha 1s oson; o'tish: barcha 1s oson; ) .fokus: hover (chegara: 70px qattiq # 000 ; chegara radiusi: 50 % ; }

Biz chegarani 10px ga oldik va qora chegarani 70px ga oʻzgartirdik va radiusni 50% ga aylantirdik, bu biz old tomonda qildik.

Webkit filtri

Brauzerning maksimal ishlashini ta'minlash uchun bunday ilovalar WebKit prefiksidan foydalanmaydi. Bu maʼlumotlar endi Safari va Chrome brauzerlarida mavjud emas. Cheklovlardan qat'i nazar, Webkit filtrlari ajoyib effektlarga erishish uchun harakatlarni o'zgartirishga imkon beradi! Namoyish

Rosmittya

Biz zastosovuvatimemo birinchi ta'siri, oddiygina rosmitya hisoblanadi. Endi siz kodlarning keyingi kichik qatoriga kirishingiz mumkin.

Avvalo, mavzuni hali to'liq o'rganmagan yoki umuman o'rganmaganlar uchun men hover nima ekanligini qisqacha tushuntiraman. Har xil turdagi effektlar (taglavhalar, maslahatlar, silliq o'tishlar, o'zgartirish, aylantirish, ko'paytirish, siljish va boshqalar) sichqoncha kursori bilan veb-sayt elementlariga qo'llanilishi mumkin. Ular turli jQuery plaginlari yordamida yoki sof shaklda amalga oshirilishi mumkin.
Bugun men JavaScript kutubxonalarini ulamasdan CSS3 yordamida yaratilgan tasvirlar uchun original hover effektlarining katta to'plamini tayyorlayapman. Men sof CSS3-da hover effektlarini amalga oshirishning afzalliklari va kamchiliklari haqida gapirmayman, bu boshqa mavzu, men faqat misollarni ko'rib chiqaman va agar kerak bo'lsa, saytingizdagi o'xshashliklarni vikorize qiling. Barcha effektlar bir qarashda taqdim etiladi, jumladan, chiqish moslamalari bilan ko'rgazmali ko'rinish va hisobot hujjatlari. Qo'llanmalar ko'proq yoki kamroq burjua, lekin hamma narsa ko'proq yoki kamroq intuitiv ravishda tushuniladi.

Men ushbu ilovalarning barchasi faqat CSS3 quvvatini qo'llab-quvvatlaydigan joriy brauzerlarda to'g'ri ishlashiga hurmatingizni bildirmoqchiman.

Yashirin rasmni buzmaslik uchun, effektlar nomlarining mashina tarjimasi (barcha maqsad va maqsadlar uchun) tomonidan burilib qolmasdan, nashriyot tomonidan atalgan sarlavhalarning asl nusxalaridan mahrum bo'lish.

Miniatyuraga e'tibor qaratishda juda sezilarli effekt dizayndagi va boshqa qismlarda nozik chiziqlar paydo bo'lishi bilan tasvirlangan. Sarlavhalardan tortib rasmlarga qadar turli xil effektlar paydo bo'ladi, yumshoq va noaniq 3D transformatsiyasi va psevdoelementlarning silliq o'tishlari. Zamonaviy brauzerlarda kamroq ishlaydi.

Bootstrap 3 yordamida iHover sof CSS3-ga o'rnatilganda ajoyib effektlar to'plamiga ega. Scss CSS (fayl) dan ilhomlanib, osongina o'zgartiriladi. Modulli kod, butun faylni ishga kiritishning hojati yo'q. Bitta paketda 30 dan ortiq turli effektlar. Hamma narsa yaxshi hujjatlashtirilgan, effektlar Vikoristonda yanada sodda. Sizga kerak bo'lgan narsa HTML tartibini to'g'ri olish va ishlashdan oldin CSS faylini qo'shishdir.

Tasvir imzosi soatiga qarab bir qancha oddiy, ammo zamonaviy effektlarni yaratadi. G‘oya shundan iboratki, kursorni eskiz ustiga olib borganingizda sarlavha, muallifning ismi va havola tugmasi samarali tarzda paydo bo‘ladi. Muayyan effektlar uchun vizual 3D o'zgarishlar qo'llaniladi.

Juda oddiy o'tish effekti, hech qanday maxsus qo'ng'iroqlar va hushtaklarsiz, ramkadagi tasvir atrofida, kursorni ushlab turganda o'zgaruvchan fokusga aylanadi va bu hammasi.

CSS3 yordamida eskizlar uchun

Chakana sotuvchi o'z ishini qalqib chiquvchi izohlardan (taglavhalar) eskizlarga o'tish effektlarini tasvirlash uchun galereya sifatida joylashtiradi. Ta'kidlanishicha, uni joriy brauzerlar, jumladan IE 9+ ham qo'llab-quvvatlaydi. To'liq huquqli galereya, albatta, uni chaqirish qiyin, ammo imzolar paydo bo'lishining ta'siri to'liq.

Mukammal dumaloq eskizlar ustiga sichqonchani olib o'tishda salbiy ta'sirlarni yaratish uchun CSS qoidalarining asosiy to'plami. Paket 7 turdagi CSS3 o'tishlarini o'z ichiga oladi, jumladan, o'qitish va ishlab chiqish hujjatlari. Effektlar joriy brauzerlar tomonidan qo'llab-quvvatlanadi.

Kursni olib kelganda eskizlarni oʻrash

Sichqoncha kursorini ularning ustiga olib borganingizda dumaloq eskizlarni o'rashning oddiy effekti, taxminan xuddi shunday, siz mening blogimda, boshdagi yozuvlar e'lonlarida ko'rishingiz mumkin. U bir necha qatorli CSS kodlari bilan amalga oshiriladi.

So'zma-so'z tarjima qilish uchun: "Ko'rsatilganda jinsiy ta'sir." Juda shahvoniy narsa, agar sizda yirtqich tasavvurga ega bo'lmasangiz, unda siz buni sezmaysiz, ammo ta'sir o'z-o'zidan foydali va yangi odamga hurmatni oshiradi.

Ularga ishora qilganingizda ko'rsatiladigan besh xil effekt. Uch xildagi imzolar, turli darajadagi ko'rinishga ega pardalar va gorizontal harakatlar bilan o'rash.

4 Tasvir sarlavhalarining animatsion effektlarini ko'ring, jumladan CSS3 yordamida amalga oshirilgan. O'tish effektlari ko'rinishi bilan turli xil pozitsiyalar butunlay standartdir. Animatsiya qanday ishlashini tushunish uchun ilova qilingan hujjatlarni ko'rmasdan demo sahifaning chiqish kodiga qarang.

Imzolar, o'rash, ishlab chiqish, birlashtirish va boshqalar kabi turli effektlarga ega miniatyuralar galereya tarmog'iga qo'shildi. Manbadan olingan hujjatlar va tuzatishlar kam, ammo siz maxsus so'rov uchun murojaat qilishingiz mumkin.

Bu effekt alohida narsa emas, sichqonchani ko'targanda tasvirning yorqinligini o'zgartirish yoki hatto animatsiya elementini qo'shish. Chiqarish demosini o'qib, amalga oshirish tafsilotlarini o'zingiz aniqlab olishingiz kerak bo'ladi.

Tasvirlar uchun 10 ta hover effektlarining yana bir to'plami, hover, masshtablash, aylantirish, aylantirish, qorayish va hokazolarda miniatyuralarning turli ko'rinishlari.

Tasvir atrofidagi ramka animatsiyasining turli effektlari, u juda jozibali ko'rinadi va sozlash va wiki haqida hisobot mavjud.

CSS3-dagi asl hover-effektlar, ular kursorga olib borilganda eskiz taglavhalarining samarali ko'rinishi uchun mo'ljallangan. CSS qoidalari to'plami turli xil tasvirlar uchun moslashtirilishi mumkin bo'lgan 10 xil effektlarni o'z ichiga oladi. Effektlar haqiqatan ham ta'sir qiladi, ayniqsa CSS3 yordamisiz nima qilinishini tushunishga kelganda. Nima bo'lganini tushunishga yordam beradigan batafsil qo'llanma.

Maqsad har qanday yozuv uchun fon shakli bo'lgan va sichqonchani uning ustiga olib borganida boshqa shaklga aylanadigan SVG yaratishdir. Shu tarzda siz turli xil variantlarni yaratishingiz mumkin va misolda uch turdagi o'tish effektlari ko'rsatilgan. SVG dan foydalanishning afzalligi shundaki, biz asl konteyner hajmiga mos keladigan shakl hajmini o'zgartirishimiz mumkin.

Rozsuvni rasmlari

Ushbu effektning mohiyati shundaki, sarlavha paydo bo'lishi uchun tasvir yuqoriga va pastga ko'rsatiladi. Agar siz uslub parametrlari bilan shug'ullansangiz, menimcha, siz qandaydir yoqimli effektlarga erisha olasiz, lekin umuman olganda, hamma narsa juda oddiy ko'rinadi.

Ushbu effekt bilan hamma narsa sodda, rasmlarga sarlavhalar o'ng qo'lning yuqori qismida yoki pastki qismida ko'rinadi, sahifaning pastki qismida, chiziqlar qorong'i fonda paydo bo'ladi, hamma narsa CSS kuchi yordamida oddiygina qayta formatlanadi. .

Tasvirlanganidek, eskizlar qorong'i ko'rinishda taqdim etiladi, ular ustiga surilganda tasvirlar paydo bo'ladi va imzo ochiq fonda birlashadi.

Tasvir oldidagi sarlavha burchakdan ko'rinadi va rasmning butun maydoni bo'ylab diagonal ravishda kengayadi.

Tasvir miniatyuralaridan oldin imzolarni amalga oshirish uchun bir qator boshqa echimlar mavjud. Onlayn muharrirda siz parametrlar bilan tajriba o'tkazishingiz va kerakli natijalarga erishishingiz mumkin.

Eskizlar, turli xil ko'rinishlar va rasmlarga sarlavhalar dizayni ustida kursorni olib borishda chiroyli effektlar to'plami. Bir oz qorayishdan farqli o'laroq, nozik chiziqlar tushunarli ma'lumot bloklarini yaratadi.

Chimerik shakllar va effekt eskizlar ko'rsatilishidan oldin sarlavhalar paydo bo'lganda animatsiya effekti tufayli yaxshilanadi.

Faqat CSS3 va HTML5-dan foydalangan holda tasvirlarda hajmli taglavhalarni ko'rsatish uchun vizual slayd effektini yaratish misoli.

Rasmlarga 6 ta izoh

Qo'shimcha CSS3 ustiga olib borganingizda tasvirlar oldidan sarlavhalar paydo bo'lishining 6 ta varianti. Amalga oshirish va tuzatishdan eng foydali dars hafta oxiri uchun mavjud.

Nihoyat, men CSS3-dan foydalanib eskiz uchun birlashma sarlavhasini yaratishning eng oddiy usuli haqida o'ylay olmayman.

Men bu usul haqida oldingi darslarimning birida bilib oldim: .

Saytdagi robotga imkon qadar tezroq xabar yubormoqchimisiz? Endi bu butunlay mumkin! Ushbu oddiy sabablarga ko'ra, TemplateMonster bozorida yangi bo'lim paydo bo'ldi. To'plam yangilanadi, ammo endi siz onlayn loyihangizga nima mos kelishini bilib olishingiz mumkin. Sizga kerak bo'lgan yagona narsa - ideal tayyor echimni tanlash va kerakli ma'lumotlarni taqdim etish orqali ishlash. Va unutmangki, matnni harf shabloniga qo'lda yozishingiz kerak.

Hurmat bilan Andrey

Avvalo, mavzuni hali to'liq o'rganmagan yoki umuman o'rganmaganlar uchun men bu nima ekanligini qisqacha tushuntiraman. Veb-sayt elementlariga sichqoncha kursorini olib kelganda har xil turdagi effektlar (taglavhalar, maslahatlar, silliq o‘tishlar, o‘zgartirish, aylantirish, yaxshilash, siljish va h.k.) qo‘llanilishi mumkin. Ushbu effektlar turli jQuery plaginlari yordamida yoki sof formatda amalga oshirilishi mumkin.
Bugun men JavaScript kutubxonalarini ulamasdan CSS3 yordamida yaratilgan tasvirlar uchun original hover effektlarining katta to'plamini tayyorlayapman. Men sof CSS3-da hover effektlarini amalga oshirishning afzalliklari va kamchiliklari haqida gapirmayman, bu boshqa mavzu, men faqat misollarni ko'rib chiqaman va agar kerak bo'lsa, saytingizdagi o'xshashliklarni vikorize qiling. Barcha effektlar bir qarashda taqdim etiladi, jumladan, chiqish moslamalari bilan ko'rgazmali ko'rinish va hisobot hujjatlari. Qo'llanmalar ko'proq yoki kamroq burjua, lekin hamma narsa ko'proq yoki kamroq intuitiv ravishda tushuniladi.

Men ushbu ilovalarning barchasi faqat CSS3 quvvatini qo'llab-quvvatlaydigan joriy brauzerlarda to'g'ri ishlashiga hurmatingizni bildirmoqchiman.

Juda oddiy o'tish effekti, hech qanday maxsus qo'ng'iroqlar va hushtaklarsiz, ramkadagi tasvir atrofida, kursorni ushlab turganda o'zgaruvchan fokusga aylanadi va bu hammasi.