Cum se creează un banner animat folosind CSS3. Bannere responsive în HTML5 și CSS3 Creați cu ușurință bannere în css3

Pentru a înțelege structura marcajului nostru, să ne concentrăm pentru o secundă asupra navei:

>

>
>
>
Acum, să aruncăm o privire la primul banner de pe pagina demo. Există trei animații separate care au loc pe navă:
• Animație - când barca alunecă spre stânga. Acest lucru se aplică direct unei liste neordonate (un grup de articole de barcă).
• Animație – care dă bărcii un efect de balansare, simulând o barcă care plutește pe apă. Acest lucru se aplică direct articolelor din listă (barca).
• Animație - care ascunde semnul întrebării. Acest lucru se aplică div. (semnul de întrebare).
Dacă nu vă este rău de mare, atunci aruncați o altă privire pe pagina demo. Veți vedea că animația care este aplicată elementului din listă (barcă), care provoacă ridicarea bărcii, afectează și DIV din interiorul acesteia (cu un semn de întrebare). În plus, animația „alunecare” care este aplicată listei neordonate (grupului) afectează și elementul din listă și DIV-urile din interiorul acestuia (barca și semnul întrebării). Acest lucru ne aduce la observații importante:
Elementele copil moștenesc animația de la părinți, pe lângă propria animație. Aceste cunoștințe au fost adăugate la arsenalul nostru, dar numărul de copii/părinți atunci când creați o animație vă va răvăși (și procesorul de pe laptopul bunicii)!
CSS
Înainte de a intra în lucrurile cu adevărat interesante și de a începe să creăm animații, mai trebuie să creăm stiluri pentru browsere care sunt blocate în secolul al XVIII-lea.
Stiluri de rezervă pentru browserele mai vechi

Vom crea doar stiluri de rezervă ca și cum animația CSS nu ar exista (gândul că animația CSS nu există va face pe orice adult nu numai să plângă, dar să stea lângă mine :)). Cu alte cuvinte, dacă animația noastră nu reușește să fie redată, bannerul ar trebui să arate în continuare decent. În acest fel, când cineva vede un banner folosind un browser vechi, va vedea un banner normal, static în loc de spațiu gol.
De exemplu: dacă cineva folosește CSS astfel, vor apărea probleme:
/* DIRECȚIA GREȘITĂ! * /

0% (opacitate: 0;)
100% (opacitate: 1;)
}
Div (
opacitate: 0; / * Acest bloc este ascuns în mod implicit! * /

}
Dacă browserul utilizatorului nu acceptă animația, bannerul va rămâne invizibil pentru acesta. Și atunci clientul va sparge ușa din biroul vânzătorului - cu un ferăstrău în mână - și va cere să-i explice de ce nu i-a vândut marfa! Și dacă nu reușesc să înțeleagă că browserul poate fi atât de mizerabil, viața lor se va termina îngrozitor, iar ultimele lor cuvinte vor fi blesteme împotriva Internet Explorer... :)
Dar nu vă faceți griji, vă vom oferi asistență avansată pentru browser:
/* CALEA CEA BUNA */
@keyframe fade-in-animația noastră (
0% (opacitate: 0;)
100% (opacitate: 1;)
}
Div (
opacitate: 1; / * acest div va fi vizibil implicit * /
animație: our-fade-in-animation 1s 1;
}
După cum puteți vedea, DIV se va afișa chiar dacă animația nu reușește să fie redată. Dacă animația este redabilă, atunci DIV va fi ascuns imediat și animația se va reda până la sfârșit.
Acum că știm cum să facem ca bannerele noastre animate să accepte browsere mai vechi, să trecem la câteva CSS de bază.
Există trei lucruri cheie de reținut:
• Deoarece aceste reclame pot fi folosite pe diferite site-uri web, vom face toate stilurile noastre CSS foarte specifice... Vom începe prin a declara fiecare selector cu id: # ad-1. Acest lucru va împiedica stilurile noastre de banner să interfereze cu stilurile și elementele existente.
• Vom fi intenționați ignorați caracteristica de întârziere a animației atunci când ne creăm animația. Dacă ar fi să folosim funcția de întârziere a animației, precum și să ne proiectăm elementele în mod corect (vizibil în mod implicit), totul ar fi vizibil pe ecran înainte ca animația să înceapă în sfârșit redarea. Acesta este motivul pentru care animația începe imediat, ceea ce ne permite să ascundem elemente de pe ecran până când avem nevoie de ele. Vom simula întârzierea animației prin creșterea duratei și ajustarea manuală a cadrelor cheie. Veți vedea exemple în acest sens când vom începe să creăm animații.
• Daca este posibil, utilizați o animație pentru mai multe elemente... În acest fel, putem economisi mult timp și reduce extinderea codului. Puteți crea mai multe efecte diferite în aceeași animație ajustând durata și tranzițiile.
Deci, vom începe să creăm reclamele noastre banner. Să ne asigurăm că este poziționat relativ (poziție: relativ) astfel încât elementele din interiorul acestuia să poată fi poziționate corect. De asemenea, trebuie să ne asigurăm că overflow: proprietatea ascunsă este setată pentru a ascunde orice lucruri inutile:
# ad-1 (
latime: 720px;
înălțime: 300px;
plutește la stânga;
marjă: 40px auto 0;
imagine de fundal: url (../images/ad-1/background.png);
fundal-poziție: centru;
background-repeat: fără repetare;
preaplin: ascuns;
poziție: relativă;
casetă-umbră: 0px 0px 6px # 000;
}
# ad-1 #conținut (
lățime: 325px;
plutire: dreapta;
marja: 40px;
text-align: centru;
indicele z: 4;
poziție: relativă;
preaplin: vizibil;
}
# ad-1 h2 (
font-family: „Alfa Slab One”, cursiv;
culoare: # 137dd5;
dimensiunea fontului: 50px;
înălțimea liniei: 50px;

