Shubhasiz, eng yorqinlaridan biri 2012 yil tendentsiyalari rivojlantirish davom etmoqda CCS3, HTML5. Bugun biz misollarning katta va juda foydali sharhini taklif qilamiz " 20+: CSS3-da ijodiy va foydali darslar″ taklif qilingan SpeckyBoy. Barcha misollar yaratilgan JavaScriptsiz tozalang, taqdim etilgan darslarda demolar va tayyor fayllar Yuklab olish uchun CSS3.

Ishonchimiz komilki, ushbu usullar veb-ishlab chiquvchilar uchun foydali bo'ladi!

css3 darslar :

1. CSS3 foto galereyalari, slayderlar, tasvirlar bilan effektlar

1.1.CSS3 da slayder

Men bunga ishonmayman, lekin turli effektlarga ega bu slayder faqat CSS3 da yaratilgan, juda ta'sirli.

1.2. CSS3 yordamida slayder effekti bilan to'liq ekranli veb-sayt uchun fon

Veb-dizaynerlar uzoq vaqtdan beri sayt uchun turli fonlar bilan tajriba o'tkazishdi, ammo hozirgacha sof CSS bilan juda kam narsa qilish mumkin edi, siz JS dan foydalanishingiz kerak edi. Endi CSS3 sizga saytingiz fonini xohlaganingizcha qilish imkoniyatini beradi - siz katta, yuqori sifatli fotosurat bilan bitta fonga ega bo'lishingiz mumkin, turli effektlar bilan bir nechta fonni o'zgartirishingiz mumkin va fon ekranga qarab kengaytirilishi mumkin. parametrlari. Umuman olganda, ijodiy saytlar uchun ajoyib imkoniyat.

1.3. CSS3 da Lightbox

Ushbu qo'llanma yordamida siz sof CSS yordamida turli effektlarga ega Lightbox yaratishni o'rganishingiz mumkin.

1.4. CSS3 da tasvir xususiyatlari

Ushbu qo'llanmada CSS3 da tasvir xususiyatlarining yumaloq burchaklar, soyalar va boshqa effektlar kabi yangi funksiyalari namoyish etilgan.

1.5. CSS3 yordamida animatsion banner

1.6 CSS3 da yuklash paneli

1.7. CSS3 bilan 3D lenta

Namoyishni ko'ring yoki CSS3 kodli fayllarni yuklab oling →

2. CSS3 menyulari, navigatsiya va tugmalar

2.1. CSS3-dagi Apple.com menyusi

CSS3 da mashhur Apple.com menyusini yaratish bo'yicha qo'llanma.

2.2. CSS3 da animatsion gorizontal menyu

CSS3-da turli effektlar bilan animatsiya menyusini qanday yaratishni ko'rsatadigan oddiy qo'llanma.

2.3. CSS3 bilan jonlantirilgan vertikal menyu

2.4. CSS3 bilan animatsion tugmalar

Animatsiyalangan ijodiy tugmalarning 7 ta misolidan iborat ajoyib qo'llanma.

2.5. CSS3 yordamida tasvirlar bilan ijodiy animatsion menyu

Ushbu darsda keltirilgan 10 ta misol shunchaki ko'zni ochadi. Bunday murakkab ijodiy menyular ilgari faqat JS yordamida yaratilgan. Ta'sirli!

2.6. CSS3 bilan aylana navigatsiya effekti

Belgilangan navigatsiya elementi ustida tasvir bilan aylana shaklida o'tishda noodatiy effekt. Eslatma!

2.7. CSS3 da ochiladigan menyu

CSS3 da pastki darajalar bilan oddiy ochiladigan menyuni amalga oshirish bo'yicha qo'llanma.

2.8. Animatsion o'tishlar bilan CSS3 navigatsiyasi

3. CSS3 da turli effektlar

3.1. JQuerysiz CSS3 da animatsion maslahat

