6 Cool Image Captions med CSS3
CSS3 er virkelig kraftfuld. Det plejede at være, at vi har brug for billeder eller en masse JavaScript kodelinjer for at gøre en simpel overgangseffekt. I dag kan vi gøre det samme med kun CSS3.
I denne vejledning viser vi dig, hvordan du opretter billedtekster med forskellige overgange, blot ved hjælp af CSS3.
- Demo
- Download kilde
Browser Support
Denne billedtekst vil være meget afhængig af transformations- og overgangsejendomme, som er relativt nye funktioner, så det ville være klogt at notere den browsersupport, der var nødvendig for at køre billedteksten jævnt.
Følgende er browsere, der allerede understøtter transformation og overgang:
- Internet Explorer 10+ (ikke udgivet endnu)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Lad os nu starte vejledningen.
HTML struktur
Vi har 6 billeder; hvert billede med en anden billedtekst stil.
Enkel billedtekst
Fuldtekst
Der er ingen problemer med at beskytte dig selv, og du er ikke sikker på, at du er i stand til at udtale dig om, at du ikke har noget andet end dig selv..
Fade Caption
Der er ingen problemer med at beskytte dig selv, og du er ikke sikker på, at du er i stand til at udtale dig om, at du ikke har noget andet end dig selv..
Slide Caption
Der er ingen problemer med at beskytte dig selv, og du er ikke sikker på, at du er i stand til at udtale dig om, at du ikke har noget andet end dig selv..
Dette er roterende billedtekst
Der er ingen problemer med at beskytte dig selv, og du er ikke sikker på, at du er i stand til at udtale dig om, at du ikke har noget andet end dig selv..
Gratis stiltekst
Der er ingen problemer med at beskytte dig selv, og du er ikke sikker på, at du er i stand til at udtale dig om, at du ikke har noget andet end dig selv..
Grundlæggende CSS
Før du styler et element, er det altid en god start at nulstille alle egenskaber ved hjælp af denne CSS-nulstilling og give dem deres standard stilværdier, så alle browsere vil give det samme resultat (undtagen måske IE6).
Stilene bliver adskilt i style.css-filen, så vores HTML-fil vil se pænt ud. Glem ikke at tilføje en link stil inde i hovedet tag for at anvende styling regler i filen.
OK, lad os begynde at stylere elementet, startende fra HTML-mærket og hovedindpaknings id:
html baggrundsfarve: #eaeaea; #mainwrapper font: 10pt normal Arial, sans-serif; højde: auto; margin: 80px auto 0 auto; tekst-align: center; bredde: 660px;
Billedkasse stil
Vi anvender nogle almindelige stilarter i boksene, der indeholder billederne. Kasserne vises side om side ved hjælp af float til venstre. Bemærk, at vi også tilføjede overløb: skjult ejendom; Dette vil gøre alle objekter indeni, der passerer gennem div, der skal skjules.
Vi erklærer også overgangsegenskab på hvert billede inde i boksen, hvis vi senere har brug for billedovergangen.
#mainwrapper .box border: 5px solid #fff; markør: pointer; højde: 182px; flyde: venstre; margen: 5px; stilling: relativ; overløb: skjult; bredde: 200px; -webkit-boks-skygge: 1px 1px 1px 1px #ccc; -moz-box-skygge: 1px 1px 1px 1px #ccc; box-skygge: 1px 1px 1px 1px #ccc; #mainwrapper .box img position: absolute; venstre: 0; -webkit-overgang: alle 300ms lethed; -moz-overgang: alle 300ms lethed; -o-overgang: alle 300ms lethed; -ms-overgang: alle 300ms lethed; overgang: alle 300ms lethed;
Caption Common Style
Underteksten vil have nogle fælles stilarter og også overgangsejendomme. I stedet for at bruge opacitetsegenskab bruger vi RGBA-farvemodus med 0,8 for alfakanalen for at få billedteksten til at se lidt gennemsigtig uden at påvirke teksten indeni.
#mainwrapper .box .caption baggrundsfarve: rgba (0,0,0,0,8); position: absolut; farve: #fff; z-indeks: 100; -webkit-overgang: alle 300ms lethed; -moz-overgang: alle 300ms lethed; -o-overgang: alle 300ms lethed; -ms-overgang: alle 300ms lethed; overgang: alle 300ms lethed; venstre: 0;
Undertekst 1
Den første billedtekst vil have en simpel overgangseffekt, der almindeligvis anvendes til en billedtekst. Billedteksten kommer op fra bunden, når vi svæver over billedet. For at adressere det, vil billedteksten have en fast højde på 30px, og vi anvender dens bundposition -30px for at skjule den under billedet.
#mainwrapper .box .simple-caption højde: 30px; bredde: 200px; display: blok; bund: -30px; linjens højde: 25pt; tekst-align: center;
Undertekst 2
Den anden type har den fulde bredde og højden af billed / boks dimensionen (200x200px), og overgangen vil kun være som en skydedørseffekt, at den vil glide fra top til bund.
#mainwrapper .box .fulltekst bredde: 170px; højde: 170px; top: -200px; tekst-align: left; polstring: 15px;
Skrift 3
Den tredje billedtekst vil have falsk effekt. Så vi tilføjede opacitet: 0 for sin oprindelige tilstand.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacitet: 0; bredde: 170px; højde: 170px; tekst-align: left; polstring: 15px;
Undertekst 4
Den fjerde billedtekst vil glide fra venstre til højre, så vi fik 200px til venstre (venstre: 200px) som sin startposition.
** Caption 4: Slide ** / #mainwrapper .box .slide-caption width: 170px; højde: 170px; tekst-align: left; polstring: 15px; venstre: 200px;
Undertekst 5
Den femte billedtekst vil have roterende effekt. Det er ikke kun billedteksten, der vil rotere, men også billedet. Det er mere som ændringen af position ved at rotere.
Så tilføjer vi transformationsegenskab med en 180 graders rotation, medmindre du foretrækker at rotere din skærm for at læse billedteksten.
#mainwrapper # box-5.box .rotate-caption bredde: 170px; højde: 170px; tekst-align: left; polstring: 15px; top: 200px; -moz-transform: roter (-180deg); -o-transformer: roter (-180deg); -webkit-transform: roter (-180deg); transformer: roter (-180deg); #mainwrapper .box .rotate width: 200px; højde: 400px; -webkit-overgang: alle 300ms lethed; -moz-overgang: alle 300ms lethed; -o-overgang: alle 300ms lethed; -ms-overgang: alle 300ms lethed; overgang: alle 300ms lethed;
Overskrift 6
Den sidste billedtekst vil have skalaomformning. Men i de foregående billedtekster vil teksten inde i det faktisk vise sammen med .caption transition shift. I dette afsnit vil vi gøre det lidt anderledes.
Teksten vises efter overgangskiftet er udført. Så tilføjer vi overgangsforsinkelse på teksten, i dette tilfælde h3 og p-mærket.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relative; venstre: -200px; bredde: 170px; -webkit-overgang: alle 300ms lethed; -moz-overgang: alle 300ms lethed; -o-overgang: alle 300ms lethed; -ms-overgang: alle 300ms lethed; overgang: alle 300ms lethed; #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;
Lad os få dem til at flytte
I det følgende afsnit definerer vi opførelsen af billedteksten, når vi svæver over billederne eller boksene.
Undertekst adfærd 1: Vis op.
Til den første billedtekst vil vi gerne have det vist (fra bunden), når vi svæver over boksen. For at løse dette træk bruger vi transformationsegenskab, og CSS-koden nedenfor fortæller billedteksten at flytte 100% af dens vægt 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 det punkt at have negativ værdi for oversættelsen, kan du måske læse denne vejledning først for at få mere indsigt.
Undertekst Adfærd 2: Flyt den ned.
Omvendt vil den anden billedtekst bevæge sig ned fra toppen. Så vi vil have positiv værdi for translateY.
#mainwrapper .box: svever. fuldtekst -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); transformere: translateY (100%);
Caption Adfærd 3: Fade in.
Den tredje billedtekst er faktisk den nemmeste. Når kassen er på hover, ændres billedets opacitet til 1, hvilket gør det synligt, og da vi har tilføjet overgangsegenskab i billedklassen, skal overgangen løbe glat.
#mainwrapper .box: svever .fade-caption opacitet: 1;
Skærmopførsel 4: Skub det til venstre.
Som vi nævner før, skifter denne billedtekst til venstre, dog vil billedet også glide ud til højre. Så her har vi 2 CSS-erklæringer.
CSS-koden nedenfor viser, at når vi svæver over boksen, skifter billedteksten 100% af bredden til venstre. Bemærk, at vi nu bruger translateX, fordi vi ønsker, at billedet skal bevæge sig vandret fra højre mod venstre.
#mainwrapper .box: hover .slide-caption baggrundsfarve: rgba (0,0,0,1)! vigtigt; -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); opacitet: 1; transformere: translateX (-100%);
Når vi svæver over boksen, glider billedet ud til venstre.
#mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); transformere: translateX (-100%);
Undertekst Adfærd 5: Drej det.
Denne billedtekst er forskellig fra resten, da den ikke vil bevæge sig fra højre eller venstre, men vil rotere. Når kassen er på svæverflyden, vil den div, der indeholder billedet og billedteksten, dreje -180 mod uret for at skjule billedet og vise billedteksten.
/ ** Rotate Caption: hover Adfærd ** / #mainwrapper .box: svever .rotat baggrundsfarve: rgba (0,0,0,1)! Vigtigt; -moz-transform: roter (-180deg); -o-transformer: roter (-180deg); -webkit-transform: roter (-180deg); transformer: roter (-180deg);
Opførsel Adfærd 6: Skalere op.
Denne billedtekst kombinerer flere transformereffekter. Når kassen er på hover, vil billedet blive opskåret med 140% (1.4) fra sin oprindelige dimension.
#mainwrapper .box: hover # image-6 -moz-transform: scale (1.4); -o-transformer: skala (1.4); -webkit-transform: skala (1.4); transformere: skala (1.4);
Og hvis du så CSS ovenfor under Overskrift 6 overskrift, vi har gemt teksten til venstre ved 200px. Denne CSS-kode nedenfor fortæller teksten at flytte til deres startposition. Så vil teksten glide ind fra venstre til højre samtidigt.
#mainwrapper .box: hover .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
- Download kilde
Resumé
Selvom disse CSS-funktioner er kølige, men det er ikke meget anvendeligt endnu, på grund af de begrænsninger for browsersupport, vi tidligere har nævnt. Fortsæt med at eksperimentere med disse nye funktioner, fordi det her er den måde, hvorpå vi skal udforme en webside i fremtiden.
credits
Billed miniaturer i vejledningen hentes fra følgende websteder (skærmbillede):
- En bog fra hinanden
- Archiduchesse
- vlog
- Hongkiat
- The Greeting Farm
- Mark Ecko
