Fără îndoială una dintre cele mai strălucitoare tendinte 2012 este pe dezvoltare CCS3, HTML5. Astăzi oferim o prezentare largă și foarte utilă a exemplelor " 20+: lecții creative și utile pe CSS3″ oferit pe SpeckyBoy. Toate exemplele sunt realizate pe curat fara JavaScript, lecțiile prezentate conțin demonstrații și fișiere gata CSS3 pentru descărcare.

Suntem siguri că aceste tehnici vor fi utile dezvoltatorilor web!

lecții css3 :

1. Galerii foto CSS3, slidere, efecte cu imagini

1.1.Slider pe CSS3

Nu-mi vine să cred, dar acest slider cu diferite efecte este realizat exclusiv în CSS3, foarte impresionant.

1.2. Fundal pentru un site web pe ecran complet cu efect de glisor folosind CSS3

Designerii web au experimentat de mult timp cu diferite medii pentru un site, dar până acum se putea face foarte puțin cu CSS pur, trebuia să folosești JS. Acum CSS3 vă oferă posibilitatea de a face cu fundalul site-ului dvs. după cum doriți - puteți avea un fundal cu o fotografie mare, de înaltă calitate, puteți schimba mai multe fundaluri cu efecte diferite, iar fundalul este scalabil în funcție de ecran parametrii. În general, o oportunitate uimitoare pentru site-uri creative.

1.3. Lightbox pe CSS3

Cu acest tutorial puteți învăța cum să creați un Lightbox cu o varietate de efecte folosind CSS pur.

1.4. Proprietăți imagine în CSS3

Acest tutorial demonstrează funcții noi în CSS3 pentru proprietățile imaginii, cum ar fi colțurile rotunjite, umbrele și alte efecte.

1.5. Banner animat folosind CSS3

1.6 Panoul de încărcare în CSS3

1.7. Panglică 3D cu CSS3

Vizualizați demonstrația sau descărcați fișiere de cod CSS3 →

2. Meniuri CSS3, navigare și butoane

2.1. Meniul Apple.com în CSS3

Tutorial pentru crearea faimosului meniu Apple.com în CSS3.

2.2. Meniu orizontal animat în CSS3

Un tutorial simplu care arată cum să faci un meniu animat în CSS3 cu diferite efecte.

2.3. Meniu vertical animat cu CSS3

2.4. Butoane animate cu CSS3

Excelent tutorial cu 7 exemple de butoane creative animate.

2.5. Meniu creativ animat cu imagini folosind CSS3

În această lecție, cele 10 exemple prezentate sunt pur și simplu uimitoare. Astfel de meniuri creative complexe erau create exclusiv folosind JS. Impresionant!

2.6. Efect de navigare în cerc cu CSS3

Un efect neobișnuit atunci când treceți cu mouse-ul peste un element de navigare selectat sub forma unui cerc cu o imagine. Ia notă!

2.7. Meniu derulant în CSS3

Tutorial pentru implementarea unui meniu derulant simplu cu subniveluri în CSS3.

2.8. Navigare CSS3 cu tranziții animate

3. Diverse efecte 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. Pentru că acum putem crea efecte folosind CSS pur fără a folosi Javascript. Prin urmare, în acest articol vreau să vă spun dacă este posibil să creați bannere folosind 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, aș dori să ofer link-uri către lucrările mele anterioare „Caractere în CSS pur”:

În primul rând, vreau să dau exemple ale bannerelor mele CSS. Poate le-ați văzut deja pe site, dar nici nu știați 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 să afișeze bannerul de la început.

Banner #1 — „Instruire individuală în construirea site-ului web”:

Am creat acest banner de aproximativ 2 zile. De ce atât de mult? Pentru că a durat ceva timp pentru a adapta bannerul (pentru a-l face cauciuc) la recalcularea coordonatelor. În prezent, dimensiunea sa depinde de lățimea blocului părinte (care conține însuși bannerul CSS).

Am creat acest banner în literalmente 2-2,5 ore. Singurul lucru care a încetinit procesul de creare aici 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ă. Crearea a durat aproximativ 1,5 ore.

Aceste bannere arată foarte bine, dar este chiar atât de simplu? Să ne uităm la avantajele și dezavantajele acestei metode de a crea bannere.

Avantajele și dezavantajele bannerelor CSS:

Cum se creează un banner CSS?

1 Idee

