6 subtitrari de imagini cool cu CSS3
CSS3 este foarte puternic. Obișnuia să fie că avem nevoie de imagini sau de o grămadă de coduri JavaScript pentru a face un simplu efect de tranziție. În prezent, putem face același lucru doar cu CSS3.
În acest tutorial, vă vom arăta cum să creați subtitrări de imagini cu diverse tranziții folosind pur și simplu CSS3.
- Demo
- Descărcați sursa
Suport pentru browser
Această subtitrare va fi mult dependentă de proprietățile de transformare și de tranziție, care sunt caracteristici relativ noi, așadar, ar fi înțelept să luați notă de sprijinul browserului necesar pentru a rula linia legendă.
Următoarele sunt browserele care acceptă deja transformarea și tranziția:
- Internet Explorer 10+ (încă nu a fost lansat)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Acum, să începem tutorialul.
Structura HTML
Avem 6 imagini; fiecare imagine cu un stil de legendă diferit.
Simpla capțiune
Subtitrare completă
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Subtitrare Fade
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Slide Caption
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Aceasta este rotirea legendei
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Subtitrare gratuită
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
CSS de bază
Înainte de a modela orice element, este întotdeauna un început bun pentru a reseta toate proprietățile utilizând această resetare CSS și pentru a le oferi valorile implicite ale stilului, astfel încât toate browserele să producă același rezultat (cu excepția poate, IE6).
Stilurile vor fi separate în fișierul style.css, astfel că fișierul nostru HTML va arăta perfect. Cu toate acestea, nu uitați să adăugați un stil de legătură în interiorul etichetei capului pentru a aplica regulile de stil în fișier.
OK, să începem să styling elementul, pornind de la eticheta html și id-ul wrapper principal:
html background-color: #eaeaea; #mainwrapper font: 10pt normal Arial, sans-serif; înălțime: auto; margine: 80px auto 0 auto; text-align: centru; lățime: 660px;
Stilul cutie de imagini
Aplicăm câteva stiluri comune în casetele care conțin imaginile. Cutiile vor fi afișate una lângă cealaltă, folosind float left. Observați că am adăugat, de asemenea, overflow: proprietatea ascunsă; acest lucru va face ca toate obiectele din interiorul acelei treceri prin div să fie ascunse.
De asemenea, declarăm proprietatea de tranziție pentru fiecare imagine din interiorul casetei, în cazul în care avem nevoie de tranziția imaginii mai târziu.
#mainwrapper .box border: 5px solid #fff; cursor: pointer; înălțime: 182px; plutește la stânga; margine: 5 pixeli; poziția: relativă; overflow: ascuns; lățime: 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 poziție: absolut; stânga: 0; -webkit-tranziție: toate 300ms ușurință-out; -moz-tranziție: toate cele 300 de măriți; -o-tranziție: toate cele 300 de metri de ușurință; -ms-tranziție: toate 300ms ușurință-out; tranziție: toate cele 300 de minute de relaxare;
Caption Common Style
Titlul va avea câteva stiluri comune și proprietăți de tranziție. Mai degrabă decât să folosim proprietatea de opacitate, folosim modul de culoare RGBA cu 0,8 pentru canalul alfa pentru a face ca legenda să pară puțin transparentă fără a afecta textul interior.
#mainwrapper .box .caption fundal-culoare: rgba (0,0,0,0,8); poziția: absolută; culoare: #fff; z-index: 100; -webkit-tranziție: toate 300ms ușurință-out; -moz-tranziție: toate cele 300 de măriți; -o-tranziție: toate cele 300 de metri de ușurință; -ms-tranziție: toate 300ms ușurință-out; tranziție: toate cele 300 de minute de relaxare; stânga: 0;
Cap. 1
Prima subtitrare va avea un simplu efect de tranziție care este folosit în mod obișnuit pentru o subtitrare. Titlul va apărea din partea de jos când vom trece peste imagine. Pentru ao aborda, legenda va avea o înălțime fixă de 30 de pixeli și vom aplica poziția sa de jos -30px pentru a o ascunde sub imagine.
#mainwrapper .box. simplu-caption height: 30px; lățime: 200px; afișare: bloc; fund: -30px; linie înălțime: 25pt; text-align: centru;
Cap. 2
Cel de-al doilea tip are lățimea și înălțimea totală a dimensiunii imaginii / cutiei (200x200px), iar tranziția ar fi ca un efect de ușă glisantă, numai că va aluneca de sus în jos.
#mainwrapper .box .full-caption lățime: 170px; înălțime: 170px; top: -200px; text-aliniere: stânga; padding: 15px;
Cap. 3
A treia legendă va avea efect de estompare. Deci, am adăugat opacitatea: 0 pentru starea sa inițială.
#mainwrapper .box .fade-caption, #mainwrapper .box.scale-caption opacitate: 0; lățime: 170px; înălțime: 170px; text-aliniere: stânga; padding: 15px;
Cap. 4
A patra legendă va aluneca de la stânga la dreapta, așa că am fixat 200px la stânga (la stânga: 200px) ca poziție inițială.
** Titlu 4: Slide ** / #mainwrapper .box .slide-caption lățime: 170px; înălțime: 170px; text-aliniere: stânga; padding: 15px; stânga: 200px;
Legendă 5
Cea de-a cincea capțiune va avea efect rotativ. Nu este doar legenda care se va roti, ci și imaginea. Este mai mult ca schimbarea poziției prin rotire.
Așadar, adăugăm proprietatea de transformare cu o rotație de -180 grade, cu excepția cazului în care preferați să rotiți monitorul pentru a citi titlul.
#mainwrapper #box-5.box .roată-capțiune lățime: 170px; înălțime: 170px; text-aliniere: stânga; padding: 15px; top: 200px; -moz-transform: roti (-180deg); -o-transform: roti (-180deg); -webkit-transform: roti (-180deg); transforma: roti (-180deg); #mainwrapper .box .roată lățime: 200px; înălțime: 400px; -webkit-tranziție: toate 300ms ușurință-out; -moz-tranziție: toate cele 300 de măriți; -o-tranziție: toate cele 300 de metri de ușurință; -ms-tranziție: toate 300ms ușurință-out; tranziție: toate cele 300 de minute de relaxare;
Legendă 6
Ultima legendă va avea o transformare a scalei. Cu toate acestea, în subtitrările anterioare, textul din interiorul acestuia va apărea împreună cu trecerea de tranziție .caption. În această secțiune vom face un pic diferit.
Textul va apărea după terminarea tranziției. Deci, adăugăm întârzierea de tranziție asupra textului, în acest caz eticheta h3 și p.
#mainwrapper .box .scale-caption h3, #mainwrapper .box.scale-caption p poziție: relativă; stânga: -200px; lățime: 170px; -webkit-tranziție: toate 300ms ușurință-out; -moz-tranziție: toate cele 300 de măriți; -o-tranziție: toate cele 300 de metri de ușurință; -ms-tranziție: toate 300ms ușurință-out; tranziție: toate cele 300 de minute de relaxare; #mainwrapper .box .scale-caption h3 -webkit-tranziție-întârziere: 300ms; -moz-tranziție-întârziere: 300ms; -o-tranziție-întârziere: 300ms; -ms-tranziție-întârziere: 300ms; tranziție-întârziere: 300ms; #mainwrapper .box .scale-caption p -webkit-tranziție-întârziere: 500ms; -moz-tranziție-întârziere: 500ms; -o-tranziție-întârziere: 500ms; -ms-tranziție-întârziere: 500ms; tranziție-întârziere: 500ms;
Să-i facem să se miște
În următoarea secțiune, vom defini comportamentul legendei atunci când vom trece peste imaginile sau casetele.
Caption Behavior 1: Afișați.
Pentru prima subtitrare, ne-ar plăcea să apară (din partea de jos) atunci când vom trece peste cutie. Pentru a aborda această mișcare, folosim proprietatea transformă, iar codul CSS de mai jos îi spune legendei să își mute 100% din greutatea sa în sus.
#mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); transformare: traducere (-100%);
Dacă nu obțineți punctul de a avea valoare negativă pentru traducere, este posibil să doriți să citiți mai întâi acest tutorial pentru a obține mai multă înțelegere.
Caption Behavior 2: Deplasați-l în jos.
În schimb, a doua legendă se va muta din partea de sus. Deci, vom avea o valoare pozitivă pentru traducere.
#mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transform: traducere (100%); -webkit-transform: traducere (100%); transformare: traducere (100%);
Caption Behavior 3: Fade in.
A treia legendă este de fapt cea mai ușoară. Atunci când caseta se află pe hover, opacitatea legendei se va transforma la 1 făcând-o vizibilă și, din moment ce am adăugat proprietatea de tranziție în clasa de legendă, trecerea ar trebui să se desfășoare fără probleme.
#mainwrapper .box: hover .fade-caption opacitate: 1;
Caption Behavior 4: Glisați-l spre stânga.
După cum am menționat mai devreme, această subtitrare va aluneca din stânga, cu toate acestea, imaginea va dispărea și spre dreapta. Deci, aici avem 2 declarații CSS.
Codul CSS de mai jos indică faptul că atunci când plasăm cursorul peste casetă, legenda va alinia la stânga 100% din lățimea sa. Observați că acum folosim translateX, deoarece dorim ca diapozitivul să se miște orizontal de la dreapta la stânga.
#mainwrapper .box: hover .slide-caption background-color: rgba (0,0,0,1) important; -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); opacitate: 1; transformare: translateX (-100%);
Când plasăm cursorul peste cutie, imaginea va aluneca spre stânga.
#mainwrapper .box: plasați img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); transformare: translateX (-100%);
Caption Behavior 5: Rotiți-l.
Această subtitrare este diferită de restul, deoarece nu se va mișca din dreapta sau din stânga, ci se va roti. Atunci când cutia este pe hover, Div conținând imaginea și legenda se va roti -180 în sens invers acelor de ceasornic ascunzând imaginea și afișând legenda.
/ ** Rotire Subtitrare: hover Comportament ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1) important; -moz-transform: roti (-180deg); -o-transform: roti (-180deg); -webkit-transform: roti (-180deg); transforma: roti (-180deg);
Caption Behavior 6: Scale it up.
Această legendă va combina mai multe efecte de transformare. Atunci când cutia este pe hover, imaginea va crește până la 140% (1,4) față de dimensiunea inițială.
#mainwrapper .box: hover # imagine-6 -moz-transform: scară (1.4); -o-transform: scara (1.4); -webkit-transform: scara (1.4); transformare: scară (1,4);
Și dacă ați văzut CSS de mai sus Legendă 6 , am ascuns textul la stânga cu 200px. Acest cod CSS de mai jos spune textului să se mute în poziția inițială. Deci, textul va aluneca de la stânga la dreapta simultan.
#mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); transformare: translateX (200px);
- Demo
- Descărcați sursa
rezumat
Deși aceste caracteristici CSS sunt reci, dar nu sunt încă aplicabile pe scară largă, datorită limitărilor privind asistența în browser pe care le-am menționat mai devreme. Cu toate acestea, continuați să experimenteze aceste noi caracteristici, deoarece acesta este modul în care vom modela o pagină web în viitor.
credite
Miniaturile imaginilor din tutorial sunt preluate din următoarele site-uri (screenshot):
- O carte în apartament
- Archiduchesse
- vlog
- Hongkiat
- Ferma de salut
- Mark Ecko