Veb-texnologiyalar va zamonaviy brauzerlarning rivojlanishi tufayli biz Javascriptdan foydalanmasdan ko'plab effektlarni yaratishimiz mumkin. Bu veb-ishlab chiquvchilar uchun hayotni ancha osonlashtirdi. Chunki endi biz Javascriptdan foydalanmasdan sof CSS yordamida effektlar yaratishimiz mumkin. Shuning uchun, ushbu maqolada men sizga sof CSS-dan foydalangan holda bannerlarni yaratish mumkinmi, buning uchun nima kerakligi, shuningdek, ushbu yondashuvning ijobiy va salbiy tomonlari haqida gapirib bermoqchiman.

CSS3 keng imkoniyatlarni taqdim etadi, faqat ulardan to'g'ri foydalanish kerak. Misol tariqasida, men "Pure CSS-dagi belgilar" o'tgan ishlarimga havolalar bermoqchiman:

Birinchidan, men CSS bannerlarimga misollar keltirmoqchiman. Siz ularni allaqachon saytda ko'rgan bo'lishingiz mumkin, lekin ular nima va qanday yaratilganligini ham bilmas edingiz.

Demo haqida: Har bir misol (banner) pastki qismida sekundlardagi davomiyligi, shuningdek, bannerni boshidan ko'rsatishni boshlaydigan "Yangilash" tugmasi mavjud.

Banner №1 - "Veb-sayt yaratish bo'yicha individual trening":

Men bu bannerni taxminan 2 kun davomida yaratdim. Nega shuncha uzoq? Chunki koordinatalarni qayta hisoblashda bannerni moslashtirish (uni rezina qilish uchun) biroz vaqt talab qildi. Hozirgi vaqtda uning o'lchami asosiy blokning kengligiga bog'liq (u CSS bannerini o'z ichiga oladi).

Men bu bannerni tom ma'noda 2-2,5 soatda yaratdim. Bu erda yaratish jarayonini sekinlashtirgan yagona narsa piktogramma tanlash edi. Chunki ular banner mavzusiga yaqin tanlanishi kerak edi.

Ushbu banner, shuningdek, u joylashgan blokli idishning kengligiga qarab cho'ziladi. Uni yaratish uchun taxminan 1,5 soat vaqt ketdi.

Ushbu bannerlar juda chiroyli ko'rinadi, lekin bu juda oddiymi? Keling, bannerlarni yaratishning ushbu usulining ijobiy va salbiy tomonlarini ko'rib chiqaylik.

CSS bannerlarining afzalliklari va kamchiliklari:

CSS bannerini qanday yaratish mumkin?

1 fikr

Birinchidan, siz banner qanday animatsiyaga ega bo'lishi kerakligini aniq bilishingiz kerak (nima, qayerdan va qayerdan harakatlanishi va qaerda paydo bo'lishi kerak). Siz A4 varag'ini olib, har bir element qaerga harakatlanishini va bannerda nima bo'lishi kerakligini chizishingiz mumkin.

Axir, siz banner yaratishni boshlay olmaysiz, agar u nima bo'lishi kerakligini va qanday ishlashini bilmasangiz.

2 HTML tuzilishi

Keyingi qadam, elementlarni ko'chirish (va ular uchun animatsiya yaratish) uchun HTML belgilarini yaratishdir. Ya'ni, o'ngdan yoki chapdan siljiydigan va keyin animatsiya tugaydigan bitta rasm bilan hamma narsani qila olmaysiz.

Odatda bitta umumiy blok mavjud bo'lib, unda qolganlari joylashgan. Va bu umumiy blokda biz elementlarni kerakli darajada boshqarishimiz mumkin.

3 CSS animatsiyasi

Yakuniy qadam bloklar uchun animatsiyalarni yaratish, shuningdek, ular uchun uslublarni yozishdir, chunki animatsiyaning ba'zi qismlari sukut bo'yicha yashiringan.

O'z banneringizni yaratish uchun siz CSS va HTML asoslarini yaxshi bilishingiz kerak.

Ushbu qo'llanma bilan asosiy CSS animatsiyasini o'rganing -.

Xulosa