animație: delayed-fade-animation 7s 1 ease-in-out; / * H2 se va estompa cu întârziere simulată a animației * /
}
# ad-1 h3 (

culoare: # 202224;
dimensiunea fontului: 31px;
înălțimea liniei: 31px;
text-shadow: 0px 0px 4px #fff;
animație: delayed-fade-animation 10s 1 ease-in-out; / * H3 se va estompa cu întârziere simulată a animației * /
}
# formular ad-1 (
marjă: 30px 0 0 6px;
poziție: relativă;
animație: form-animation 12s 1 ease-in-out; / * Acest cod mută formularul nostru de e-mail * /
}
# ad-1 #email (
latime: 158px;
înălțime: 48px;
plutește la stânga;
umplutură: 0 20px;
dimensiunea fontului: 16px;
familia de fonturi: "Lucida Grande", sans-serif;
culoare: #fff;
text-shadow: 1px 1px 0px # a2917d;
chenar-sus-stânga-rază: 5px;
raza-chenar-jos-stânga: 5px;
chenar: 1px solid # a2917d;
contur: niciunul;
box-shadow: -1px -1px 1px #fff;
culoare de fundal: # c7b29b;
imagine de fundal: gradient liniar (jos, rgb (216, 201, 185) 0%, rgb (199, 178, 155) 100%);
}
# ad-1 #email: focus (
imagine de fundal: gradient liniar (jos, rgb (199, 178, 155) 0%, rgb (199, 178, 155) 100%);
}
# ad-1 #trimitere (
înălțime: 50px;
plutește la stânga;
cursor: pointer;
umplutură: 0 20px;
dimensiunea fontului: 20px;
font-family: „Boogaloo”, cursiv;
culoare: # 137dd5;
text-shadow: 1px 1px 0px #fff;
chenar-sus-dreapta-rază: 5px;
raza-chenar-jos-dreapta: 5px;
chenar: 1px solid # bcc0c4;
chenar-stânga: niciunul;
culoare de fundal: #fff;
imagine de fundal: gradient liniar (jos, rgb (245, 247, 249) 0%, rgb (255, 255, 255) 100%);
}
# ad-1 #submit: hover (
imagine de fundal: gradient liniar (jos, rgb (255, 255, 255) 0%, rgb (255, 255, 255) 100%);
}
Acum vom stila apa și o vom anima în consecință:
# ad-1 ul # apă (
/ * Dacă dorim să adăugăm o altă animație pentru apă (deplasându-se pe orizontală, de exemplu), am putea să o facem aici * /
}
# ad-1 li # water-back (
latime: 1200px;
inaltime: 84px;
imagine de fundal: url (../images/ad-1/water-back.png);

