6 Kule bildetekster med CSS3

CSS3 er veldig kraftig. Det pleide å være at vi trenger bilder eller en gjeng med JavaScript kodelinjer for å gjøre en enkel overgangseffekt. I dag kan vi gjøre det samme med bare CSS3.

I denne opplæringen vil vi vise deg hvordan du oppretter bildetekster med ulike overganger, bare ved hjelp av CSS3.

Demo
Last ned kilde

Nettleserstøtte

Denne bildeteksten vil være mye avhengig av transformasjons- og overgangseiendommer som er relativt nye funksjoner, så det ville være lurt å merke seg nettleserstøtten som trengs for å kjøre bildeteksten jevnt.

Følgende er nettlesere som allerede støtter transformasjon og overgang:

Internet Explorer 10+ (ikke utgitt ennå)
Firefox 6+
Chrome 13+
Safari 3.2+
Opera 11+

Nå, la oss starte opplæringen.

HTML-struktur

Vi har 6 bilder; hvert bilde med en annen bildetekst stil.

     Enkel bildetekst
  
     Fulltekst
 Det er ikke noe problem, men det er ikke så bra, det er ikke så bra, det er ikke noe problem, men det er ikke noe problem..
  
     Fade Caption
 Det er ikke noe problem, men det er ikke så bra, det er ikke så bra, det er ikke noe problem, men det er ikke noe problem..
  
     Slide bildetekst
 Det er ikke noe problem, men det er ikke så bra, det er ikke så bra, det er ikke noe problem, men det er ikke noe problem..
  
      Dette er roterende bildetekst
 Det er ikke noe problem, men det er ikke så bra, det er ikke så bra, det er ikke noe problem, men det er ikke noe problem..
  
 
     Gratis stiltekst
 Det er ikke noe problem, men det er ikke så bra, det er ikke så bra, det er ikke noe problem, men det er ikke noe problem..

Grunnleggende CSS

Før du utformer et hvilket som helst element, er det alltid en god start å nullstille alle egenskapene ved hjelp av denne CSS-tilbakestillingen og gi dem sine standardstilverdier, slik at alle nettlesere vil gi det samme resultatet (unntatt kanskje IE6).

Stilene vil bli skilt i style.css-filen, så vår HTML-fil vil se pent ut. Men ikke glem å legge til en lenke stil inne i hodet tagg for å bruke styling regler i filen.

OK, la oss begynne å utforme elementet, fra html-taggen og hovedinnpaknings-ID:

 html bakgrunnsfarge: #eaeaea;  #mainwrapper font: 10pt normal Arial, sans-serif; høyde: auto; margin: 80px auto 0 auto; tekstjustering: center; bredde: 660px;

Image Box Style

Vi bruker noen vanlige stiler i boksene som inneholder bildene. Boksene vil bli vist side ved side ved hjelp av flyter til venstre. Legg merke til at vi også lagt til overflyt: skjult eiendom; Dette vil gjøre alle objekter inne som passerer gjennom div som skal skjules.

Vi erklærer også overgangseiendom på hvert bilde i boksen, hvis vi trenger bildetovergangen senere.

 #mainwrapper .box border: 5px solid #fff; markør: pointer; høyde: 182px; flyte: venstre; margin: 5px; posisjon: relativ; overløp: skjult; bredde: 200px; -webkit-boks-skygge: 1px 1px 1px 1px #ccc; -moz-box-skygge: 1px 1px 1px 1px #ccc; boks-skygge: 1px 1px 1px 1px #ccc;  #mainwrapper .box img posisjon: absolutt; venstre: 0; -webkit-overgang: alle 300ms utelukkelse; -moz-overgang: alle 300ms utelukkelse; -Overgang: alle 300ms utelukkelse; -ms-overgang: alle 300ms utelukkelse; overgang: alle 300ms utelukkelse;

Caption Common Style

