Creșterea butoane și de filare logo-ul

O astfel de sarcină nu este greu de realizat, trebuie doar să recurgă la utilizarea CSS3. Și, din moment ce acest standard are nevoie din ce în ce dețin spații de Internet și de „standardul viitorului“ devine „standardul acestei“, atunci te sfătuiesc cu tărie să acorde o atenție la ea.

Deci, de reflecția filosofică, să trecem la afaceri. Apropo, ceea ce ne-ar obține, puteți vedea făcând clic pe pictograma „Demo“. Și în „surse“ Tu, ca întotdeauna, veți găsi toate fișierele sursă.

1. Incepem, ca întotdeauna, pentru a crea un fisier HTML. Voi folosi sintaxa HTML5, și codul meu de fișiere este destul de simplu, pentru că voi crea un site capac, care va conține un titlu; Butoanele de navigare sunt plasate într-o listă neordonată și logo-ul de imagine. Mai mult decât orice avem în dosar și nu va fi, dar aici avem este necesar nimic mai mult, deoarece activitatea principală va fi efectuată peste butoanele și logo-ul.

Aici este codul nostru HTML-fișier:

principal
produse
servicii
Contacte

După cum puteți vedea din cod, toate pălăria noastră se află în «antet» tag-ul, și el, la rândul său, cuprinde: un antet; navigare prin tag-ul «nav» și logo-ul de imagine.

De asemenea, la început, puteți vedea fișierul atașat stylesheet. Până în prezent, nu au fost încă create, astfel încât pagina noastră arată.

2. Acum, sarcina noastră este de a crea același fișier foaie de stil care este deja conectat la aspectul nostru. Crearea «style.css» fișier și salvați-l în același director ca și în HTML-fișier.

Să începem dăm capacul nostru mai mult sau mai puțin aglomerat aspect, care este de a plasa toate elementele din loc.

Montați-l în dosarul din tabelul următor stil de cod:

toate doar aici. În primul rând, ne-am stabilit lățimea de «corp» tag-uri, și aliniați-l la centru.

În jurul capacului blocului «antet» am stabilit înălțimea și lățimea cadrului, precum și poziționarea relativă care va permite în continuare să poziționeze logo-ul în legătură cu «antetul» tag-ul.

Titlul «H1» atribuim alinierea dreapta, indentare pe tipul corect de font și dimensiunea și culoarea fontului și umbra textului.

Logo-ul (care are ID-ul «logo») vom poziționa complet și setați valoarea la «sus» și «plecat», definind astfel locul său în cap nostru.

Unitatea care cuprinde un buton (tag-ul «nav»), atribuim curgerea în jurul marginii din dreapta și indentare corespunzătoare.

Scoatem reliefarea de link-uri și de a atribui o culoare.

După aplicarea acestor stiluri, pălăria noastră este după cum urmează.

3. Acum, să facem astfel încât atunci când mouse-ul trece peste cheile noastre, ele sunt un pic crescut în dimensiune și a schimbat culoarea.

Principalele CSS-proprietăți pentru a crea aceste transformări este de transformare. Valoarea sa este tipul de conversie dorit. Cu această caracteristică nu se poate schimba numai dimensiunea elementului, dar, de asemenea, să-l transforme într-un anumit grad, înclinare, etc.

transformări CSS sunt relativ noi, astfel încât această proprietate încă mai trebuie să utilizați prefixe vânzătorii de browser.

Valoarea de a «transforma» vom folosi «scară» (zoom) la o valoare mică.

Pentru a seta stiluri pentru butoane atunci când treceți mouse-ul pe ele, vom folosi pseudo «: hover».

Acum, lista de mai jos codul pentru foaia de stil:

Acum, dacă vă verificați pagina în browser și treceți cursorul mouse-ului peste oricare dintre butoane, veți vedea cum crește și își schimbă culoarea. Dar se întâmplă brusc și nu foarte frumos. Ar fi frumos pentru a da acest efect neted pentru a crește a avut loc, de exemplu, pentru o jumătate de secundă.