În primul rând, trebuie să știi exact ce animație ar trebui să aibă bannerul (ce, unde și de unde ar trebui să se miște și unde ar trebui 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 un marcaj HTML, astfel încât elementele să poată fi mutate (și să creați animație pentru ele). Adică, nu puteți face totul cu o singură imagine care se va muta din dreapta sau din stânga și apoi animația este terminată.

De obicei, există un bloc comun în care se află toate celelalte. Și în acest bloc general putem gestiona elementele după cum avem nevoie.

3 animație CSS

Pasul final este să creați animații pentru blocuri, precum și să scrieți stiluri pentru acestea, deoarece unele părți ale animației sunt ascunse implicit.

Pentru a vă crea propriul banner, trebuie să înțelegeți bine elementele de bază ale CSS și HTML.

Aflați animația CSS de bază cu acest tutorial - .

Concluzie

Toate browserele moderne acceptă proprietăți CSS3, ceea ce înseamnă că bannerele vor fi afișate corect în astfel de browsere. Dar cu ajutorul pluginurilor JS puteți crea bannere CSS pentru browsere mai vechi. Învățând elementele de bază ale animației CSS, vei înțelege procesul de creare a bannerului și în curând vei crea primul tău banner CSS pur! 😉

Să facem un banner publicitar folosind CSS3. În prezent, doar animațiile CSS3 sunt pe deplin acceptate Browsere Firefoxși WebKit. Dar este destul de ușor să faci bannerul să funcționeze în alte browsere. Cu toate acestea, nu vă așteptați la performanțe grozave peste tot (în special în IE 7 și mai vechi) atunci când experimentați cu cele mai recente tehnici CSS.

Nota: Pentru a economisi spațiu pe pagină, toate prefixele producătorului de browser au fost omise. Vezi codul din surse.

Marcaj HTML

Mai întâi, să ne uităm la structura bannerului în HTML. În această etapă trebuie să ne imaginăm cum va funcționa animația:

Pentru o înțelegere mai profundă a structurii de marcare, să ne concentrăm pe barcă:

Trei animații au loc cu barca:

Barca aluneca pe stanga. Se aplică unei liste (grup) neordonate.

Imitația unei bărci legănându-se pe apă. Se aplică unui element din listă (barcă).

Apariția unui semn de întrebare. Se aplică unui element div (semn de întrebare).

Dacă te uiți la pagina demo, poți vedea că animația pentru elementul din listă (barcă) afectează și elementul div din interiorul acestuia (Semnul întrebării). De asemenea, animația „gliding out” pentru o listă neordonată funcționează pe elementul din listă (barcă și semn de întrebare).

Prin urmare, putem concluziona că elementele copil primesc animații de la părinți pe lângă propriile acțiuni. Acum nu mai rămâne decât să enumerați structurile părinte/copil.

CSS

Înainte de a începe să analizați crearea animației, trebuie să vă asigurați compatibil cu invers cu browsere mai vechi.

Compatibilitate înapoi

Ne vom asigura compatibilitatea inversă prin simpla stilare a marcajului ca și cum animațiile CSS nu ar exista deloc. Dacă cineva vede pagina într-un browser vechi, va vedea o imagine statică obișnuită și nu un spațiu alb gol.

De exemplu: ce se întâmplă dacă folosești CSS? similar cu cel de mai jos, vor apărea probleme:

/* GREȘIT! */ @keyframe our-fade-in-animation ( 0% (opacitate: 0;) 100% (opacitate: 1;) ) div ( opacitate: 0; /* Acest div este ascuns implicit - hopa! */ animație: animația noastră -fade-in-1s 1)

Dacă browserul nu acceptă animații, elementul div va rămâne invizibil pentru utilizator.

Și așa vom asigura compatibilitatea cu browserele mai vechi:

/* TRUE */ @keyframe our-fade-in-animation ( 0% (opacitate: 0;) 100% (opacitate: 1;) ) div ( opacitate: 1; /* Acest div este vizibil implicit */ animație: animația noastră -fade-in-1s 1)

Acum elementul div va fi afișat chiar dacă animația nu reușește să pornească. Și în browsere moderne Div-ul va fi ascuns mai întâi în timpul animației.

Urzeală

Acum știm cum să asigurăm compatibilitatea cu înapoi (ceea ce va ajuta la evitarea problemelor atunci când lucrați cu proiecte reale). Este timpul să creăm baza codului nostru CSS.

Trebuie să rețineți 3 puncte:

Deoarece bannerul va fi folosit pe diferite site-uri, vom face tot posibilul selectoare CSS special. Toate vor începe cu identificatorul #ad-1. În acest fel vom încerca să evităm suprapunerea între codul nostru și codul site-ului.

Ignorăm în mod intenționat întârzierea animației in instalatii. Dacă utilizați o întârziere a animației atunci când setați stiluri cu vizibilitatea implicită a elementelor, structura bannerului va fi perturbată de dispariția sau apariția bruscă a unor părți ale imaginii după finalizarea animației. Întârzierea animației este simulată de durata și setarea cadrelor.

Ori de câte ori este posibil Folosim o animație pentru mai multe elemente. Astfel economisim timp și reducem dimensiunea codului.

Deci haideți să creăm baza pentru bannerul nostru. Să setăm poziționarea relativă pentru acesta, astfel încât elementele interne să poată fi plasate corect. De asemenea, va ascunde orice în afara domeniului de aplicare al elementului:

#ad-1 ( lățime: 720px; înălțime: 300px; float: stânga; margine: 40px automat 0; background-image: url(../images/ad-1/background.png); background-position: center; fundal -repeat: no-repeat: hidden box-shadow: 0px 0px 6px #000;

Apoi setăm stiluri pentru câmpurile de text și de introducere. Apelați animațiile corespunzătoare. De asemenea, trebuie să vă asigurați că conținutul are cel mai mare indice z pentru părțile în mișcare, astfel încât acestea să nu se suprapună:

#ad-1 #conținut ( lățime: 325px; float: dreapta; margine: 40px; text-align: center; z-index: 4; poziție: relativ; overflow: vizibil; ) #ad-1 h2 ( font-family: „Alfa Slab One”, culoare cursiv: #137dd5: text-shadow: 0px 0px 4px animație: delayed-fade-animation 1 ease-in-out; întârziere */ ) #ad-1 h3 ( familia de fonturi: „Boogaloo”, cursiv; culoare: #202224; dimensiunea fontului: 31px; înălțimea liniei: 31px; umbră text: 0px 0px 4px #fff; animație: întârziată -fade-animation 10s 1 ease-in-out /* Aspectul h3 cu întârziere simulată */ ) #ad-1 form ( margine: 30px 0 0 6px; poziție: relativă; animație: form-animation 12s 1 ease-in; -out; /* Glisarea formularului pentru introducerea unei adrese de e-mail cu întârziere simulată */ ) #ad-1 #email ( lățime: 158px; înălțime: 48px; float: stânga; padding: 0 20px; font-size: 16px; familie de fonturi: "Lucida Grande", sans-serif: 1px 1px 0px #a2917d;

chenar:1px solid #a2917d;

#ad-1 ul#water( /* Dacă aveți nevoie de altă animație pentru apă, o puteți adăuga aici */ ) #ad-1 li#water-back ( lățime: 1200px; înălțime: 84px; imagine de fundal: url( .. /images/ad-1/water-back.png: z-index: absolute: -20px; #ad-1 li#water-front ( lățime: 1200px; înălțime: 158px; background-image: url(../images/ad-1/water-front .png); background-repeat: z-index: 3; jos: -70px animație: 2s de animație infinită pentru a simula stropirea valurilor.

Să setăm stiluri pentru barcă și elementele acesteia. Numim și animațiile corespunzătoare:

#ad-1 ul#boat ( lățime: 249px; înălțime: 215px; z-index: 2; poziție: absolut; jos: 25px; stânga: 20px; overflow: vizibil; animație: barca în animație 3s 1 ease-out ; /* Glisează grupul când începe anunțul */ ) #ad-1 ul#boat li ( lățime: 249px; înălțime: 215px; imagine de fundal: url(../images/ad-1/boat.png); poziție: absolută: 0px: animație: boat-animation 2s infinite ease-in-out; ad-1 # semn de întrebare ( lățime: 24 px; înălțime: 50 px; imagine de fundal: url(../images/ad-1/question-mark.png); poziție: absolut; dreapta: 34 px; sus: -30 px ; animație: delayed-fade-animation 4s 1 ease-in-out /* Fade in the semn de întrebare */ )

Acum să creăm stiluri pentru nori. Pentru ei vom folosi animație cu efect de mișcare nesfârșită. Ilustrația demonstrează esența ideii:

Și aici este codul CSS:

#ad-1 #nori (poziție: absolut; sus: 0px; z-index: 0; animație: nor-animație 30s infinit liniar; /* Derulați norii la stânga, resetați și repetați */ ) #ad-1 # cloud-group -1 ( lățime: 720px; poziție: absolut; stânga: 0px; ) #ad-1 #cloud-group-2 ( lățime: 720px; poziție: absolut; stânga: 720px; ) #ad-1 .cloud- 1 ( lățime: 172 px; înălțime: 121 px; url(../images/ad-1/cloud-1.png); poziție: top absolut: 40 px; ( lățime: 121 px; înălțime: 75 px; imagine de fundal: url( ../images/ad-1/cloud-2.png: absolut: -25px: 300px ) #ad-1 ; înălțime: 105px; : url(../images/ad-1/cloud-3.png: absolute: -5px;

Animații

Memento: Din acest moment, nimic nu este animat de fapt. Dacă te uiți la bannerul nostru acum, vei vedea o imagine statică. Aici sunt create și apelate animațiile în codul de mai sus.

Acum să dăm viață frumoasei noastre imagini statice:

/* Animația de întârziere simulată este folosită pentru a afișa mai multe elemente. Simularea întârzierii se realizează prin începerea procesului cu 80% din animație continuă (și nu imediat). În acest fel puteți simula orice întârziere: */ @keyframes delayed-fade-animation ( 0% (opacitate: 0;) 80% (opacitate: 0;) 100% (opacitate: 1;) ) /* Animație pentru afișarea unui formular cu o adresă de e-mail și un buton. Se folosește și imitația întârzierii */ @keyframes form-animation ( 0% (opacitate: 0; dreapta: -400px;) 90% (opacitate: 0; dreapta: -400px;) 95% (opacitate: 0,5; dreapta: 20px ;) 100% (opacitate: 1; dreapta: 0px;) ) /* Această animație este folosită pentru a scoate barca de pe ecran la începutul videoclipului: */ @keyframes boat-in-animation ( 0% (stânga: -200px;) 100% (stânga: 20px;) ) /* Animație pentru nori. Primul grup de nori începe să se miște din centru, iar al doilea - în dreapta ecranului. Primul grup este eliminat încet de pe ecran, iar al doilea apare în dreapta. Odată ce grupul din stânga este complet ascuns, norii revin foarte repede la poziția inițială: */ @keyframes cloud-animation ( 0% (stânga: 0px;) 99,9999% (stânga: -720px;) 100% (stânga: 0px;) ) ) / * Ultimele trei animații sunt aproape aceleași - diferența constă în poziționarea elementelor. Ele simulează stropirea valurilor oceanului: */ @keyframes boat-animation ( 0% (jos: 0px; stânga: 0px;) 25% (jos: -2px; stânga: -2px;) 70% (jos: 2px; stânga) : - 4px;) 100% (jos: -1px; stânga: 0px;) ) @keyframes water-back-animation ( 0% (jos: 10px; stânga: -20px;) 25% (jos: 8px; stânga: - 22px; ) 70% (jos: 12px; stânga: -24px;) 100% (jos: 9px; stânga: -20px;) ) @keyframes water-front-animation ( 0% (jos: -70px; stânga: -30px) ;) 25% (jos: -68px; stânga: -32px;) 70% (jos: -72px; stânga: -34px;) 100% (jos: -69px; stânga: -30px;) )