Tekstet vil ha noen vanlige stiler og også overgangseiendommer. I stedet for å bruke opacitetsegenskap, bruker vi RGBA-fargemodus med 0,8 for alfakanalen for å gjøre bildeteksten litt gjennomsiktig uten å påvirke teksten inni.

 #mainwrapper .box .caption bakgrunnsfarge: rgba (0,0,0,0,8); posisjon: absolutt; farge: #fff; z-indeks: 100; -webkit-overgang: alle 300ms utelukkelse; -moz-overgang: alle 300ms utelukkelse; -Overgang: alle 300ms utelukkelse; -ms-overgang: alle 300ms utelukkelse; overgang: alle 300ms utelukkelse; venstre: 0;

Undertekst 1

Den første bildeteksten har en enkel overgangseffekt som vanligvis brukes til en bildetekst. Tekstet kommer opp fra bunnen når vi svinger over bildet. For å adressere det, vil bildeteksten ha en fast høyde på 30px, og vi bruker bunnposisjonen -30px for å skjule den under bildet.

 #mainwrapper .box .simple-caption høyde: 30px; bredde: 200px; skjerm: blokk; bunn: -30px; linjehøyde: 25pt; tekstjustering: center;

Skrift 2

Den andre typen har full bredde og høyde på dimensjonen for bilde / boks (200x200px), og overgangen vil være som en skyvedørseffekt bare at den vil glide fra topp til bunn.

 #mainwrapper .box .fulltekst bredde: 170px; høyde: 170px; toppen: -200px; tekstjustering: venstre; polstring: 15px;

Skrift 3

Den tredje bildeteksten har fading effekt. Så vi la opasitet: 0 for sin opprinnelige tilstand.

 #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; bredde: 170px; høyde: 170px; tekstjustering: venstre; polstring: 15px;

Skrift 4

Den fjerde bildeteksten glir fra venstre til høyre, så vi fikset 200px til venstre (venstre: 200px) som sin første posisjon.

 ** Caption 4: Slide ** / #mainwrapper .box .slide-caption width: 170px; høyde: 170px; tekstjustering: venstre; polstring: 15px; venstre: 200px;

Undertekst 5

Den femte bildeteksten har roterende effekt. Det er ikke bare bildeteksten som vil rotere, men også bildet. Det er mer som endring av posisjon ved å rotere.

Så legger vi til transformasjonseiendom med en -180 graders rotasjon, med mindre du foretrekker å rotere skjermen din for å lese bildeteksten.

 #mainwrapper # box-5.box .rotate-caption width: 170px; høyde: 170px; tekstjustering: venstre; polstring: 15px; topp: 200px; -moz-transform: roter (-180deg); -o-transformer: roter (-180deg); -webkit-transform: roter (-180deg); transformer: roter (-180deg);  #mainwrapper .box .rotate width: 200px; høyde: 400px; -webkit-overgang: alle 300ms utelukkelse; -moz-overgang: alle 300ms utelukkelse; -Overgang: alle 300ms utelukkelse; -ms-overgang: alle 300ms utelukkelse; overgang: alle 300ms utelukkelse;

Skrift 6

Den siste bildeteksten skal ha skalaomforming. Men i de forrige bildetekster vil teksten inne i det faktisk vises sammen med .caption transition shift. I denne delen vil vi gjøre det litt annerledes.

Teksten vises etter overgangskiftet er ferdig. Så legger vi til overgangsforsinkelse på teksten, i dette tilfellet h3 og p-taggen.

 #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p posisjon: relative; igjen: -200px; bredde: 170px; -webkit-overgang: alle 300ms utelukkelse; -moz-overgang: alle 300ms utelukkelse; -Overgang: alle 300ms utelukkelse; -ms-overgang: alle 300ms utelukkelse; overgang: alle 300ms utelukkelse;  #mainwrapper .box .scale-caption h3 -webkit-overgangsforsinkelse: 300ms; -moz-overgangsforsinkelse: 300ms; -o-overgangsforsinkelse: 300ms; -ms-overgangsforsinkelse: 300ms; Overgangsforsinkelse: 300ms;  #mainwrapper .box .scale-caption p -webkit-overgangsforsinkelse: 500ms; -moz-overgangsforsinkelse: 500ms; -o-overgangsforsinkelse: 500ms; -ms-overgangsforsinkelse: 500ms; Overgangsforsinkelse: 500ms;