Barcha zamonaviy brauzerlar CSS3 xususiyatlarini qo'llab-quvvatlaydi, ya'ni bannerlar bunday brauzerlarda to'g'ri ko'rsatiladi. Ammo JS plaginlari yordamida eski brauzerlar uchun CSS bannerlarini yaratishingiz mumkin. CSS animatsiyasi asoslarini o'rganish orqali siz banner yaratish jarayonini tushunasiz va tez orada birinchi sof CSS banneringizni yaratasiz! 😉

CSS3 yordamida reklama bannerini yarataylik. Hozirda faqat CSS3 animatsiyalari to'liq qo'llab-quvvatlanadi Firefox brauzerlari va WebKit. Ammo bannerni boshqa brauzerlarda ishlashini ta'minlash juda oson. Biroq, eng so'nggi CSS texnikasi bilan tajriba o'tkazishda hamma joyda (ayniqsa IE 7 va undan yuqori versiyalarda) ajoyib ishlashni kutmang.

Eslatma: Sahifada bo'sh joyni tejash uchun barcha brauzer ishlab chiqaruvchisi prefikslari olib tashlandi. Kodni manbalarda ko'ring.

HTML belgilash

Birinchidan, HTML-dagi bannerning tuzilishini ko'rib chiqamiz. Ushbu bosqichda biz animatsiya qanday ishlashini tasavvur qilishimiz kerak:

Belgilash tuzilishini chuqurroq tushunish uchun keling, qayiqqa e'tibor qarataylik:

Qayiqda uchta animatsiya paydo bo'ladi:

Qayiq chap tomonda sirpanib ketmoqda. Tartibsiz roʻyxat (guruh) uchun amal qiladi.

Suv ustida tebranayotgan qayiqni taqlid qilish. Roʻyxat bandiga (qayiq) amal qiladi.

Savol belgisining ko'rinishi. Div elementi (savol belgisi) uchun amal qiladi.

Agar siz demo sahifasiga qarasangiz, ro'yxat elementi (qayiq) uchun animatsiya uning ichidagi div elementiga ham ta'sir qilishini ko'rishingiz mumkin (Savol belgisi). Bundan tashqari, tartibsiz ro'yxat uchun "tashqariga o'tish" animatsiyasi ro'yxat elementida ishlaydi (qayiq va savol belgisi).

Shunday qilib, biz bolalar elementlari o'z harakatlariga qo'shimcha ravishda ota-onalardan animatsiyalarni oladilar, degan xulosaga kelishimiz mumkin. Endi qolgan narsa ota-ona/bola tuzilmalarini ro'yxatga olishdir.

CSS

Animatsiya yaratilishini tahlil qilishni boshlashdan oldin, siz ta'minlashingiz kerak orqaga qarab mos keladi eski brauzerlar bilan.

Orqaga moslik

Biz CSS animatsiyalari umuman mavjud bo'lmagandek belgilashni shunchaki uslublash orqali orqaga qarab muvofiqlikni ta'minlaymiz. Agar kimdir sahifani eski brauzerda ko'rsa, ular bo'sh joyni emas, balki oddiy statik tasvirni ko'radi.

Masalan: CSS-dan foydalansangiz nima bo'ladi? Quyidagiga o'xshash muammolar paydo bo'ladi:

/* NOGIR! */ @keyframe bizning animatsiyamiz ( 0% (shaffoflik: 0;) 100% (shaffoflik: 1;) ) div ( noaniqlik: 0; /* Bu div sukut bo'yicha yashiringan - ha! */ animatsiya: bizning -fade-in-animation 1s 1 )

Brauzer animatsiyalarni qo'llab-quvvatlamasa, div elementi foydalanuvchi uchun ko'rinmas qoladi.

Va biz eski brauzerlar bilan orqaga qarab muvofiqlikni shunday ta'minlaymiz:

/* TRUE */ @keyframe bizning animatsiyamiz ( 0% (shaffoflik: 0;) 100% (shaffoflik: 1;) ) div ( shaffoflik: 1; /* Bu div sukut bo‘yicha ko‘rinadi */ animatsiya: bizning -fade-in-animation 1s 1 )

