6 Cool vaizdų antraštės su CSS3
CSS3 yra tikrai galingas. Tai buvo, kad mums reikalingi vaizdai ar „JavaScript“ kodelių krūva, kad galėtume atlikti paprastą perėjimo efektą. Šiandien mes galime tai padaryti tik su CSS3.
Šioje instrukcijoje parodysime, kaip sukurti vaizdų antraštes su įvairiais perėjimais tiesiog naudojant CSS3.
- Demo
- Atsisiųsti šaltinį
Naršyklės palaikymas
Ši antraštė labai priklausys nuo transformavimo ir perėjimo savybių, kurios yra palyginti naujos funkcijos, todėl būtų protinga atkreipti dėmesį į naršyklės palaikymą, reikalingą norint sklandžiai paleisti antraštę.
Toliau pateikiamos naršyklės, kurios jau palaiko transformaciją ir perėjimą:
- „Internet Explorer 10+“ (dar neišleistas)
- „Firefox 6“+
- „Chrome“ 13+
- Safari 3.2+
- Opera 11+
Dabar pradėkime pamoką.
HTML struktūra
Mes turime 6 vaizdus; kiekvienas vaizdas turi skirtingą antraštės stilių.
Paprasta antraštė
Visas antraštė
„Lorem ipsum dolor sit amet“, „consectetuer adipiscing elit“, „nežmoniškų„ nežmoniškų “ir„ nešvarių “dolerių„ magna aliquam erat volutpat “.
Fade Caption
„Lorem ipsum dolor sit amet“, „consectetuer adipiscing elit“, „nežmoniškų„ nežmoniškų “ir„ nešvarių “dolerių„ magna aliquam erat volutpat “.
Skaidrių antraštė
„Lorem ipsum dolor sit amet“, „consectetuer adipiscing elit“, „nežmoniškų„ nežmoniškų “ir„ nešvarių “dolerių„ magna aliquam erat volutpat “.
Tai yra rotacijos antraštė
„Lorem ipsum dolor sit amet“, „consectetuer adipiscing elit“, „nežmoniškų„ nežmoniškų “ir„ nešvarių “dolerių„ magna aliquam erat volutpat “.
Nemokama stiliaus antraštė
„Lorem ipsum dolor sit amet“, „consectetuer adipiscing elit“, „nežmoniškų„ nežmoniškų “ir„ nešvarių “dolerių„ magna aliquam erat volutpat “.
Pagrindinis CSS
Prieš kuriant bet kurį elementą, visada yra gera pradžia atkurti visas savybes naudojant šią CSS iš naujo ir suteikti jiems numatytąsias stiliaus reikšmes, todėl visos naršyklės padarys tą patį rezultatą (išskyrus galbūt, IE6).
Stiliai bus atskirti style.css faile, todėl mūsų HTML failas atrodys tvarkingas. Tačiau nepamirškite pridėti nuorodos stiliaus į galvos žymę, kad galėtumėte pritaikyti failo stiliaus taisykles.
Gerai, pradėkime elemento formavimą, pradedant nuo html žymos ir pagrindinio įvynioklio ID:
html background-color: #eaeaea; #mainwrapper font: 10pt normalus Arial, sans-serif; aukštis: auto; paraštė: 80px auto 0 auto; teksto derinimas: centras; plotis: 660px;
Image Box stilius
Dėžutėse, kuriose yra vaizdai, taikome keletą bendrų stilių. Dėžutės bus rodomos šalia, naudojant kairę. Atkreipkite dėmesį, kad mes taip pat pridėjome perpildymą: paslėptą turtą; tai leis paslėpti visus viduje esančius objektus.
Mes taip pat deklaruojame perėjimo savybę kiekviename langelyje esančiame vaizde, jei vėliau reikės vaizdo perėjimo.
#mainwrapper .box border: 5px kietas #fff; žymeklis: žymeklis; aukštis: 182px; plūdė: kairė; skirtumas: 5px; pozicija: santykinis; perteklius paslėptas; plotis: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; dėžutės šešėlis: 1px 1px 1px 1px #ccc; #mainwrapper .box img pozicija: absoliutus; kairėje: 0; -webkit-perėjimas: visi 300ms palengvinimas; -moz-perėjimas: visi 300ms palengvinimas; -o-perėjimas: visi 300ms palengvinimas; -ms-perėjimas: visi 300ms palengvinimas; perėjimas: visi 300ms palengvinimas;
Antraštės bendras stilius
Antraštėje bus keletas bendrų stilių ir pereinamojo turto. Naudodamiesi neskaidrumo savybe, mes naudojame RGBA spalvų režimą, kad alfa kanalas būtų 0,8, kad antraštė atrodytų šiek tiek skaidri, nepaveikiant teksto viduje.
#mainwrapper .box .caption fono spalva: rgba (0,0,0,0,8); pozicija: absoliutus; spalva: #fff; z-indeksas: 100; -webkit-perėjimas: visi 300ms palengvinimas; -moz-perėjimas: visi 300ms palengvinimas; -o-perėjimas: visi 300ms palengvinimas; -ms-perėjimas: visi 300ms palengvinimas; perėjimas: visi 300ms palengvinimas; kairėje: 0;
1 antraštė
Pirmoji antraštė turės paprastą perėjimo efektą, paprastai naudojamą antraštėje. Virš virš vaizdo bus rodomas antraštė. Norėdami ją išspręsti, antraštė turi fiksuotą 30 pikselių aukštį ir taikysime jo apatinę poziciją -30px, kad ją paslėptume žemiau vaizdo.
#mainwrapper .box .simple-caption height: 30px; plotis: 200px; ekranas: blokas; apačioje: -30px; linijos aukštis: 25pt; teksto derinimas: centras;
2 antraštė
Antrasis tipas turi visą vaizdo ir langelio matmenų plotį ir aukštį (200x200px), o perėjimas būtų panašus į stumdomų durų efektą tik tada, kai jis bus iš viršaus į apačią.
#mainwrapper .box .full-caption plotis: 170px; aukštis: 170px; viršuje: -200px; teksto derinimas: kairėje; paminkštinimas: 15px;
3 antraštė
Trečioji antraštė išnyks. Taigi, pridėjome neskaidrumo: 0 pradinei būsenai.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption skaidrumas: 0; plotis: 170px; aukštis: 170px; teksto derinimas: kairėje; paminkštinimas: 15px;
4 antraštė
Ketvirtoji antraštė bus išstumta iš kairės į dešinę, todėl nustatėme 200px kairėje (kairėje: 200px) kaip pradinę padėtį.
** 4 antraštė: skaidrė ** / #mainwrapper .box .slide-caption plotis: 170px; aukštis: 170px; teksto derinimas: kairėje; paminkštinimas: 15px; kairėje: 200px;
5 antraštė
Penkta antraštė turės sukamąjį efektą. Ne tik antraštė sukasi, bet ir vaizdas. Tai labiau panašu į pozicijos keitimą pasukant.
Taigi, mes pridedame transformacijos turtą, kurio sukimas yra -180 laipsnių, nebent norite, kad monitorius būtų perskaitytas, kad būtų galima perskaityti antraštę.
#mainwrapper # box-5.box .rotate-caption plotis: 170px; aukštis: 170px; teksto derinimas: kairėje; paminkštinimas: 15px; viršuje: 200px; -moz-transform: pasukti (-180deg); -o-transformuoti: pasukti (-180deg); -webkit-transformacija: pasukti (-180deg); transformuoti: pasukti (-180deg); #mainwrapper .box .rotate plotis: 200px; aukštis: 400px; -webkit-perėjimas: visi 300ms palengvinimas; -moz-perėjimas: visi 300ms palengvinimas; -o-perėjimas: visi 300ms palengvinimas; -ms-perėjimas: visi 300ms palengvinimas; perėjimas: visi 300ms palengvinimas;
6 antraštė
Paskutinė antraštė turės skalės transformaciją. Tačiau ankstesnėse antraštėse jis bus rodomas kartu su .caption perėjimo perėjimu. Šiame skyriuje mes padarysime jį šiek tiek kitokį.
Tekstas pasirodys po to, kai bus atliktas perėjimas. Taigi, pridedame pereinamąjį vėlavimą tekstui, šiuo atveju h3 ir p žymei.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p pozicija: santykinis; kairėje: -200px; plotis: 170px; -webkit-perėjimas: visi 300ms palengvinimas; -moz-perėjimas: visi 300ms palengvinimas; -o-perėjimas: visi 300ms palengvinimas; -ms-perėjimas: visi 300ms palengvinimas; perėjimas: visi 300ms palengvinimas; #mainwrapper .box .scale-caption h3 -webkit-transfer-delay: 300ms; -moz-transfer-delay: 300ms; -o-perėjimo delsimas: 300ms; -ms-pereinamasis delsimas: 300ms; pereinamasis delsimas: 300ms; #mainwrapper .box .scale-caption p -webkit-perėjimas-vėlavimas: 500 ms; -moz-transfer-delay: 500ms; -o-perėjimo delsimas: 500 ms; -ms-pereinamasis delsimas: 500 ms; perėjimo delsimas: 500 ms;
Padarykime juos perkelti
Tolesniame skyriuje nustatysime antraštės elgseną, kai pakelsime virš vaizdų ar langelių.
Antraštės elgesys 1: parodyti.
Dėl pirmos antraštės norėtume, kad jis būtų rodomas (iš apačios), kai pakeliame virš dėžutės. Norėdami išspręsti šį žingsnį, mes naudojame transformavimo savybę ir toliau pateikiamas CSS kodas nurodo antraštę perkelti 100% savo svorio į viršų.
#mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transformuoti: translateY (-100%); -webkit-transform: translateY (-100%); transformuoti: translateY (-100%);
Jei neturite taško, kad vertimo vertė būtų neigiama, galbūt norėsite perskaityti šią pamoką, kad gautumėte daugiau informacijos.
Antraštės elgesys 2: Perkelkite jį žemyn.
Priešingai, antroji antraštė judės žemyn iš viršaus. Taigi, mes turėsime teigiamą vertę translateY.
#mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transformuoti: translateY (100%); -webkit-transform: translateY (100%); transformuoti: translateY (100%);
Antraštės elgesys 3: išnyks.
Trečia antraštė iš tikrųjų yra paprasčiausia. Kai langelis yra įjungtas, antraštės skaidrumas bus 1, todėl jis bus matomas ir, kadangi antraštės klasėje pridėjome pereinamąjį turtą, perėjimas turėtų vykti sklandžiai.
#mainwrapper .box: hover .fade-caption skaidrumas: 1;
Antraštės elgesys 4: stumkite jį į kairę.
Kaip jau minėjome, ši antraštė bus skaidrė į kairę, tačiau vaizdas taip pat bus išstumtas į dešinę. Taigi, čia turime 2 CSS deklaracijas.
Toliau pateikiamas CSS kodas rodo, kad kai užvykstame virš dėžutės, antraštė bus nukreipta 100% jos pločio į kairę. Atkreipkite dėmesį, kad mes dabar naudojame translateX, nes norime, kad skaidrė judėtų horizontaliai iš dešinės į kairę.
#mainwrapper .box: hover .slide-caption background-color: rgba (0,0,0,1)! svarbu! -moz-transform: translateX (-100%); -o-transformuoti: translateX (-100%); -webkit-transform: translateX (-100%); neskaidrumas: 1; transformuoti: translateX (-100%);
Kai pakeliame virš dėžutės, vaizdas bus išstumtas į kairę.
#mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transformuoti: translateX (-100%); -webkit-transform: translateX (-100%); transformuoti: translateX (-100%);
Antraštės elgesys 5: pasukite.
Ši antraštė skiriasi nuo likusios, nes ji neperkels iš dešinės ar kairiosios, bet sukasi. Kai langelis yra užvažiuojamas, vaizdas, kuriame yra vaizdas ir antraštė, pasuks -180 prieš laikrodžio rodyklę, paslėpdamas vaizdą ir rodydamas antraštę.
/ ** Rotate Caption: hover Behavior ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! Svarbu! -moz-transform: pasukti (-180deg); -o-transformuoti: pasukti (-180deg); -webkit-transformacija: pasukti (-180deg); transformuoti: pasukti (-180deg);
Antraštės elgesys 6: išplėsti jį.
Ši antraštė sujungs kelis transformavimo efektus. Kai dėžutė yra įjungta, vaizdas pradinis matmuo padidės 140% (1,4).
#mainwrapper .box: hover # image-6 -moz-transform: skalė (1.4); -o-transformacija: skalė (1.4); -webkit-transform: skalė (1.4); transformuoti: skalę (1.4);
Ir jei pamatėte CSS aukščiau 6 antraštė nukreipėme tekstą į kairę 200 pikselių. Šis toliau pateiktas CSS kodas nurodo, kad tekstas pereina į pradinę padėtį. Taigi, tekstas bus išstumiamas iš kairės į dešinę vienu metu.
#mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transformuoti: translateX (200px); -webkit-transform: translateX (200px); transformuoti: translateX (200px);
- Demo
- Atsisiųsti šaltinį
Santrauka
Nors šios CSS funkcijos yra kietos, tačiau dar nėra plačiai taikomos, nes anksčiau minėti naršyklės palaikymo apribojimai. Tačiau toliau eksperimentuokite su šiomis naujomis funkcijomis, nes taip ateityje formuosime tinklalapį.
Kreditai
Vaizdo miniatiūros pamokoje yra paimtos iš šių svetainių (ekrano kopijos):
- Užsakyti knygą
- Archiduchesė
- „Vlog“
- Hongkiat
- Sveikinimo ūkis
- Mark Ecko
