6 Cool pildikirjeldused CSS3-ga
CSS3 on tõesti võimas. See oli varem, et vajame lihtsat üleminekuefekti tegemiseks pilte või JavaScript-koodide rida. Tänapäeval saame sama teha ainult CSS3-ga.
Selles juhendis näitame teile, kuidas luua CSS3 abil mitmesuguste üleminekutega piltide pealkirju.
- Demo
- Allalaadimise allikas
Brauseri tugi
See pealkiri sõltub palju muutuste ja ülemineku omadustest, mis on suhteliselt uued funktsioonid, seega oleks mõistlik võtta teadmiseks brauseri tugi, mis on vajalik pealkirja sujuvaks käivitamiseks.
Järgmised on brauserid, mis juba toetavad muundamist ja üleminekut:
- Internet Explorer 10+ (pole veel avaldatud)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Nüüd alustame õpetust.
HTML struktuur
Meil on 6 pilti; iga erineva pealdise stiiliga pilt.
Lihtne pealkiri
Täielik pealkiri
Sõrmejälgede värvitoonid, sülearvutid, sülearvutid, sülearvutid, sülearvutid..
Fade Caption
Sõrmejälgede värvitoonid, sülearvutid, sülearvutid, sülearvutid, sülearvutid..
Slide Caption
Sõrmejälgede värvitoonid, sülearvutid, sülearvutid, sülearvutid, sülearvutid..
See on pööramine
Sõrmejälgede värvitoonid, sülearvutid, sülearvutid, sülearvutid, sülearvutid..
Tasuta stiili pealkiri
Sõrmejälgede värvitoonid, sülearvutid, sülearvutid, sülearvutid, sülearvutid..
Põhiline CSS
Enne mis tahes elemendi kujundamist on alati hea alustada kõigi CSS-i lähtestamise omaduste lähtestamist ja anda neile vaikimisi stiiliväärtused, nii et kõik brauserid muudavad sama tulemuse (välja arvatud ehk IE6).
Stiilid eraldatakse style.css failis, nii et meie HTML-fail näeb välja puhas. Kuid ärge unustage lisada peamärgile linkide stiili, et rakendada stiilieeskirju failis.
OK, alustame elemendi kujundamist, alustades html-märgisest ja peamisest ümbrikutunnistusest:
html background-color: #eaeaea; #mainwrapper font: 10pt normaalne Arial, sans-serif; kõrgus: auto; marginaal: 80px auto 0 auto; teksti joondamine: keskus; laius: 660px;
Pildikasti stiil
Kasutame pilte sisaldavates kastides mõningaid tavalisi stiile. Lahtrid kuvatakse paralleelselt, kasutades ujuki vasakule. Pange tähele, et lisasime ka ülevoolu: peidetud vara; see muudab kõik sisemised objektid, mis läbivad divi, peita.
Samuti deklareerime iga kasti sees oleva pildi üleminekuomaduse, kui vajame pildi üleminekut hiljem.
#mainwrapper .box border: 5px tahke #fff; kursor: pointer; kõrgus: 182px; float: vasakule; varu: 5px; positsioon: suhteline; ülevool: peidetud; laius: 200 px; -webkit-box-shadow: 1px 1px 1px 1cxccc; -moz-box-shadow: 1px 1px 1px 1cxccc; karp-vari: 1tk 1px 1px 1tk #ccc; #mainwrapper .box img asukoht: absoluutne; vasakul: 0; -webkit-üleminek: kõik 300ms lihtsus; -moz-üleminek: kõik 300 ms-i lihtsus; -o-siirdumine: kõik 300ms kergesti välja; -ms-siirdumine: kõik 300 ms-i lihtsus; üleminek: kõik 300ms kergesti välja;
Caption Common Style
Tiitril on mõned ühised stiilid ja ka üleminekuomadused. Selle asemel, et kasutada läbipaistmatuse omadust, kasutame alamkanali RGBA värvi režiimi 0,8, et muuta pealkiri natuke läbipaistvaks, mõjutamata teksti sees..
#mainwrapper .box .caption taustavärv: rgba (0,0,0,0,8); positsioon: absoluutne; värv: #fff; z-indeks: 100; -webkit-üleminek: kõik 300ms lihtsus; -moz-üleminek: kõik 300 ms-i lihtsus; -o-siirdumine: kõik 300ms kergesti välja; -ms-siirdumine: kõik 300 ms-i lihtsus; üleminek: kõik 300ms kergesti välja; vasakul: 0;
Pealkiri 1
Esimene pealkiri omab lihtsat üleminekuefekti, mida tavaliselt kasutatakse pealdise jaoks. Pealkiri ilmub altpoolt, kui me liigutame pilti üle. Selle lahendamiseks on pealdise fikseeritud kõrgus 30 px ja me rakendame selle alumist positsiooni -30px selle peitmiseks pildi all.
#mainwrapper .box .simple-caption height: 30px; laius: 200 px; kuva: plokk; alt: -30px; rea kõrgus: 25pt; teksti joondamine: keskus;
Pealkiri 2
Teisel tüübil on pildi / kasti mõõtme täielik laius ja kõrgus (200x200px) ja üleminek oleks libiseva ukse efekt ainult siis, kui see liigub ülalt alla.
#mainwrapper .box .full-caption width: 170px; kõrgus: 170px; top: -200px; teksti joondamine: vasakule; polsterdus: 15px;
Pealkiri 3
Kolmandal pealdisel on fading efekt. Niisiis, lisasime algsele olekule läbipaistmatuse: 0.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption läbipaistmatus: 0; laius: 170px; kõrgus: 170px; teksti joondamine: vasakule; polsterdus: 15px;
Pealkiri 4
Neljas pealkiri libiseb vasakult paremale, nii et fikseeriti 200px vasakule (vasakule: 200 px) oma algasendina.
** Caption 4: Slide ** / #mainwrapper .box .slide-caption laius: 170px; kõrgus: 170px; teksti joondamine: vasakule; polsterdus: 15px; vasakule: 200px;
Pealkiri 5
Viies pealkiri omab pöörlevat efekti. Pöördub mitte ainult pealdis, vaid ka pilt. See on pigem positsioneeri muutmine pööramisel.
Niisiis lisame -180 kraadi pöörlemisega teisendusväärtuse, välja arvatud juhul, kui eelistate ekraani lugemiseks kirjet lugeda.
#mainwrapper # box-5.box .rotate-caption width: 170px; kõrgus: 170px; teksti joondamine: vasakule; polsterdus: 15px; top: 200px; -moz-transform: pöörake (-180deg); -o-transformatsioon: pöörata (-180deg); -webkit-transform: pöörake (-180deg); transform: rotate (-180deg); #mainwrapper .box .rotate laius: 200 px; kõrgus: 400 px; -webkit-üleminek: kõik 300ms lihtsus; -moz-üleminek: kõik 300 ms-i lihtsus; -o-siirdumine: kõik 300ms kergesti välja; -ms-siirdumine: kõik 300 ms-i lihtsus; üleminek: kõik 300ms kergesti välja;
Pealkiri 6
Viimane pealkiri on skaala teisendusega. Kuid eelmistes pealkirjades kuvatakse sees olev tekst tegelikult koos .captioni ülemineku nihkega. Selles osas me teeme selle veidi erinevaks.
Teksti ilmub pärast ülemineku vahetust. Seega lisame tekstile ülemineku-viivituse, antud juhul h3 ja p sildi.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p positsioon: suhteline; vasakule: -200px; laius: 170px; -webkit-üleminek: kõik 300ms lihtsus; -moz-üleminek: kõik 300 ms-i lihtsus; -o-siirdumine: kõik 300ms kergesti välja; -ms-siirdumine: kõik 300 ms-i lihtsus; üleminek: kõik 300ms kergesti välja; #mainwrapper .box .scale-caption h3 -webkit-üleminek-viivitus: 300ms; -moz-siirdumise viivitus: 300ms; -o-ülemineku viivitus: 300 ms; -ms-üleminek-viivitus: 300 ms; ülemineku viivitus: 300 ms; #mainwrapper .box .scale-caption p -webkit-üleminek-viivitus: 500 ms; -moz-siirdumise viivitus: 500 ms; -o-ülemineku viivitus: 500 ms; -ms-siirdeaeg: 500 ms; ülemineku viivitus: 500 ms;
Teeme need liikumiseks
Järgmises osas määratleme pealdise käitumise piltide või kastide kohal.
Caption Behavior 1: Näita üles.
Esimese pealdise jaoks tahaksime, et see ilmuks (altpoolt), kui me kasti üle liigutame. Selle sammuga tegelemiseks kasutame teisendusväärtust ja allpool olev CSS-kood ütleb, et allkiri liigub 100% oma kaalust üles.
#mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); transform: translateY (-100%);
Kui sa ei saa punkti, mille jaoks on tõlkimise negatiivne väärtus, võiksite seda juhendit enne lugeda, et saada rohkem teavet.
Caption Behavior 2: Liigutage see alla.
Teisest küljest liigub teine pealkiri ülevalt alla. Niisiis, meil on translateY jaoks positiivne väärtus.
#mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); transform: translateY (100%);
Caption Behavior 3: Fade in.
Kolmas pealkiri on tegelikult kõige lihtsam. Kui kast on hover, muutub pealkirja läbipaistmatus 1-le, muutes selle nähtavaks ja kuna me oleme pealkirja klassis lisanud üleminekuomaduse, peaks üleminek toimuma sujuvalt.
#mainwrapper .box: hover .fade-caption läbipaistmatus: 1;
Caption Behavior 4: Lükake see vasakule.
Nagu me juba varem mainisime, libistatakse see pealkiri vasakule, kuid pilt liigub ka paremale. Seega on meil 2 CSS-deklaratsiooni.
Allolev CSS-kood näitab, et kui me kasti üle liigutame, libiseb pealkiri 100% selle laiusest vasakule. Pange tähele, et me kasutame nüüd translateXi, sest me tahame, et slaid liiguks horisontaalselt paremalt vasakule.
#mainwrapper .box: hover .slide-caption taustavärv: rgba (0,0,0,1)! oluline; -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); suitsusus: 1; transform: translateX (-100%);
Kui liigume kasti üle, libistatakse pilt vasakule.
#mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); transform: translateX (-100%);
Caption Behavior 5: Pööra seda.
See pealkiri erineb ülejäänud, kuna see ei liigu paremalt ega vasakult, vaid pöörleb. Kui kast on hover, pöörab pilt sisaldav divisioon ja pealkiri -180 vastupäeva, peidades pilti ja näidates pealdist.
/ ** Pildi pööramine: hover Käitumine ** / #mainwrapper .box: hover .rotate taustavärv: rgba (0,0,0,1)!) Oluline; -moz-transform: pöörake (-180deg); -o-transformatsioon: pöörata (-180deg); -webkit-transform: pöörake (-180deg); transform: rotate (-180deg);
Caption Behavior 6: Suurendage seda.
See pealkiri ühendab mitmeid transformatsiooniefekte. Kui karp on sisse lülitatud, tõuseb pilt 140% võrra (1,4) algsest mõõtmest.
#mainwrapper .box: hover # image-6 -moz-transform: skaala (1.4); -o-transform: skaala (1.4); -webkit-transform: skaala (1.4); transform: skaala (1.4);
Ja kui sa nägid CSS-i eespool Pealkiri 6 pealkiri, oleme peidetud teksti vasakule 200tk. See allolev CSS-kood ütleb, et tekst liigub nende algasendisse. Niisiis liugub tekst vasakult paremale samaaegselt.
#mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200 px); -webkit-transform: translateX (200px); transform: translateX (200 px);
- Demo
- Allalaadimise allikas
Kokkuvõte
Kuigi need CSS-i funktsioonid on lahedad, kuid see pole veel laialdaselt kohaldatav, on meil varem mainitud brauseri tugipiirangud. Siiski jätkake nende uute funktsioonidega eksperimenteerimist, sest nii kujundame tulevikus veebilehte.
Autorid
Pildi pisipildid juhendis võetakse järgmistest veebisaitidest (ekraanipilt):
- Book Apart
- Archiduchesse
- Vlog
- Hongkiat
- Tervitusfarm
- Mark Ecko