Concluzie

În această lecție am învățat câteva concepte cheie:

1. Elementele moștenitoare primesc animațiile părinților lor pe lângă animațiile proprii.
2. Când creați un banner, ar trebui să vă străduiți să utilizați un identificator unic pentru a evita suprapunerea codului cu un proiect CSS existent.
3. Poziția și stilul elementelor ar trebui alese ca și cum animația nu ar fi disponibilă pentru a asigura compatibilitatea inversă.
4. Dacă este posibil, ar trebui să utilizați o animație pentru mai multe elemente.

Astăzi vom crea un banner folosind animația CSS3.

În prezent, doar browserele Firefox și WebKit acceptă animații CSS, dar ne vom uita la modul în care putem face aceste bannere să funcționeze și în alte browsere (pe care le numesc browsere din secolul al XVIII-lea). Cu toate acestea, nu ar trebui să vă așteptați la un suport mare în toate browserele (în special IE 7 și mai mici) atunci când experimentați cu tehnologiile CSS moderne.

Deci haideți să creăm bannere animate!

Vă rugăm să rețineți: pentru a economisi spațiu, toate prefixele browserului au fost eliminate. Cm. fișierele sursă pentru a vedea tot codul CSS. Dacă nu sunteți familiarizat cu animațiile CSS, vă recomand cu căldurăîn primul rândciteste asta.

Marcaj HTML

Mai întâi, vom crea structura bannerului folosind HTML. În acest moment, trebuie să ne gândim cum vrem să funcționeze animația noastră - cum va afecta ea elementele copil și părinte în structura marcajului nostru (voi explica mai jos):