indicele z: 1;
poziție: absolută;
jos: 10px;
stânga: -20px;
animație: water-back-animation 3s infinit ease-in-out; / * Efect de săritură în apă * /
}
# ad-1 li # pe malul apei (
latime: 1200px;
înălțime: 158px;
imagine de fundal: url ( ../images/ad-1/water-front.png) ;
background-repeat: repetare-x;
indicele z: 3;
poziție: absolută;
jos: -70px;
stânga: -30px;
animație: animație față de apă 2 s ușurință infinită de intrare-ieșire; / * Un alt efect al săriturii apei este ușor diferit. Vom face această animație puțin mai rapidă pentru a crea un fel de perspectivă. * /
}
Acum să modelăm barca și toate elementele sale. Din nou, vom numi animația corespunzătoare:
# ad-1 ul # barca (
lățime: 249px;
înălțime: 215px;
indicele z: 2;
poziție: absolută;
jos: 25px;
stânga: 20px;
preaplin: vizibil;
animație: boat-in-animation 3s 1 ease-out; / * Mută ​​mai întâi grupul * /
}
# ad-1 ul # boat li (
lățime: 249px;
înălțime: 215px;
imagine de fundal: url (../images/ad-1/boat.png);
poziție: absolută;
jos: 0px;
stânga: 0px;
preaplin: vizibil;
animație: barcă-animație 2s infinit ease-in-out; / * Simularea unei bărci care se legănă pe apă - o animație similară este deja folosită pentru apa în sine. * /
}
# ad-1 # semn de întrebare (
latime: 24px;
înălțime: 50px;
imagine de fundal: url ( ../images/ad-1/question-mark.png) ;
poziție: absolută;
dreapta: 34px;
sus: -30px;
animație: delayed-fade-animation 4s 1 ease-in-out; / * Ascunde semnul de întrebare * /
}
Nu în ultimul rând, vom stila grupul de nor și un nor. Vom numi, de asemenea, o animație destul de ingenioasă, care le va oferi un efect de defilare continuă. Iată o ilustrare a ceea ce se va întâmpla:

Aceste stiluri sunt:
# ad-1 #nori (
poziție: absolută;
sus: 0px;
indicele z: 0;
animație: nor-animație 30s infinit liniar; / * Mutați norii la stânga, de un număr infinit de ori * /
}
# ad-1 # cloud-group-1 (
latime: 720px;
poziție: absolută;
stânga: 0px;
}
# ad-1 # cloud-group-2 (
latime: 720px;
poziție: absolută;
stânga: 720px;
}
# ad-1 .cloud-1 (
latime: 172px;
înălțime: 121px;
imagine de fundal: url (../images/ad-1 / cloud-1 .png);
poziție: absolută;
sus: 10px;
stânga: 40px;
}
# ad-1 .cloud-2 (
lățime: 121px;
înălțime: 75px;
imagine de fundal: url (../images/ad-1 / cloud-2 .png);
poziție: absolută;
sus: -25px;
stânga: 300px;
}
# ad-1 .cloud-3 (
latime: 132px;
înălțime: 105px;
imagine de fundal: url (../images/ad-1 / cloud-3 .png);
poziție: absolută;
sus: -5px;
stânga: 530px;
}
Ufff! Era o mulțime de cod CSS aici. Dar distracția este următoarea!
Animaţie