Aici vom ajuta tranziția de proprietate. și care va permite o tranziție lină, și, de fapt, animație. Acesta trebuie să fie aplicat la stilul original, care este, la stilul înainte de începerea animației. Parametrii săi vom trece peste unele stiluri noi producem animație și pentru cât timp.

Proprietatea «tranziție», vom folosi, de asemenea, prefixe.

Acum, tot ce trebuie să facem - este de a adăuga stiluri pentru «nav li» codul de mai jos:

-webkit-tranziție: toate .5s; -moz-tranziție: toate .5s; o- tranziție: toate .5s; tranziție: toate .5s;

Acum animația noastră va fi netedă, și dacă vă actualizați browser-ul și treceți cursorul mouse-ului peste oricare dintre butoane, pe care îl va vedea.

4. Acum, du-te la logo-ul rotației. Voi crea efectul de rotație atunci când treceți cursorul mouse-ului pe logo-ul. Apropo, puteți face pentru rotația are loc imediat ce utilizatorul accesează pagina. Pentru acest lucru, atunci, în loc să aplice stiluri pentru a «#logo: Hover», se aplică stiluri pentru «#logo».

Vreau să realizeze efectul pe care, atunci când treceți peste logo-ul, acesta este mai întâi rotit sensul acelor de ceasornic și apoi anti-și la opritorul de capăt.

CSS ne oferă un alt mecanism foarte puternic pentru crearea de animație. Putem crea o animație, nu numai de la un stil la altul, așa cum am făcut în cazul butoanelor, și de la unul la altul, la al treilea și așa mai departe.

Pentru a face acest lucru, creați (keyframes keyframes). animația cadrelor cheie - este un cadru separat în animație, care determină apariția scenei.

Primul lucru pe care trebuie să se adapteze cadrele cheie. Punctul de aici nu este, de asemenea, fără prefixe. Ați putea găsi că acest lucru este un pic greoaie, dar ai nevoie pentru a face munca de animație în toate browserele populare.

Trebuie doar să adăugați următorul cod la foaia de stil.

A se vedea, aici vom crea animație. «Logo» - este numele de animație, în care vom continua să se refere la el.

«Din» - primul cadru al animației, aceasta determină poziția inițială de rotație (0 grade).

„50%“ - un al doilea cadru al animației, figura noastră se va roti la -720 grade în acesta.

«Pentru» - acesta este ultimul cadru al animației, și figura încă o dată se întoarce la poziția sa inițială (0 grade).

După cum puteți vedea, în animația noastră de 3 cadre: cifra se rotește în sensul acelor de ceasornic, apoi înapoi și se oprește. Dar cadru ca iti dai seama că ar putea fi mai mult.

Prin ea însăși, acest cod nu face nimic. Dacă încercați în prezent pentru a reîncărca pagina și plasați cursorul peste logo-ul, atunci nimic nu se va schimba. Acest cod specifică doar regulile de animație.

Și pentru a ne pune în aplicare este necesar să se înregistreze chiar și o mică bucată de cod.

Aici, vom atribui logo-ul nostru pseudo «: hover» și a pus această proprietate «animație» (ca întotdeauna cu prefix). Parametrii vom specifica numele de animație noastre și durata acestuia.

Asta e tot. Puteți actualiza browser-ul, treceți mouse-ul peste logo-ul și bucurați-vă de animație.

Din păcate, o captură de ecran nu este posibil să se arate animație, dar făcând clic pe pictograma „Demo“ Puteti vedea totul.

Acesta este doar un exemplu simplu, și dacă experimentul, acesta poate fi mult mai interesant. Mai ales pentru că acest lucru nu este toate caracteristicile animații și tranziții în CSS3.

Cu toate acestea, veți fi de acord, este destul de rece pentru a fi capabil de a crea animații simple (și, probabil, vă va transforma mai complicat), folosind doar o singură foaie de stil, și fără ajutorul unor programe terțe.

Cu tine a fost Anna Kotelnikova.

Mult noroc pentru tine, prietenii mei! Aflați, să dezvolte, să genereze idei creative. În general, pentru a crea!

Până când ne vom întâlni din nou!