Lecția pentru a crea o pre-încărcare pagina cu efect de site-ul Fontface Ninja. Vom folosi animatii CSS, transformări 3D și SVG.
Desigur, am făcut și conversia lor în acest sens, inclusiv stabilirea celui de al doilea demo, care are efecte ușor diferite. Pentru logo-ul și preîncărcare indicator al unui site vom folosi calea built-in SVG, pentru a converti prin CSS. Creați un script mic pentru animație elementul de boot SVG, va controla clasa paginii de animație, care se va adăuga la containerul de bază.
Vă rugăm să rețineți că vom folosi de animație CSS și transformarea CSS 3D, astfel încât acestea vor funcționa corect numai în browsere care le susțin.
Să ne-a pus antetul bloc și conținutul principal într-un recipient separat. Reamintim că vrem să controleze tot ceea ce se întâmplă la vizualizarea originală și conținutul utilizând clase. Pentru a face acest lucru vom avea nevoie containerul principal. Să-l setați clasa egal și id ip-container.
În primul rând, afișa antetul elementului de logo-ul și preîncărcare: acestea sunt ambele elemente SVG, cu toate acestea, vom împărți codul. După cum vedeți, noi punem lățimea și atributele înălțimea și viewBox preserveAspectRatio. Valoarea PresevreAspectRatio va xMidYMin întâlni. Acest lucru înseamnă că putem aplica scara în care programul pentru a se potrivi în propriul container, în timp ce centrul său se află pe axa X pentru a face logo-ul la dispoziția persoanelor cu handicap, se adaugă un titlu, descriere, și toate atributele ARIA necesare, Aria-labeledby.
Solicităm principal de containere ip-main. și apoi se aplică animația copiilor săi, titluri, capitole și cutii interne:
Acum să Styling lucru întreg.
Ne-ar dori să se constate că CSS nu conține prefixe browser-ul, dar puteți găsi o listă completă în codul sursă.
Inițial, am conecta mai mult de un font, care vor fi necesare pentru textul de înlocuire și pictogramele în cutie. Pictogramele utilizate în demo sunt preluate din pictograma Feather set și am creat fonturi ikonochny folosind Icomoon App. Textul de înlocuire Font - Blokk. foarte util pentru crearea de machete.
Inițial definim antet 100% din lățimea și înălțimea, precum și o poziție fixă expune:
Restează externă H1 antet padding:
Logo-ul și descărca elementul va fi poziționat absolut:
La fel cum noi nu uităm că logo-ul ar trebui să fie de adaptare. Poziția în centrul ecranului:
SVG, pe care le-am atribuit clasa IP-interior. Acesta va fi afișat ca un element de bloc, centrându-l pe orizontală, folosind valoarea automată pentru capitonarea partea externă:
SVG logo-ul ar trebui să fie activ, dar dimensiunea acesteia nu ar trebui să fie prea mare sau mic. Am stabilit maximă și lățimea minimă:
Deoarece logo-ul nostru este SVG, putem personaliza culoarea traseului articolului:
Același lucru este valabil și pentru încărcătorul de boot:
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!