Amintiți-vă: până în acest moment, de fapt, nu a existat nicio animație. Dacă ați vizualiza bannerul acum, ați vedea ce va afișa chiar și un browser vechi - un anunț static. CUacumvom crea de fapt animația pe care am apelat-o deja în codul nostru CSS.
Acum că bannerul nostru se afișează bine, haideți să animam acest anunț static! Să trecem direct la cod - vă voi spune în comentarii ce se va întâmpla:
Concluzie
Pe parcursul acestui tutorial, am învățat punctele cheie ale creării de animații cu suport pentru browsere mai vechi:
1. Elementele copil moștenesc animații de la părinți pe lângă propriile animații. Putem folosi acest lucru pentru a crea animații mai complexe.
2. Pentru stilurile noastre de anunțuri, trebuie să folosim selectoare foarte specifice, astfel încât anunțurile noastre să nu fie înlocuite de alte stiluri de site.
3. Trebuie să stilăm elementele astfel încât, dacă animația noastră nu reușește să fie redată, anunțul să arate în continuare decent.
4. Ori de câte ori este posibil, utilizarea aceleiași animații pentru mai multe elemente economisește timp și previne extinderea codului.
5. Ne referim adesea la Internet Explorer drept „browserul secolului al XVIII-lea” și ne scuturăm pumnul de dezgust și furie. :)
Mult succes cu experimentele CSS.
Fără îndoială una dintre cele mai strălucitoare tendinte 2012 este pe dezvoltare CCS3, HTML5. Astăzi oferim o prezentare generală largă și foarte utilă a exemplelor " 20+: tutoriale CSS3 creative și utile ″ propus la SpeckyBoy... Toate exemplele sunt realizate pe curățați fără JavaScript, în tutorialele prezentate există demo-uri și fișiere CSS3 gata făcute pentru descărcare.
Suntem încrezători că aceste tehnici și tehnici vor fi utile dezvoltatorilor web!
Lecții CSS3 :
1. Galerii foto CSS3, glisoare, efecte de imagine
1.1 Glisor CSS3
Nu-mi vine să cred, dar acest slider cu diferite efecte este realizat exclusiv în CSS3, foarte impresionant.
1.2. Fundal pe ecran complet cu efect de glisor CSS3
Designerii web au experimentat cu diferite medii pentru site de mult timp, dar încă mai departe CSS pur puteai să faci foarte puțin, trebuia să folosești JS. Acum CSS3 face posibil să faceți cu fundalul site-ului dvs. așa cum doriți - puteți avea un fundal cu o fotografie mare de înaltă calitate, puteți schimba mai multe fundaluri cu efecte diferite și cu scalabilitatea fundalului în funcție de parametrii ecranului . Una peste alta, o caracteristică minunată pentru site-urile creative.
1.3. Lightbox pe CSS3
Cu acest tutorial, puteți învăța cum să creați un Lightbox cu o varietate de efecte în CSS pur.
1.4. Proprietăți imagine CSS3
Acest tutorial demonstrează noile funcții CSS3 pentru proprietățile imaginii, cum ar fi colțurile rotunjite, umbrele și alte efecte.
1.5. Banner animat CSS3
1.6 Bara de încărcare CSS3
1.7. Panglică 3D în CSS3

Vizualizați demonstrația sau descărcați fișierele de cod CSS3 →
2. Meniuri CSS3, navigare și butoane
2.1. Meniurile Apple.com în CSS3
Aflați cum să creați celebrul meniu Apple.com cu CSS3.
2.2. Meniu orizontal animat în CSS3
Un tutorial simplu pentru a vă arăta cum să creați un meniu animat CSS3 cu diferite efecte.
2.3. Meniu vertical animat în CSS3
2.4. Butoane animate CSS3
Excelent tutorial cu 7 exemple de butoane creative animate.
2.5. Meniu creativ animat cu imagini CSS3
În această lecție, doar ochi de la cele 10 exemple prezentate. Astfel de meniuri creative complexe erau create exclusiv folosind JS. Impresionant!
2.6. Efect de navigare în cerc cu CSS3
Efect neobișnuit când treceți cu mouse-ul peste elementul de navigare selectat sub forma unui cerc cu o imagine. Ia-ti notite!
2.7. Meniu derulant în CSS3
Un tutorial pentru implementarea unui meniu derulant simplu cu subniveluri CSS3.
2.8. Navigare CSS3 cu tranziții animate
3. Efecte diferite asupra CSS3
3.1. Sfat animat în CSS3 fără jQuery

