Úvodná » kódovanie » 6 Cool titulky obrázkov s CSS3

    6 Cool titulky obrázkov s CSS3

    CSS3 je naozaj výkonný. Kedysi to bolo, že potrebujeme obrázky alebo zväzok kódu JavaScript, aby sme dosiahli jednoduchý prechodný efekt. V súčasnosti môžeme urobiť to isté len s CSS3.

    V tejto príručke vám ukážeme, ako vytvoriť titulky s rôznymi prechodmi jednoducho pomocou CSS3.

    • demonštrácie
    • Stiahnuť zdroj

    Podpora prehliadača

    Tento popis bude veľmi závisieť od transformačných a prechodových vlastností, ktoré sú relatívne novými funkciami, takže by bolo rozumné vziať na vedomie podporu prehliadača potrebnú na bezproblémové spustenie nadpisu.

    Nasledujúce sú prehliadače, ktoré už podporujú transformáciu a prechod:

    • Internet Explorer 10+ (ešte neuvoľnené)
    • Firefox 6+
    • Chrome 13+
    • Safari 3.2+
    • Opera 11+

    Teraz začneme tutoriál.

    Štruktúra HTML

    Máme 6 obrázkov; každý obrázok s odlišným štýlom titulkov.

     
     
       
    Jednoduchý popis
          
      
       
    Celý popis
     
    Lorem ipsum dolor sedí amet, dôsledky adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
          
      
       
    Fade Caption
     
    Lorem ipsum dolor sedí amet, dôsledky adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
          
      
       
    Slide Caption
     
    Lorem ipsum dolor sedí amet, dôsledky adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
          
      
     
       
    Toto je otočenie titulku
     
    Lorem ipsum dolor sedí amet, dôsledky adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
          
     
      
       
    Voľný štýl titulu
     
    Lorem ipsum dolor sedí amet, dôsledky adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    Základné CSS

    Pred štýlom akéhokoľvek prvku je vždy dobré začať vynulovať všetky vlastnosti pomocou tohto obnovenia CSS a dať im ich predvolené hodnoty štýlu, takže všetky prehliadače budú robiť ten istý výsledok (s výnimkou IE6).

    Štýly budú oddelené v súbore style.css, takže náš súbor HTML bude vyzerať čisto. Nezabudnite však pridať štýl odkazu v hlavičke, aby ste mohli použiť pravidlá štýlu v súbore.

    OK, začnime štýl prvku, začínajúci značkou html a hlavným identifikátorom obálky:

     html farba pozadia: #eaeaea;  #mainwrapper font: 10pt normálne Arial, sans-serif; výška: auto; marža: 80 pixelov auto 0 auto; text-align: center; šírka: 660px;

    Štýl obrázkov

    V poliach obsahujúcich obrázky používame niektoré bežné štýly. Krabice sa budú zobrazovať vedľa seba, ak použijete plavák vľavo. Všimnite si, že sme pridali aj pretečenie: skrytá vlastnosť; to urobí všetky objekty vnútri tohto prechodu cez div skryté.

    Tiež deklarujeme prechodovú vlastnosť na každom obrázku vnútri poľa, v prípade, že budeme potrebovať prechod obrázkov neskôr.

     #mainwrapper .box border: 5px solid #fff; kurzor: ukazovateľ; výška: 182px; plavák: vľavo; okraj: 5px; pozícia: relatívna; pretečenie: skryté; šírka: 200px; -webkit-box-tieň: 1px 1px 1px 1px #ccc; -moz-box-tieň: 1px 1px 1px 1px #ccc; box-tieň: 1px 1px 1px 1px #ccc;  #mainwrapper .box img pozícia: absolútna; vľavo: 0; -webkit-transition: všetko 300ms uvoľnenie; -moz-transition: všetko 300ms uvoľnenie; -o-prechod: všetko 300 ms uvoľnenie; -ms-transition: všetko 300 ms uvoľnenie; prechod: všetky 300 ms uvoľnenie;

    Populárny štýl

    Nadpis bude mať niektoré bežné štýly a tiež prechodové vlastníctvo. Namiesto použitia opacity vlastnosti používame farebný režim RGBA s alfa kanálom 0,8, aby sme mali titulok trochu transparentný bez ovplyvnenia textu vo vnútri.

     #mainwrapper .box .caption farba pozadia: rgba (0,0,0,0,8); poloha: absolútna; farba: #fff; z-index: 100; -webkit-transition: všetko 300ms uvoľnenie; -moz-transition: všetko 300ms uvoľnenie; -o-prechod: všetko 300 ms uvoľnenie; -ms-transition: všetko 300 ms uvoľnenie; prechod: všetky 300 ms uvoľnenie; vľavo: 0;

    Nadpis 1

    Prvý titulok bude mať jednoduchý prechodový efekt, ktorý sa bežne používa na titulok. Titulok sa objaví zo spodu, keď na obrázku umiestnime kurzor myši. Ak to bude riešiť, bude mať titulky pevnú výšku 30 pixlov a použijeme jej spodnú pozíciu - 30 pixelov, aby sme ju skryli pod obrázok.

     #mainwrapper .box .simple-caption výška: 30px; šírka: 200px; zobrazenie: blok; spodná časť: -30px; line-height: 25pt; text-align: center;

    Caption 2

    Druhý typ má celú šírku a výšku rozmeru obrazu / poľa (200 x 200 pixlov) a prechod by bol ako efekt posuvných dverí, len aby sa posunul zhora nadol.

     #mainwrapper .box.full-caption šírka: 170px; výška: 170px; top: -200px; text-zarovnanie: vľavo; polstrovanie: 15px;

    Titulok 3

    Tretí titulok bude mať efekt vyblednutia. Preto sme pridali opacitu: 0 pre pôvodný stav.

     #mainwrapper .box .fade-caption, #mainwrapper .box.scale-caption opacita: 0; šírka: 170px; výška: 170px; text-zarovnanie: vľavo; polstrovanie: 15px;

    Titulok 4

    Štvrtý nadpis sa posunie zľava doprava, takže sme ako pôvodnú pozíciu opäť nastavili 200px doľava (vľavo: 200px).

     ** Titulok 4: Slide ** / #mainwrapper .box .slide-caption šírka: 170px; výška: 170px; text-zarovnanie: vľavo; polstrovanie: 15px; vľavo: 200px;

    Titulek 5

    Piaty titulok bude mať rotujúci efekt. Nie je to len titulok, ktorý sa bude otáčať, ale aj obrázok. Je to skôr zmena polohy otáčaním.

    Takže pridáme vlastnosť transformácie s rotačnou osou -180 stupňov, pokiaľ nechcete, aby sa váš monitor premenoval na titulok.

     #mainwrapper # box-5.box .rotit-caption šírka: 170px; výška: 170px; text-zarovnanie: vľavo; polstrovanie: 15px; top: 200px; -moz-transform: otočenie (-180deg); -o-transformácia: otočenie (-180deg); -webkit-transform: rotácia (-180deg); transformácia: otočenie (-180deg);  #mainwrapper .box .rok šírka: 200px; výška: 400px; -webkit-transition: všetko 300ms uvoľnenie; -moz-transition: všetko 300ms uvoľnenie; -o-prechod: všetko 300 ms uvoľnenie; -ms-transition: všetko 300 ms uvoľnenie; prechod: všetky 300 ms uvoľnenie;

    Titulek 6

    Posledný nadpis bude mať transformáciu stupnice. V predchádzajúcich nadpisoch sa však text v ňom skutočne zobrazuje spolu s posunom prechodu .caption. V tejto časti to urobíme trochu inak.

    Po skončení prechodu na zmeny sa zobrazí text. Preto pridáme prechodové oneskorenie na text, v tomto prípade tagy h3 a p.

     #mainwrapper .box.scale-caption h3, #mainwrapper .box.scale-caption p pozícia: relatívna; vľavo: -200px; šírka: 170px; -webkit-transition: všetko 300ms uvoľnenie; -moz-transition: všetko 300ms uvoľnenie; -o-prechod: všetko 300 ms uvoľnenie; -ms-transition: všetko 300 ms uvoľnenie; prechod: všetky 300 ms uvoľnenie;  #mainwrapper .box.scale-caption h3 -webkit-delay-transition: 300ms; -moz-transition-delay: 300ms; oneskorenie prechodu: 300 ms; -ms-prechod-delay: 300ms; oneskorenie prechodu: 300 ms;  #mainwrapper .box.scale-caption p -webkit-prechod-oneskorenie: 500ms; -moz-transition-delay-delay: 500ms; oneskorenie prenosu: 500 ms; -ms-prechod-delay: 500ms; oneskorenie prechodu: 500 ms;

    Poďme ich presunúť

    V nasledujúcej časti budeme definovať správanie nadpisu, keď umiestnime kurzor nad obrázky alebo políčka.

    Správanie nadpisu 1: Zobraziť.

    Pri prvom titule by sme chceli, aby sa zobrazila (od spodnej časti), keď sa vznášame nad rámčekom. Na riešenie tohto kroku používame vlastnosť transformácie a nižšie uvedený kód CSS hovorí, že sa má presunúť 100% jeho hmotnosti na vrchol.

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

    Ak nemáte dostatok zápornej hodnoty pre preklad, možno budete chcieť najprv prečítať tento návod, aby ste získali viac informácií.

    Správanie nadpisu 2: Presuňte ho nadol.

    Naopak, druhý titulok sa posunie zhora nadol. Takže budeme mať pozitívnu hodnotu pre preklady.

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

    Správanie nadpisu 3: Vyblednite.

    Tretí titulok je v skutočnosti najjednoduchší. Keď je pole na ukazovateli, opacita na titulok sa zmení na hodnotu 1, ktorá je viditeľná a keďže sme pridali prechodovú vlastnosť do triedy titulkov, prechod by mal bežať hladko.

     #mainwrapper .box: hover .fade-caption neprístupnosť: 1;

    Bežné správanie 4: posuňte ho doľava.

    Ako sme už spomenuli, tento titulok sa posunie z ľavej strany, ale obrázok sa tiež posunie doprava. Takže tu máme 2 deklarácie CSS.

    Nižšie uvedený kód služby CSS naznačuje, že keď umiestnime kurzor nad rámčekom, titulok posunie 100% jeho šírky doľava. Všimnite si, že teraz používame translateX, pretože chceme, aby sa snímka pohybovala vodorovne zľava.

     #mainwrapper .box: hover .slide-caption farba pozadia: rgba (0,0,0,1)! dôležité; -moz-transformácia: translateX (-100%); -o-transformácia: translateX (-100%); -webkit-transform: translateX (-100%); opacita: 1; transformácia: translateX (-100%);

    Keď posunieme kurzor nad rámček, obrázok sa vysunie smerom doľava.

     #mainwrapper .box: podržte img # image-4 -moz-transform: translateX (-100%); -o-transformácia: translateX (-100%); -webkit-transform: translateX (-100%); transformácia: translateX (-100%);

    Znak správania 5: Otočte ho.

    Tento titulok sa líši od zvyšku, pretože sa nebude pohybovať z pravej ani ľavej strany, ale bude sa otáčať. Keď je krabica na ukazovateli, div, ktorý obsahuje obrázok a titulok, sa bude otáčať -180 proti smeru hodinových ručičiek, skrývajúci obrázok a zobrazí titulok.

     / ** Otočiť nadpis: Hover správanie ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! Dôležité; -moz-transform: otočenie (-180deg); -o-transformácia: otočenie (-180deg); -webkit-transform: rotácia (-180deg); transformácia: otočenie (-180deg);

    Správanie nadpisu 6: Zvýšenie mierky.

    Tento popis bude kombinovať niekoľko efektov transformácie. Keď je krabica na ukazovateli, obrázok sa zvýši o 140% (1,4) z pôvodného rozmeru.

     #mainwrapper .box: pohybovať # image-6 -moz-transform: scale (1.4); -o-transformácia: mierka (1.4); -webkit-transform: stupnica (1.4); transformácia: mierka (1.4);

    A ak ste videli CSS vyššie pod Titulek 6 hlava, skryli sme text vľavo o 200 pixlov. Tento kód CSS nižšie hovorí, že sa text presunie do pôvodnej pozície. Takže text sa bude posúvať zľava doprava súčasne.

     #mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover.scale-caption p -moz-transform: translateX (200px); -o-transformácia: translateX (200px); -webkit-transform: translateX (200px); transformovať: translateX (200px);
    • demonštrácie
    • Stiahnuť zdroj

    zhrnutie

    Aj keď sú tieto funkcie CSS v pohode, ale zatiaľ nie sú platné, kvôli obmedzeniam podpory prehliadača, ktoré sme už spomenuli. Pokračujte v experimentovaní s týmito novými funkciami, pretože takto budeme v budúcnosti formovať webovú stránku.

    Credits

    Miniatúry obrázkov v príručke sú prevzaté z nasledujúcich webových stránok (screenshot):

    • Kniha Apart
    • Archiduchesse
    • vlog
    • Hongkiat
    • Pozdravová farma
    • Mark Ecko
    6 Základné (ale nudné) úlohy Nezávislí frekventanti Nenávisť robiť
    6 Vzrušujúce ponuky Black Friday pre dizajnérov
    6 Najlepšie dvojfaktorové overenie WordPress Plugins [Recenzované]
    Ďalší článok
    6 CSS triky na zarovnanie obsahu vertikálne
    Predchádzajúci článok
    6 najlepších spôsobov, ako odoslať veľké súbory online