6 Cool kuvatekstit CSS3 lla
CSS3 on todella voimakas. Aiemmin tarvitsimme kuvia tai joukko JavaScript-koodinimiä yksinkertaisen siirtymävaiheen aikaansaamiseksi. Nykyään voimme tehdä saman vain CSS3: n kanssa.
Tässä opetusohjelmassa näytämme, miten luoda kuvatekstejä, joissa on erilaisia siirtymiä yksinkertaisesti käyttämällä CSS3: ta.
- esittely
- Lataa lähde
Selaimen tuki
Tämä kuvateksti riippuu paljon muunnos- ja siirtymäominaisuuksista, jotka ovat suhteellisen uusia ominaisuuksia, joten olisi järkevää ottaa huomioon selaimen tuki, jota tarvitaan kuvatekstin suorittamiseen sujuvasti.
Seuraavat ovat selaimia, jotka jo tukevat muunnosta ja siirtymistä:
- Internet Explorer 10+ (ei vielä julkaistu)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Aloita nyt opetusohjelma.
HTML-rakenne
Meillä on 6 kuvaa; jokainen kuva, jolla on eri kuvateksti.
Yksinkertainen kuvateksti
Täysi kuvateksti
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonmy nibh euismod tincidunt u laoreet dolore magna aliquam erat volutpat.
Fade Caption
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonmy nibh euismod tincidunt u laoreet dolore magna aliquam erat volutpat.
Kuvaesitys
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonmy nibh euismod tincidunt u laoreet dolore magna aliquam erat volutpat.
Tämä on kiertokirje
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonmy nibh euismod tincidunt u laoreet dolore magna aliquam erat volutpat.
Vapaa tyyli kuvateksti
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonmy nibh euismod tincidunt u laoreet dolore magna aliquam erat volutpat.
Basic CSS
Ennen minkä tahansa elementin muotoilua on aina hyvä aloittaa kaikkien ominaisuuksien palauttaminen käyttämällä tätä CSS-nollausta ja antaa niille oletusarvoiset arvot, joten kaikki selaimet saavat saman tuloksen (paitsi ehkä, IE6).
Tyylit erotetaan style.css-tiedostossa, joten HTML-tiedostomme näyttää siistiltä. Älä kuitenkaan unohda lisätä linkkityyliä otsakkeen sisällä sovelluksen muotoilusääntöjen soveltamiseksi.
OK, aloitetaan elementin muotoilu alkaen html-tunnisteesta ja pääkääreen tunnuksesta:
html taustaväri: #eaeaea; #mainwrapper font: 10pt normaali Arial, sans-serif; korkeus: auto; marginaali: 80px auto 0 auto; text-align: center; leveys: 660px;
Kuvan laatikko
Käytämme joitakin yleisiä tyylejä kuviin sisältyviin laatikkoihin. Laatikot näytetään vierekkäin käyttämällä float-vasenta. Huomaa, että lisäsimme myös ylivuotoa: piilotettua omaisuutta; tämä tekee kaikki kohteet, jotka kulkevat divin läpi, piiloutumaan.
Ilmoitamme myös siirtymäominaisuuden jokaiselle laatikon sisäiselle kuvalle, jos tarvitsemme myöhemmin kuvansiirtoa.
#mainwrapper .box border: 5px solid #fff; kohdistin: osoitin; korkeus: 182px; float: vasen; marginaali: 5px; asema: suhteellinen; ylivuoto piilotettu; leveys: 200px; -webkit-box-shadow: 1kpl 1px 1px 1kpl #ccc; -moz-box-shadow: 1kpl 1px 1px 1kpl #ccc; laatikko-varjo: 1kpl 1kpl 1kpl 1kpl #ccc; #mainwrapper .box img sijainti: absoluuttinen; vasen: 0; -webkit-siirtyminen: kaikki 300 ms: n helppokäyttöisyys; -moz-siirtyminen: kaikki 300ms: n helppokäyttöisyys; -o-siirtyminen: kaikki 300ms: n helpotus; -ms-siirtyminen: kaikki 300ms: n helpotus; siirtyminen: kaikki 300ms: n helpotukset;
Kuvatekstin yleinen tyyli
Kuvatekstissä on joitakin yleisiä tyylejä ja myös siirtymäominaisuuksia. Sen sijaan, että käytät opasiteettia, käytämme RGBA-väritilaa, kun alfakanava on 0,8, jotta otsikko näyttää hieman läpinäkyvältä vaikuttamatta tekstiin sisälle.
#mainwrapper .box .caption taustaväri: rgba (0,0,0,0,8); asema: absoluuttinen; väri: #fff; z-indeksi: 100; -webkit-siirtyminen: kaikki 300 ms: n helppokäyttöisyys; -moz-siirtyminen: kaikki 300ms: n helppokäyttöisyys; -o-siirtyminen: kaikki 300ms: n helpotus; -ms-siirtyminen: kaikki 300ms: n helpotus; siirtyminen: kaikki 300ms: n helpotukset; vasen: 0;
Kuvateksti 1
Ensimmäisessä kuvatekstissä on yksinkertainen siirtotehoste, jota käytetään yleisesti kuvatekstissä. Kuvateksti nousee alhaalta, kun siirrämme kuvan päälle. Tämän korjaamiseksi kuvatekstillä on kiinteä korkeus 30 pikseliä, ja sen alempi sijainti -30px piilottaa sen kuvan alle.
#mainwrapper .box .simple-caption height: 30px; leveys: 200px; näyttö: lohko; pohja: -30px; linjan korkeus: 25pt; text-align: center;
Kuvateksti 2
Toisella tyypillä on koko levyn ja kuvan koko (200x200px) ja siirtymä olisi kuin liukuovien vaikutus vain, että se liukuu ylhäältä alas.
#mainwrapper .box .full-caption leveys: 170px; korkeus: 170px; alkuun: -200px; tekstin kohdistus: vasen; pehmuste: 15px;
Kuvateksti 3
Kolmannella otsikolla on häipyvä vaikutus. Niinpä lisäsimme opasiteettia: 0 alkuperäiseen tilaansa.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opasiteetti: 0; leveys: 170px; korkeus: 170px; tekstin kohdistus: vasen; pehmuste: 15px;
Kuvateksti 4
Neljäs otsikko liukuu vasemmalta oikealle, joten vahvistimme 200px vasemmalle (vasemmalle: 200px) alkuasentoonsa.
** Kuvateksti 4: Dia ** / #mainwrapper .box .slide-caption leveys: 170px; korkeus: 170px; tekstin kohdistus: vasen; pehmuste: 15px; vasen: 200px;
Kuvateksti 5
Viidennellä otsikolla on pyörivä vaikutus. Se ei ole vain kuvateksti, vaan myös kuva. Se on pikemminkin sijainnin vaihtaminen pyörittämällä.
Niinpä lisäämme muunnosominaisuuden, jonka kierros on -180 astetta, ellet halua kääntää näyttöäsi lukemaan kuvatekstit.
#mainwrapper # box-5.box .rotate-caption leveys: 170px; korkeus: 170px; tekstin kohdistus: vasen; pehmuste: 15px; alkuun: 200px; -moz-transform: kiertää (-180deg); -o-transform: kiertää (-180deg); -webkit-transform: kiertää (-180deg); muunnos: kiertää (-180deg); #mainwrapper .box .rotate leveys: 200px; korkeus: 400px; -webkit-siirtyminen: kaikki 300 ms: n helppokäyttöisyys; -moz-siirtyminen: kaikki 300ms: n helppokäyttöisyys; -o-siirtyminen: kaikki 300ms: n helpotus; -ms-siirtyminen: kaikki 300ms: n helpotus; siirtyminen: kaikki 300ms: n helpotukset;
Kuvateksti 6
Viimeisellä kuvatekstillä on skaalausmuunnos. Edellisissä kuvatekstissä sen sisällä oleva teksti näkyy kuitenkin .caption-siirtymävaiheen kanssa. Tässä osassa teemme sen hieman erilaiseksi.
Teksti tulee näkyviin siirtymävaiheen jälkeen. Niinpä lisäämme siirtymäviiveen tekstille, tässä tapauksessa h3- ja p-tunnisteille.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p sijainti: suhteellinen; vasen: -200px; leveys: 170px; -webkit-siirtyminen: kaikki 300 ms: n helppokäyttöisyys; -moz-siirtyminen: kaikki 300ms: n helppokäyttöisyys; -o-siirtyminen: kaikki 300ms: n helpotus; -ms-siirtyminen: kaikki 300ms: n helpotus; siirtyminen: kaikki 300ms: n helpotukset; #mainwrapper .box .scale-caption h3 -webkit-siirtymä-viive: 300ms; -moz-siirtymävaihe: 300 ms; -o-siirtymäviive: 300 ms; -ms-siirtymäviive: 300 ms; siirtymäviive: 300 ms; #mainwrapper .box .scale-caption p -webkit-siirtymäviive: 500 ms; -moz-siirtymävaihe: 500 ms; -o-siirtymäviive: 500 ms; -ms-siirtymäviive: 500 ms; siirtymäviive: 500 ms;
Tehdään ne siirtymään
Seuraavassa osassa määritellään kuvatekstin käyttäytyminen, kun siirrämme kuvat tai laatikot.
Kuvateksti 1: Näytä.
Ensimmäistä kuvatekstiä varten haluaisimme, että se näytetään (alhaalta), kun siirrämme ruudun päälle. Tämän siirron käsittelemiseksi käytämme muunnosominaisuutta ja alla oleva CSS-koodi kertoo kuvatekstin siirtävän 100% painostaan yläreunaan.
#mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); muunnos: translateY (-100%);
Jos et saa pistettä, jonka arvo on negatiivinen kääntämiselle, kannattaa ehkä lukea tämä opetusohjelma, jotta saat enemmän tietoa.
Kuvateksti 2: Siirrä se alas.
Toisaalta toinen otsikko siirtyy alaspäin. Joten meillä on positiivinen arvo kääntämiselle.
#mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); muunnos: translateY (100%);
Kuvateksti: 3: Fade in.
Kolmas otsikko on itse asiassa helpoin. Kun ruutu on paikallaan, kuvatekstin läpinäkyvyys muuttuu 1: ksi, jolloin se näkyy näkyvissä, ja koska olemme lisänneet siirtymisominaisuutta otsikkoluokassa, siirtymän pitäisi olla sujuvaa.
#mainwrapper .box: hover .fade-caption opasiteetti: 1;
Kuvateksti: Siirrä se vasemmalle.
Kuten aiemmin mainitsimme, tämä tekstitys liukuu vasemmalle, mutta kuva liukuu myös oikealle. Joten tässä meillä on 2 CSS-ilmoitusta.
Alla oleva CSS-koodi osoittaa, että kun siirrämme laatikon päälle, kuvateksti liukuu 100% leveydestään vasemmalle. Huomaa, että käytämme nyt translateX: ää, koska haluamme, että dia siirtyy vaakasuoraan oikealta vasemmalle.
#mainwrapper .box: hover .slide-caption taustaväri: rgba (0,0,0,1)! tärkeää; -moz-transform: translateX (-100%); -o-muunnos: translateX (-100%); -webkit-transform: translateX (-100%); opasiteetti: 1; muunnos: translateX (-100%);
Kun siirrämme laatikon päälle, kuva liukuu vasemmalle.
#mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-muunnos: translateX (-100%); -webkit-transform: translateX (-100%); muunnos: translateX (-100%);
Kuvateksti 5: Kierrä sitä.
Tämä kuvateksti eroaa muusta, koska se ei liiku oikealta tai vasemmalta, vaan pyörii. Kun ruutu on hover, kuva ja kuvateksti pyörivät -180 vastapäivään piilottamalla kuva ja näyttämällä kuvateksti.
/ ** Kierrä kuvateksti: hover Käyttäytyminen ** / #mainwrapper .box: hover .rotate taustaväri: rgba (0,0,0,1)! Tärkeää; -moz-transform: kiertää (-180deg); -o-transform: kiertää (-180deg); -webkit-transform: kiertää (-180deg); muunnos: kiertää (-180deg);
Kuvateksti 6: skaalaa se.
Tämä tekstitys yhdistää useita muunnosefektejä. Kun laatikko on päällä, kuva kohoaa 140% (1,4) alkuperäisestä ulottuvuudestaan.
#mainwrapper .box: hover # image-6 -moz-transform: mittakaava (1.4); -o-transform: mittakaava (1.4); -webkit-transform: mittakaava (1.4); muunnos: asteikko (1.4);
Ja jos näet CSS: n edellä Kuvateksti 6 Otsikko, olemme piilottaneet tekstin vasemmalle 200px. Tämä alla oleva CSS-koodi kertoo tekstin siirtyvän alkuasentoonsa. Teksti liu'utuu samanaikaisesti vasemmalta oikealle.
#mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); muunnos: translateX (200px);
- esittely
- Lataa lähde
Yhteenveto
Vaikka nämä CSS-ominaisuudet ovat viileitä, mutta se ei ole vielä laajasti sovellettavissa, koska aiemmin mainitsemat selaimen tukirajoitukset ovat. Kokeile kuitenkin edelleen näitä uusia ominaisuuksia, sillä tällä tavoin aiomme tulevaisuudessa muotoilla verkkosivun.
Laajuus
Opetusohjelman kuvien pikkukuvat otetaan seuraavista sivustoista (kuvakaappaus):
- Kirja-erä
- Archiduchesse
- Vlogi
- Hongkiat
- Tervehdystila
- Mark Ecko