Datorită dezvoltării tehnologiilor web și a browserelor moderne, putem crea multe efecte fără a folosi Javascript. Acest lucru a făcut viața mult mai ușoară pentru dezvoltatorii web. La urma urmei, acum putem crea efecte în CSS pur fără a folosi Javascript. Prin urmare, în acest articol vreau să vă spun dacă este posibil să creați bannere în CSS pur, ce este necesar pentru aceasta, precum și avantajele și dezavantajele acestei abordări.
CSS3 oferă o gamă largă de posibilități, trebuie doar să le utilizați corect. De exemplu, vreau să ofer link-uri către munca mea anterioară „Caractere în CSS pur”:
În primul rând, vreau să dau exemple ale bannerelor mele CSS. Poate că le-ați văzut deja pe site, dar nici nu ați ghicit cu ajutorul ce și cum au fost create.
Despre demo: fiecare exemplu (banner) are o durată în secunde în partea de jos, precum și un buton „Refresh”, care începe afișarea bannerului de la început.
Banner # 1 - „Instruire individuală în construcția șantierului”:
Am creat acest banner de aproximativ 2 zile. De ce atât de mult timp? Pentru că a durat ceva timp pentru a adapta bannerul (pentru a-l face cauciuc) atunci când am recalculat coordonatele. Acum dimensiunea sa depinde de lățimea blocului părinte (care conține însuși bannerul CSS).
Am creat acest banner în doar 2-2,5 ore. Singurul lucru care a încetinit procesul de creare a fost alegerea pictogramelor. Pentru că trebuiau selectate aproape de tema bannerului.
Acest banner se întinde și în funcție de lățimea containerului bloc în care se află. A durat aproximativ 1,5 ore pentru ao crea.
Astfel de bannere arată foarte frumos, dar este totul atât de simplu? Să aruncăm o privire la avantajele și dezavantajele acestui mod de a crea bannere.
Avantajele și dezavantajele bannerelor CSS:
Cum creez un banner CSS?
1 Idee
În primul rând, trebuie să știi exact ce animație ar trebui să aibă bannerul (ce, unde și unde ar trebui să se miște și unde să apară). Puteți lua o foaie A4 și desena unde se va mișca fiecare element și ce ar trebui să fie pe banner.
La urma urmei, nu poți începe să creezi un banner dacă nu știi ce ar trebui să fie și cum să funcționeze.
2 Structura HTML
Următorul pas este să creați marcajul HTML, astfel încât elementele să poată fi mutate (și animate pentru ele). Adică, nu poți face totul cu o singură imagine, care se va deplasa la dreapta sau la stânga și aici se termină animația.
De regulă, există un singur bloc comun în care se află toate celelalte. Și în acest bloc general, putem gestiona elementele așa cum avem nevoie.
3 animații CSS
Etapa finală este crearea de animație pentru blocuri, precum și stiluri de scriere pentru acestea, deoarece unele părți ale animației sunt ascunse implicit.
Pentru a vă crea bannerul, trebuie să aveți o bună cunoaștere a CSS și HTML de bază.
Aflați animația CSS de bază cu acest tutorial -.
Ieșire
Tot browsere moderne suportă proprietăți CSS3, ceea ce înseamnă că bannerele vor fi afișate corect în astfel de browsere. Dar folosind pluginuri JS, puteți crea bannere CSS pentru browsere mai vechi. După ce ați învățat elementele de bază ale animației CSS, veți înțelege procesul de creare a bannerelor și veți crea în curând primul dvs. banner în CSS pur! 😉