6 Coola bildtexter med CSS3
CSS3 är verkligen kraftfull. Det brukade vara att vi behöver bilder eller en massa JavaScript kodlinjer för att göra en enkel övergångseffekt. Nuförtiden kan vi göra detsamma med endast CSS3.
I denna handledning visar vi dig hur du skapar bildtexter med olika övergångar helt enkelt med hjälp av CSS3.
- demo
- Hämta källan
Webbläsarsupport
Denna bildtext kommer att vara mycket beroende av omvandlings- och övergångsegenskaper som är relativt nya funktioner, så det vore klokt att notera det webbläsarstöd som behövs för att köra bildtexten smidigt.
Följande är webbläsare som redan stöder omvandling och övergång:
- Internet Explorer 10+ (ännu inte släppt)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Nu, låt oss starta handledningen.
HTML-struktur
Vi har 6 bilder; varje bild med en annan bildtextstil.
Enkel bildtext
Fulltext
Det här är en bra fråga, du vet att du inte har det, men det är inte så bra att du inte kommer att göra det här..
Fade Caption
Det här är en bra fråga, du vet att du inte har det, men det är inte så bra att du inte kommer att göra det här..
Slide Caption
Det här är en bra fråga, du vet att du inte har det, men det är inte så bra att du inte kommer att göra det här..
Detta är roterande bildtext
Det här är en bra fråga, du vet att du inte har det, men det är inte så bra att du inte kommer att göra det här..
Gratis Style Caption
Det här är en bra fråga, du vet att du inte har det, men det är inte så bra att du inte kommer att göra det här..
Grundläggande CSS
Innan du formaterar något element är det alltid en bra början att återställa alla egenskaper med hjälp av denna CSS-återställning och ge dem sina standardstilvärden, så alla webbläsare kommer att göra samma resultat (förutom kanske IE6).
Stilarna kommer att separeras i style.css-filen, så vår HTML-fil kommer att se bra ut. Glöm inte att lägga till en länkstil i huvudetiketten för att tillämpa stylingreglerna i filen.
OK, låt oss börja utforma elementet, från html-taggen och huvudomslaget ID:
html bakgrundsfärg: #eaeaea; #mainwrapper font: 10pt normal Arial, sans-serif; höjd: auto; marginal: 80px auto 0 auto; text-align: center; bredd: 660px;
Bildboks stil
Vi tillämpar några vanliga stilar i rutorna som innehåller bilderna. Lådorna kommer att visas sida vid sida med hjälp av flyt till vänster. Observera att vi också lagt till översvämning: dold egendom; Detta kommer att göra alla föremål inuti som passerar genom div som ska döljas.
Vi förklarar också övergångsegenskap på varje bild i rutan, om vi behöver bildövergången senare.
#mainwrapper .box border: 5px solid #fff; markör: pekare; höjd: 182px; flyta till vänster; marginal: 5px; position: relativ; översvämning: gömd; bredd: 200px; -webkit-box-skugga: 1px 1px 1px 1px #ccc; -moz-box-skugga: 1px 1px 1px 1px #ccc; boxskugga: 1px 1px 1px 1px #ccc; #mainwrapper .box img position: absolute; vänster: 0; -webkit-övergång: alla 300ms lätthet -moz-övergång: alla 300ms lätthet -överskridande: alla 300ms utmattning; -ms-övergång: alla 300ms lätthet; övergång: alla 300ms lätthet;
Caption Common Style
Bildtexten kommer att ha några vanliga stilar och även övergångsegenskaper. I stället för att använda opacitetsegenskap använder vi RGBA-färgläget med 0,8 för alfakanalen för att få bildtexten lite transparent utan att påverka texten inuti.
#mainwrapper .box .caption background-color: rgba (0,0,0,0,8); position: absolut; färg: #fff; z-index: 100; -webkit-övergång: alla 300ms lätthet -moz-övergång: alla 300ms lätthet -överskridande: alla 300ms utmattning; -ms-övergång: alla 300ms lätthet; övergång: alla 300ms lätthet; vänster: 0;
Bild 1
Den första bildtexten har en enkel övergångseffekt som vanligtvis används för en bildtext. Bildtexten kommer upp från botten när vi svävar över bilden. För att ta itu med den, har bildtexten en fast höjd på 30px och vi applicerar sin nedre position -30px för att dölja den under bilden.
#mainwrapper .box .simple-caption height: 30px; bredd: 200px; display: block; botten: -30px; linjehöjd: 25pt; text-align: center;
Bildtext 2
Den andra typen har full bredd och höjd på bilden / låddimensionen (200x200px) och övergången skulle vara som en skjutdörrseffekt bara att den kommer att glida från topp till botten.
#mainwrapper .box .fulltext bredd: 170px; höjd: 170px; topp: -200px; text-align: left; vaddering: 15px;
Bildtext 3
Den tredje bildtexten kommer att ha blekande effekt. Så vi lade opacitet: 0 för sitt ursprungliga tillstånd.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacitet: 0; bredd: 170px; höjd: 170px; text-align: left; vaddering: 15px;
Bild 4
Den fjärde rubriken kommer att glida från vänster till höger, så vi fixade 200px till vänster (vänster: 200px) som sin ursprungliga position.
** Bild 4: Slide ** / #mainwrapper .box .slide-caption width: 170px; höjd: 170px; text-align: left; vaddering: 15px; vänster: 200px;
Bildtext 5
Den femte rubriken kommer att ha roterande effekt. Det är inte bara bildtexten som kommer att rotera, men också bilden. Det är mer som att byta position genom att rotera.
Så lägger vi till transformationsegenskap med en rotation på -180 grader, om du inte föredrar att rotera bildskärmen för att läsa bildtexten.
#mainwrapper # box-5.box .rotate-caption width: 170px; höjd: 170px; text-align: left; vaddering: 15px; topp: 200px; -moz-transform: rotera (-180deg); -o-transform: rotera (-180deg); -webkit-transform: rotera (-180deg); transformera: rotera (-180deg); #mainwrapper .box .rotate width: 200px; höjd: 400px; -webkit-övergång: alla 300ms lätthet -moz-övergång: alla 300ms lätthet -överskridande: alla 300ms utmattning; -ms-övergång: alla 300ms lätthet; övergång: alla 300ms lätthet;
Bildtext 6
Den sista bildtexten kommer att ha skalaomvandling. I de föregående texterna visas emellertid texten i det faktiskt tillsammans med övergångsskiftet. I det här avsnittet kommer vi att göra det lite annorlunda.
Texten kommer att visas efter övergångsskiftet är klart. Så lägger vi till övergångsfördröjning på texten, i det här fallet h3 och p-taggen.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relative; vänster: -200px; bredd: 170px; -webkit-övergång: alla 300ms lätthet -moz-övergång: alla 300ms lätthet -överskridande: alla 300ms utmattning; -ms-övergång: alla 300ms lätthet; övergång: alla 300ms lätthet; #mainwrapper .box .scale-caption h3 -webkit-övergångsfördröjning: 300ms; -moz-övergångsfördröjning: 300ms; -o-övergångsfördröjning: 300ms; -ms-övergångsfördröjning: 300ms; övergångsfördröjning: 300ms; #mainwrapper .box .scale-caption p -webkit-övergångsfördröjning: 500ms; -moz-övergångsfördröjning: 500ms; -o-övergångsfördröjning: 500ms; -ms-övergångsfördröjning: 500ms; övergångsfördröjning: 500ms;
Låt oss göra dem flytta
I det följande avsnittet definierar vi bildtextens beteende när vi svävar över bilderna eller rutorna.
Bildtext Beteende 1: Visa upp.
För första bildtexten vill vi att den ska dyka upp (från botten) när vi svävar över lådan. För att ta itu med detta drag använder vi transformationsegenskaper och CSS-koden nedan visar att bildtexten flyttar 100% av sin vikt till toppen.
#mainwrapper .box: sväva .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); transformera: translateY (-100%);
Om du inte får poängen att ha negativt värde för översättningen, kanske du vill läsa den här handledningen först för att få mer insikt.
Bildtext Beteende 2: Flytta ner det.
Omvänt kommer den andra bildtexten att gå ner från toppen. Så vi kommer att ha positivt värde för translateY.
#mainwrapper .box: svever .fulltexttext -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); transformera: translateY (100%);
Bildtext Beteende 3: Fade in.
Den tredje bildtexten är faktiskt den enklaste. När lådan är på svängaren blir upphetsningen opacitet till 1 vilket gör den synlig, och eftersom vi har lagt till övergångsegenskap i bildtexten bör övergången fungera smidigt.
#mainwrapper .box: svävar .fade-caption opacity: 1;
Bildningsbeteende 4: Skjut det åt vänster.
Som vi nämner tidigare glider den här bildtexten till vänster, men bilden kommer också att glida ut till höger. Så här har vi 2 CSS-deklarationer.
CSS-koden nedan indikerar att när vi svävar över rutan skuggas bildtexten 100% av dess bredd till vänster. Observera att vi nu använder translateX, eftersom vi vill att bilden ska flyttas horisontellt från höger till vänster.
#mainwrapper .box: hover .slide-caption bakgrundsfärg: rgba (0,0,0,1)! viktigt; -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); opacitet: 1; transformera: translateX (-100%);
När vi svävar över rutan glider bilden ut till vänster.
#mainwrapper .box: sväva img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); transformera: translateX (-100%);
Skriftuppförande 5: Rotera det.
Den här bildtexten skiljer sig från resten, eftersom den inte rör sig från höger eller vänster men roterar. När rutan är på svängaren roterar div som innehåller bilden och bildtexten -180 moturs för att dölja bilden och visa bildtexten.
/ ** Rotate Caption: sväva uppförande ** / #mainwrapper .box: sväva .rotat bakgrundsfärg: rgba (0,0,0,1)! Viktigt; -moz-transform: rotera (-180deg); -o-transform: rotera (-180deg); -webkit-transform: rotera (-180deg); transformera: rotera (-180deg);
Skriftuppförande 6: Skala upp det.
Denna bildtext kommer att kombinera flera omvandlingseffekter. När lådan är på svängaren kommer bilden att skala upp med 140% (1.4) från sin ursprungliga dimension.
#mainwrapper .box: svep # bild-6 -moz-transform: skala (1.4); -o-transform: skala (1.4); -webkit-transform: skala (1.4); transformera: skala (1.4);
Och om du såg CSS ovan under Bildtext 6 rubrik, vi har gömt texten till vänster av 200px. Den här CSS-koden nedan visar att texten flyttar till sin ursprungliga position. Så kommer texten att skjuta in från vänster till höger samtidigt.
#mainwrapper .box: sväva .scale-caption h3, #mainwrapper .box: sväva .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); transformera: translateX (200px);
- demo
- Hämta källan
Sammanfattning
Även om dessa CSS-funktioner är coola, men det är inte allmänt tillämpligt än, på grund av de begränsningar för webbläsarens support vi tidigare nämnde. Fortsätt att experimentera med dessa nya funktioner, eftersom det här är sättet att vi kommer att forma en webbsida i framtiden.
Credits
Miniatyrbilder i handledningen tas från följande webbplatser (skärmdump):
- En bok separat
- Archiduchesse
- vlog
- Hongkiat
- Hälsningsgården
- Mark Ecko
