Domača » Kodiranje » 6 Posnemite napise s sliko CSS3

    6 Posnemite napise s sliko CSS3

    CSS3 je resnično zmogljiv. Včasih smo potrebovali slike ali kup JavaScript kode, da bi naredili preprost učinek prehoda. Danes lahko to storimo tudi s samo CSS3.

    V tem vodiču vam bomo pokazali, kako ustvariti podobe z različnimi prehodi, preprosto z uporabo CSS3.

    • Demo
    • Vir prenosa

    Podpora za brskalnik

    Ta napis bo precej odvisen od lastnosti transformacije in prehoda, ki so relativno nove funkcije, zato bi bilo pametno upoštevati podporo brskalnika, ki je potrebna za gladko izvajanje opisa..

    To so brskalniki, ki že podpirajo preoblikovanje in prehod:

    • Internet Explorer 10+ (še ni izdan)
    • Firefox 6+
    • Chrome 13+
    • Safari 3.2+
    • Opera 11+

    Zdaj pa začnimo z vadnico.

    Struktura HTML

    Imamo 6 slik; vsako sliko z drugačnim slogom napisa.

     
     
       
    Preprost napis
          
      
       
    Polni napis
     
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt v laoreet dolore magna aliquam erat volutpat.
          
      
       
    Fade Caption
     
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt v laoreet dolore magna aliquam erat volutpat.
          
      
       
    Slide Caption
     
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt v laoreet dolore magna aliquam erat volutpat.
          
      
     
       
    To je rotacijski napis
     
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt v laoreet dolore magna aliquam erat volutpat.
          
     
      
       
    Free Style Caption
     
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt v laoreet dolore magna aliquam erat volutpat.

    Osnovni CSS

    Pred oblikovanjem katerega koli elementa je vedno dobro začeti ponastaviti vse lastnosti, ki uporabljajo to ponastavitev CSS, in jim dati privzete vrednosti slogov, tako da bodo vsi brskalniki prikazali isti rezultat (razen morda, IE6).

    Slogi bodo ločeni v datoteki style.css, zato bo naša HTML datoteka videti čedna. Vendar ne pozabite dodati sloga povezave znotraj oznake glave, da uporabite pravila za oblikovanje v datoteki.

    V redu, začnimo s stylingom elementa, začenši z oznako html in glavnim identifikatorjem ovojnice:

     html barva ozadja: #eaeaea;  #mainwrapper font: 10pt normalno Arial, sans-serif; višina: avto; margin: 80px auto 0 auto; text-align: center; širina: 660px;

    Slog okvirčka slike

    V poljih, ki vsebujejo slike, uporabimo nekatere skupne sloge. Polja bodo prikazana drug ob drugem z uporabo levega plovca. Opazili smo, da smo dodali tudi prelivanje: skrita lastnost; to bo omogočilo, da bodo vsi predmeti, ki so v notranjosti, prešli skozi div, da bodo skriti.

    Prav tako razglasimo prehodno lastnost na vsaki sliki v polju, če bomo pozneje potrebovali prehod slike.

     #mainwrapper .box border: 5px solid #fff; kazalec: kazalec; višina: 182px; plovec: levo; margin: 5px; položaj: relativna; overflow: hidden; širina: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc;  #mainwrapper .box img position: absolute; levo: 0; -webkit-prehod: vsi 300ms se izklopijo; -moz-prehod: vsi 300 ms lahka; -o-prehod: vsi 300ms se lahko sprostijo; -ms-prehod: vsi 300-ih se zlahka izvlečejo; prehod: vsi 300 ms lahka;

    Caption Common Style

    Naslov ima nekaj skupnih stilov in tudi lastnost prehoda. Namesto uporabe lastnosti motnosti uporabljamo barvni način RGBA z 0,8 za alfa kanal, da postane napis videti nekoliko pregleden brez vpliva na besedilo znotraj..

     #mainwrapper .box .caption barva ozadja: rgba (0,0,0,0,8); položaj: absolutno; barva: #fff; z-indeks: 100; -webkit-prehod: vsi 300ms se izklopijo; -moz-prehod: vsi 300 ms lahka; -o-prehod: vsi 300ms se lahko sprostijo; -ms-prehod: vsi 300-ih se zlahka izvlečejo; prehod: vsi 300 ms lahka; levo: 0;

    Naslov 1

    Prvi napis bo imel preprost učinek prehoda, ki se običajno uporablja za napis. Naslov se bo prikazal od spodaj, ko se bomo premikali nad sliko. Naslov bo imel naslovno višino 30 px in bomo uporabili njen spodnji položaj - 30 px, da ga skrijemo pod sliko.

     #mainwrapper .box .simple-caption višina: 30px; širina: 200px; prikaz: blok; spodaj: -30px; line-height: 25pt; text-align: center;

    Naslov 2

    Drugi tip ima polno širino in višino dimenzije slike / škatle (200x200px), prehod pa bi bil podoben učinku drsnih vrat samo, da se bo premaknil od zgoraj navzdol..

     #mainwrapper .box .full-caption width: 170px; višina: 170px; vrh: -200px; poravnava besedila: levo; oblazinjenje: 15px;

    Napis 3

    Tretji napis ima učinek bledenja. Torej smo dodali motnost: 0 za njeno začetno stanje.

     #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; širina: 170px; višina: 170px; poravnava besedila: levo; oblazinjenje: 15px;

    Naslov 4

    Četrti napis se bo pomaknil z leve na desno, zato smo 200px na levo (levo: 200px) določili kot začetni položaj.

     Napis 4: Slide ** / #mainwrapper .box .slide-caption width: 170px; višina: 170px; poravnava besedila: levo; oblazinjenje: 15px; levo: 200px;

    Naslov 5

    Peti naslov bo imel rotacijski učinek. Ne bo samo rotacija, ampak tudi podoba. To je bolj kot spreminjanje položaja z vrtenjem.

    Torej dodamo lastnost transformacije z rotacijo -180 stopinj, razen če raje spreminjate monitor, da bi prebral napis.

     #mainwrapper # box-5.box .rotate-caption width: 170px; višina: 170px; poravnava besedila: levo; oblazinjenje: 15px; vrh: 200px; -moz-transform: vrtenje (-180deg); -o-transform: vrtenje (-180deg); -webkit-transform: rotate (-180deg); transform: rotate (-180deg);  #mainwrapper .box .rotate širina: 200px; višina: 400px; -webkit-prehod: vsi 300ms se izklopijo; -moz-prehod: vsi 300 ms lahka; -o-prehod: vsi 300ms se lahko sprostijo; -ms-prehod: vsi 300-ih se zlahka izvlečejo; prehod: vsi 300 ms lahka;

    Naslov 6

    Zadnji napis bo spremenil velikost. Toda v prejšnjih napisih se bo besedilo znotraj njega dejansko prikazalo skupaj s prehodom za prehod .caption. V tem razdelku bomo naredili nekaj drugačnega.

    Besedilo se bo pojavilo po prehodu. Torej na besedilo dodamo zakasnitev prehoda, v tem primeru oznako h3 in p.

     #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relative; levo: -200px; širina: 170px; -webkit-prehod: vsi 300ms se izklopijo; -moz-prehod: vsi 300 ms lahka; -o-prehod: vsi 300ms se lahko sprostijo; -ms-prehod: vsi 300-ih se zlahka izvlečejo; prehod: vsi 300 ms lahka;  #mainwrapper .box .scale-caption h3 -webkit-transition-delay: 300ms; -moz-prehod-zakasnitev: 300ms; -o-zamik pri prehodu: 300ms; -ms-prehod-zakasnitev: 300ms; zakasnitev prehoda: 300ms;  #mainwrapper .box .scale-caption p -webkit-prehod-zakasnitev: 500ms; -moz-prehod-zakasnitev: 500ms; -o-zamik pri prehodu: 500ms; -ms-zamik pri prehodu: 500ms; zamuda pri prehodu: 500ms;

    Naj se premaknemo

    V naslednjem razdelku bomo opredelili obnašanje naslova, ko se premikamo nad slike ali polja.

    Caption Behavior 1: Pokaži.

    Za prvi napis bi želeli, da se prikaže (od spodaj), ko se premikamo nad polje. Za obravnavo te poteze uporabljamo lastnost transformacije in spodnja koda CSS pove naslovu, da se 100% teže premakne na vrh.

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

    Če ne dobite smisla za negativno vrednost za translateY, boste morda želeli najprej prebrati ta vodič, da boste dobili več vpogleda..

    Caption Behavior 2: Premakni navzdol.

    Nasprotno pa se bo drugi naslov pomaknil z vrha. Torej bomo imeli pozitivno vrednost za translateY.

     #mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); transform: translateY (100%);

    Caption Behavior 3: Obnašanje 3: Fade in.

    Tretji napis je pravzaprav najlažji. Ko je polje obrnjeno, se nepreglednost napisov obrne na 1, zaradi česar je vidna, in ker smo v razredu napisa dodali prehodno lastnost, bi moral prehod potekati gladko..

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

    Caption Behavior (Obnašanje naslova) 4: potisnite ga v levo.

    Kot smo že omenili, bo ta napis zdrsel iz leve, vendar bo slika tudi zdrsnila v desno. Torej, tukaj imamo 2 CSS deklaraciji.

    Spodnja koda CSS označuje, da bo ob preklopu miške nad polje napis podal 100% širine na levo. Opazimo, da sedaj uporabljamo translateX, ker želimo, da se drsnik premika vodoravno od desne proti levi.

     #mainwrapper .box: hover .slide-caption background-color: rgba (0,0,0,1)! -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); motnost: 1; transform: translateX (-100%);

    Ko lebdimo nad polje, se bo slika zdrsnila v levo.

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

    Caption Behavior 5: Obračanje.

    Ta napis se razlikuje od ostalih, saj se ne bo premaknil z desne ali leve, ampak se bo vrtelo. Ko je polje obrnjeno na lebdenje, se bo div, ki vsebuje sliko in napis, obrnil -180 v nasprotni smeri urinega kazalca in skril sliko ter prikazal napis.

     / ** Rotate Caption: hover Obnašanje ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! Important; -moz-transform: vrtenje (-180deg); -o-transform: vrtenje (-180deg); -webkit-transform: rotate (-180deg); transform: rotate (-180deg);

    Caption Behavior (Obnašanje napisov) 6: Povečajte.

    Ta napis vsebuje več učinkov transformacije. Ko je polje obrnjeno, se bo slika povečala za 140% (1.4) od začetne dimenzije.

     #mainwrapper .box: hover # image-6 -moz-transform: lestvica (1.4); -o-transform: lestvica (1.4); -webkit-transform: lestvica (1.4); transformacija: lestvica (1.4);

    In če ste videli CSS zgoraj pod Naslov 6 naslov, smo besedilo skrili v levo za 200 px. Spodnja koda CSS sporoča besedilu, naj se premakne na začetno mesto. Torej bo besedilo hkrati potisnilo od leve proti desni.

     #mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); transform: translateX (200px);
    • Demo
    • Vir prenosa

    Povzetek

    Čeprav so te funkcije CSS kul, vendar še ni široko uporaben, zaradi omejitev podpore brskalniku, ki smo jih omenili prej. Vendar pa še naprej eksperimentirajte s temi novimi funkcijami, saj bomo tako v prihodnje oblikovali spletno stran.

    Krediti

    Sličice slik v vadnici so vzete iz naslednjih spletnih mest (posnetek zaslona):

    • Knjiga poleg
    • Archiduchesse
    • Vlog
    • Hongkiat
    • Pozdravna kmetija
    • Mark Ecko
    6 Bistvena (vendar dolgočasna) naloga samostojnih izvajalcev Hate Doing
    6 Razburljivi Black Friday Deals za oblikovalce
    6 najboljših dveh faktorjev za preverjanje pristnosti
    Naslednji članek
    6 Triki CSS za poravnavo vsebine navpično
    Prejšnji članek
    6 najboljših načinov za pošiljanje velikih datotek na spletu