Endi animatsiya boshlanmasa ham div elementi ko'rsatiladi. Va ichida zamonaviy brauzerlar Animatsiya paytida birinchi navbatda div yashirin bo'ladi.

Buzilish

Endi biz orqaga qarab muvofiqlikni qanday ta'minlashni bilamiz (bu haqiqiy loyihalar bilan ishlashda muammolardan qochishga yordam beradi). Bizning CSS kodimiz bazasini yaratish vaqti keldi.

Siz 3 nuqtani yodda tutishingiz kerak:

Banner turli saytlarda qo'llanilishi sababli, biz qo'limizdan kelganini qilamiz CSS selektorlari maxsus. Ularning barchasi #ad-1 identifikatoridan boshlanadi. Shunday qilib, biz kodimiz va sayt kodi o'rtasidagi o'xshashlikni oldini olishga harakat qilamiz.

Biz animatsiya kechikishini ataylab e'tiborsiz qoldirayapmiz o'rnatishlarda. Agar siz elementlarning standart ko'rinishi bilan uslublarni o'rnatishda animatsiya kechikishidan foydalansangiz, animatsiya tugagandan so'ng tasvir qismlarining to'satdan yo'qolishi yoki paydo bo'lishi tufayli banner tuzilishi buziladi. Animatsiyaning kechikishi kadrlarning davomiyligi va sozlamalari bilan taqlid qilinadi.

Iloji bo'lsa Biz bir nechta elementlar uchun bitta animatsiyadan foydalanamiz. Shunday qilib, biz vaqtni tejaymiz va kod hajmini kamaytiramiz.

Shunday qilib, keling, bannerimiz uchun asos yarataylik. Keling, ichki elementlarni to'g'ri joylashtirish uchun unga nisbatan joylashishni o'rnatamiz. Shuningdek, element doirasidan tashqaridagi hamma narsani yashiradi:

#ad-1 (kengligi: 720px; balandlik: 300px; suzuvchi: chap; hoshiya: 40px avtomatik 0; fon tasviri: url(../images/ad-1/background.png); fon joylashuvi: markaz; fon -takrorlash: takrorlashsiz: yashirin nisbiy quti-soya: 0px 0px 6px #000;

Keyin biz matn va kiritish maydonlari uchun uslublarni o'rnatamiz. Tegishli animatsiyalarni chaqiring. Shuningdek, ular bir-biriga mos kelmasligi uchun harakatlanuvchi qismlar uchun kontentning eng yuqori z indeksiga ega ekanligiga ishonch hosil qilishingiz kerak:

#ad-1 #content (kengligi: 325px; float: oʻng; hoshiya: 40px; matnni tekislash: markaz; z-indeks: 4; joylashuv: nisbiy; toʻldirish: koʻrinadigan; ) #ad-1 h2 (shrift-family: "Alfa Slab One", cursive: #137dd5; kechikish */ ) #ad-1 h3 (shrift oilasi: "Boogaloo", kursiv; rang: #202224; shrift hajmi: 31px; chiziq balandligi: 31px; matn soyasi: 0px 0px 4px #fff; animatsiya: kechiktirilgan -fade-animation 10s 1 ease-in-out; /* simulyatsiya qilingan kechikish bilan h3 ko'rinishi */ ) #ad-1 formasi (chegara: 30px 0 0 6px; pozitsiya: nisbiy; animatsiya: forma-animatsiya 12s 1 oson kirish -out; /* Simulyatsiya qilingan kechikish bilan elektron pochta manzilini kiritish uchun formani siljitish */ ) #ad-1 #email (kenglik: 158px; balandlik: 48px; float: chap; toʻldirish: 0 20px; shrift oʻlchami: 16px; font-family: "Lucida Grande", sans-serif matn-soya: 1px 1px 0px #a2917d chegara-pastki-chap-radius: 5px;

chegara: 1px qattiq #a2917d;