La oss få dem til å flytte

I det følgende avsnittet definerer vi oppførselen til bildeteksten når vi svinger over bildene eller boksene.

Opptaksadferd 1: Vis opp.

For den første bildeteksten, vil vi gjerne vise det (fra bunnen) når vi svinger over boksen. For å adressere dette trekket bruker vi transformasjonsegenskaper og CSS-koden nedenfor forteller bildeteksten for å flytte 100% av vekten til toppen.

 #mainwrapper .box: svever .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); transformere: translateY (-100%);

Hvis du ikke får poenget med å ha negativ verdi for oversettelsen, vil du kanskje lese denne opplæringen først for å få mer innsikt.

Opptaksadferd 2: Flytt den ned.

Omvendt vil den andre bildeteksten bevege seg ned fra toppen. Så, vi vil ha positiv verdi for translateY.

 #mainwrapper .box: svever .fulltekst -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); transformere: translateY (100%);

Caption Behavior 3: Fade in.

Den tredje bildeteksten er faktisk den enkleste. Når boksen er på hover, vil bildetekstens opacity bli 1 som gjør det synlig, og siden vi har lagt til overgangseiendom i bildetekstklassen, bør overgangen løpe jevnt.

 #mainwrapper .box: svever .fade-caption opacity: 1;

Opptaksadferd 4: Skyv den til venstre.

Som vi nevner før, vil denne bildeteksten skli til venstre, men bildet vil også glide ut til høyre. Så, her har vi 2 CSS-erklæringer.

CSS-koden nedenfor indikerer at når vi svinger over boksen, vil bildeteksten glide 100% av bredden til venstre. Legg merke til at vi nå bruker translateX, fordi vi vil at lysbildet skal bevege seg horisontalt fra høyre til venstre.

 #mainwrapper .box: hover .slide-caption bakgrunnsfarge: rgba (0,0,0,1)! viktig; -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); opasitet: 1; transformere: translateX (-100%);

Når vi svinger over boksen, vil bildet glide ut til venstre.

 #mainwrapper .box: svever img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); transformere: translateX (-100%);

Opptaksadferd 5: Roter den.

Denne bildeteksten er forskjellig fra resten, da den ikke beveger seg fra høyre eller venstre, men vil rotere. Når boksen er på hover, vil div som inneholder bildet og bildeteksten rotere -180 mot klokka for å skjule bildet og vise bildeteksten.

 / ** Rotate Caption: hover Oppførsel ** / #mainwrapper .box: svever .rotat bakgrunnsfarge: rgba (0,0,0,1)! Viktig; -moz-transform: roter (-180deg); -o-transformer: roter (-180deg); -webkit-transform: roter (-180deg); transformer: roter (-180deg);

Opptaksadferd 6: Skala opp det.

Denne bildeteksten kombinerer flere transformereffekter. Når boksen er på hover, vil bildet skalere opp med 140% (1.4) fra sin innledende dimensjon.

 #mainwrapper .box: svever # image-6 -moz-transform: skala (1.4); -o-transformer: skala (1.4); -webkit-transform: skala (1.4); transformere: skala (1.4);

Og hvis du så CSS ovenfor under Skrift 6 overskriften, vi har skjult teksten til venstre ved 200px. Denne CSS-koden nedenfor forteller at teksten går til startposisjonen. Så vil teksten skyve inn fra venstre til høyre samtidig.

 #mainwrapper .box: svever .scale-caption h3, #mainwrapper .box: svever .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); transformere: translateX (200px);

Demo
Last ned kilde

Sammendrag

Selv om disse CSS-funksjonene er kule, men det er ikke mye gjeldende ennå, på grunn av begrensninger for nettleserstøtte vi tidligere har nevnt. Fortsett å eksperimentere med disse nye funksjonene, fordi dette er måten vi skal forme på en nettside i fremtiden.

studiepoeng

Miniatyrbilder i opplæringen er hentet fra følgende nettsteder (skjermbilde):

En bok fra hverandre
Archiduchesse
vlog
Hongkiat
Hilsen gården
Mark Ecko