#ad-1 ul#water( /* Agar sizga suv uchun boshqa animatsiya kerak boʻlsa, uni shu yerda qoʻshishingiz mumkin */ ) #ad-1 li#water-back (kengligi: 1200px; balandlik: 84px; fon tasviri: url() .. /images/ad-1/water-back.png); #ad-1 li#water-front (kengligi: 1200px; balandlik: 158px; fon-tasvir: url(../images/ad-1/water-front .png); fon-takrorlash: z-index: 3; pastki: -70px animatsiya: suv-front-animatsiya 2s.

Keling, qayiq va uning elementlari uchun uslublarni o'rnatamiz. Biz mos keladigan animatsiyalarni ham chaqiramiz:

#ad-1 ul#boat (kenglik: 249px; balandlik: 215px; z-indeks: 2; pozitsiya: mutlaq; pastki: 25px; chap: 20px; toʻlib-toshish: koʻrinadigan; animatsiya: qayiqda animatsiya 3s 1 ta qulaylik ; /* Reklama boshlanganda guruhni siljitadi */ ) #ad-1 ul#boat li ( kengligi: 249px; balandlik: 215px; fon-rasm: url(../images/ad-1/boat.png); pozitsiyasi: mutlaq: 0px to'ldirilishi: animatsiya: boat-animation 2s infinite in-out - suvda allaqachon ishlatilgan animatsiyaga o'xshash; ad-1 #savol belgisi (kenglik: 24px; balandlik: 50px; fon tasviri: url(../images/ad-1/question-mark.png); pozitsiya: mutlaq; oʻng: 34px; tepa: -30px animatsiya: kechiktirilgan-fade-animatsiya 4s 1 oson-in-out /* so'roq belgisida */ )

Keling, bulutlar uchun uslublarni yarataylik. Ular uchun biz cheksiz harakat effekti bilan animatsiyadan foydalanamiz. Rasm g'oyaning mohiyatini ko'rsatadi:

Va bu erda CSS kodi:

#ad-1 #bulutlar (pozitsiya: mutlaq; yuqori: 0px; z-indeks: 0; animatsiya: bulut-animatsiya 30s cheksiz chiziqli; /* Bulutlarni chapga aylantiring, qayta oʻrnating va */ ni takrorlang) #ad-1 # bulut guruhi -1 (kenglik:720px; joylashuv: mutlaq; chap:0px; ) #ad-1 #bulut-guruhi-2 (kenglik: 720px; joy: mutlaq; chap: 720px; ) #ad-1 .cloud- 1 (kenglik: 172px; balandlik: 121px; url(../images/ad-1/cloud-1.png); pozitsiyasi: mutlaq tepa: 40px; (kenglik: 121px; balandlik: 75px; fon tasviri: url( ../images/ad-1/cloud-2.png); mutlaq; yuqori: -25px; : url(../images/ad-1/cloud-3.png: mutlaq: 530px;

Animatsiyalar

Eslatma: Shu nuqtadan boshlab, aslida hech narsa jonlantirilmaydi. Agar siz hozir bizning bannerimizga qarasangiz, statik tasvirni ko'rasiz. Bu erda animatsiyalar yaratiladi va yuqoridagi kodda chaqiriladi.

Keling, go'zal statik rasmimizga jon beraylik:

/* Simulyatsiya qilingan kechikish animatsiyasi bir nechta elementlarni ko'rsatish uchun ishlatiladi. Kechikish simulyatsiyasi animatsiyaning 80% davom etishi bilan jarayonni boshlash orqali amalga oshiriladi (va darhol emas). Shu tarzda siz har qanday kechikishni simulyatsiya qilishingiz mumkin: */ @keyframes delayed-fade-animation ( 0% (shaffoflik: 0;) 80% (shaffoflik: 0;) 100% (shaffoflik: 1;) ) /* Shaklni ko‘rsatish uchun animatsiya elektron pochta manzili va tugma bilan. Kechikishni taqlid qilish ham ishlatiladi */ @keyframes forma-animatsiya ( 0% (shaffoflik: 0; o'ng: -400px;) 90% (shaffoflik: 0; o'ng: -400px;) 95% (shaffoflik: 0,5; o'ng: 20px ;) 100% (shaffoflik: 1; o‘ngda: 0px;) ) /* Ushbu animatsiya videoning boshida qayiqni ekrandan olib tashlash uchun ishlatiladi: */ @keyframes boat-in-animation ( 0% (chapda: -200px;) 100% (chapda : 20px;) ) /* Bulutlar uchun animatsiya. Bulutlarning birinchi guruhi markazdan, ikkinchisi esa ekranning o'ng tomonida harakatlana boshlaydi. Birinchi guruh asta-sekin ekrandan chiqariladi, ikkinchisi esa o'ng tomonda paydo bo'ladi. Chap guruh to'liq yashirilgandan so'ng, bulutlar juda tez dastlabki holatiga qaytadi: */ @keyframes bulutli animatsiya ( 0% (chapda: 0px;) 99,9999% (chapda: -720px;) 100% (chapda: 0px; ) ) / * Oxirgi uchta animatsiya deyarli bir xil - farq elementlarning joylashuvida. Ular okean to‘lqinlarining chayqalishini simulyatsiya qiladi: */ @keyframes qayiq-animatsiyasi ( 0% (pastki: 0px; chap: 0px;) 25% (pastki: -2px; chap: -2px;) 70% (pastki: 2px; chap : - 4px;) 100% (pastki: -1px; chap: 0px;) ) @keyframes suv orqa animatsiyasi ( 0% (pastki: 10px; chap: -20px;) 25% (pastki: 8px; chap: - 22px; ) 70% (pastki: 12px; chap: -24px;) 100% (pastki: 9px; chap: -20px;) ) @keyframes water-front-animation ( 0% (pastki: -70px; chap: -30px) ;) 25% (pastki: -68px; chap: -32px;) 70% (pastki: -72px; chap: -34px;) 100% (pastki: -69px; chap: -30px;) )

Xulosa

Ushbu darsda biz bir nechta asosiy tushunchalarni bilib oldik:

1. Voris elementlari o'z animatsiyalaridan tashqari ota-onalarning animatsiyalarini ham oladi.
2. Banner yaratishda mavjud CSS loyihasi bilan kodning bir-biriga mos kelishiga yo'l qo'ymaslik uchun noyob identifikatordan foydalanishga harakat qilishingiz kerak.
3. Elementlarning joylashuvi va uslubi orqaga qarab muvofiqligini ta'minlash uchun animatsiya mavjud bo'lmagandek tanlanishi kerak.
4. Agar iloji bo'lsa, bir nechta elementlar uchun bitta animatsiyadan foydalanishingiz kerak.

Bugun biz CSS3 animatsiyasi yordamida banner yaratmoqchimiz.

Hozirda faqat Firefox va WebKit brauzerlari CSS animatsiyalarini qo'llab-quvvatlaydi, ammo biz bu bannerlarni boshqa brauzerlarda (men ularni 18-asr brauzerlari deb atayman) qanday qilib ishlashini ko'rib chiqamiz. Biroq, zamonaviy CSS texnologiyalari bilan tajriba o'tkazishda barcha brauzerlarda (ayniqsa, IE 7 va undan pastroq) katta qo'llab-quvvatlashni kutmasligingiz kerak.

Shunday qilib, keling, jonlantirilgan bannerlar yarataylik!

Esda tuting: Joyni tejash uchun barcha brauzer prefikslari olib tashlandi. sm. manba fayllari barcha CSS kodlarini ko'rish uchun. Agar siz CSS animatsiyalari bilan tanish bo'lmasangiz, tavsiya qilamanBirinchidanbuni o'qing.

HTML belgilash

Birinchidan, HTML yordamida banner strukturasini yaratamiz. Shu nuqtada biz animatsiyamiz qanday ishlashini istashimiz haqida o'ylab ko'rishimiz kerak - bu bizning belgilashimiz tuzilishidagi bolalar va ota-onalarga qanday ta'sir qiladi (buni quyida tushuntiraman):