Începeți cu HTML5 / CSS3: Sfaturi, vitrine și mostre de codare

HTML5 câștigă mai multă popularitate și începe să evolueze întreaga interfață web. Chiar și unii dezvoltatori web au citat că elementele HTM5 și efectele vizuale sunt comparabile cu Flash. Noul stil de script este ușor de înțeles, iar capabilitățile de îmbunătățire a interfeței web sunt nelimitate. Deci, cât de interesant este acest HTML5 oricum?


Acest articol are scopul de a oferi cititorilor o informație despre ceea ce ar trebui să știți despre HTML5 și, cel mai important, câteva sfaturi & trucuri pentru crearea de pagini HTML5 ușoare, atractive și interactive.

1. de bază în HTML5

HTML5

Înainte de a începe acest subiect în HTML5, va fi bine să verificați mai întâi browserul dvs. curent. Întrucât multe dintre browsere sunt încă în modul de dezvoltare (îmbunătățirea pentru acomodarea HTML5), este posibil ca unele funcții menționate aici să nu fie compatibile.

Iată un sfat rapid pentru a vă verifica compatibilitatea browserului.

Pentru a înțelege în continuare limitarea unui anumit browser, vă puteți referi aici.

2. Efecte de text – Adăugarea efectului text umbre și avans în HTML5

Efectele textului în HTML5

Efect de umbră de bază asupra textului

Acesta este cel mai simplu cod de șir care transformă titlul obișnuit într-un text cu aspect cool. Nu subestimați niciodată efectul de umbră. Pentru a crea acest efect de aspect similar este necesar ca designerul web să parcurgă mai mulți pași de editare a imaginilor în Photoshop. Și acum tot ce este nevoie este doar o linie de cod. Distanța de umbră, culoarea poate fi schimbată în conținutul inimii tale.

Eșantion de codificare

#shadow h1 {
text-shadow: 0px 1px 1px rgba (0,0,0, .2);
}

Text despre efectul de incendiu în avans

Următorul sfat este să vă arătăm modul în care codarea HTML5 poate fi modificată într-un text chiar mai cool. Dacă experimentezi suficient sau găsești alte exemple, posibilitățile de personalizare a efectelor sunt interminabile. Notă: acest exemplu nu este creat de niciun software de editare a imaginilor. Doar coduri simple în HTML5.

Eșantion de codificare

#fire h1 {
aliniere text: centru;
marja: 200px auto;
familie de fonturi: "Liga-gotic", Curier;
font-size: 200px; text-transform: majuscule;
culoare: #fff;
text-shadow: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10px 80px # 451b0e;
}

Alt exemplu excelent: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Colț rotunjit în HTML5

Colț rotunjit în HTML5

Stilarea machetei paginii web în HTML5 nu a fost niciodată atât de ușoară de la introducerea CSS. Și acum puteți avea chiar și colțurile rotunjite ale elementelor dvs. de aspect! Imaginează-ți asta; nici o imagine de fundal mai felie, nici mai multe fragmente de imagine dezordonate. Acest lucru va aduce multe urale la designerii web de acolo.

Eșantion de codificare

div {
graniță: 2px solid # 434343;
căptușire: 10px;
fundal: # e3e3e3;
-moz-border-raza: 10px;
-webkit-border-raza: 10px;
latime: 500px;
}

Notă: Moz înseamnă Mozilla, iar webkit este pentru Safari și Chrome.

Alt exemplu excelent: http://fjd1.com/roundcorner.html

4. Grafică vectorială scalabilă (SVG) în HTML5

Tutoriale, ghid și probe HTML 5

Grafică vectorială scalabilă sau cunoscută în mod obișnuit (SVG) este o grafică vectorială în 2 dimensiuni care este definită în fișierele text XML. Cu alte cuvinte, deoarece ADN-ul lor se bazează pe fișierul text XML, pot fi create sau editabile pe platforma web. Ceea ce înseamnă, de asemenea, că pot exista scări ușor, iar motoarele de căutare sunt capabile să citească și să înțeleagă imaginea.

Cod simplu

Alte exemple excelente:

5. Încorporarea fișierului de film în HTML5

Video în HTML5

Iată o altă parte interesantă pentru a prezenta capabilitățile HTML5. Multe dintre videoclipurile online sunt de obicei prezentate webuserului sub formă de Flash. Până de curând, încorporarea videoclipului în HTML5 câștigă încetul cu încetul (YouTube este un exemplu bun), iar Flash își pierde încet atractivitatea. De ce este așa? Utilizatori de telefonie mobilă. Dacă doriți ca videoclipul dvs. să poată fi redat atât pe telefoane iPhone, cât și pe telefoane Android, HTML5 este calea de a merge mai departe.

Pentru a încorpora videoclipul, va trebui să cunoașteți în prezent 3 formate acceptate de diferite browsere; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Cod simplu

Alt exemplu excelent: https://www.html5rocks.com/en/tutorials/video/basics/

6. Prezentare diapozitivă în HTML5

Tutoriale, ghid și probe HTML 5

Powerpoint a fost un nume sinonim asociat cu prezentarea de diapozitive. Dar de ce să vă limitați la o prezentare offline unde puteți crea diapozitive destinate publicului web? HTML5 a venit la salvare în crearea de diapozitive de prezentare mult mai puternice, completate cu meniul de tranziție și navigare. Cea mai bună parte este că puteți aplica chiar și transformarea 3D în prezentarea dvs..

Cod simplu

pre {
tranziție: toate facilitățile de extragere;
}

pre: hover {
culoare de fundal: # F2F5FE;
culoare de bordură: negru;
}

div {
transformă: rotire3d (1,1,0, 45deg);
}

Alte exemple excelente:

7. Conținut modificabil în HTML5

Tutoriale, ghid și probe HTML 5

Textul static este atât de vechi-școală în epoca în care flexibilitatea și dinamica stăpânesc lumea. În HTML5, puteți defini o zonă de text făcută editabilă de către utilizatorul web fără editor de text.

Cod simplu

Acest conținut este editabil!

Alt exemplu excelent: http://html5demos.com/contenteditable

8. Canvas Web interactiv în HTML5

Tutoriale, ghid și probe HTML 5

Pe lângă SVG în HTML5, pânza este următorul lucru cel mai bun care s-a întâmplat vreodată pe web. Canvas permite redarea formelor cu 2 dimensiuni care aduc interactivitatea la un nivel întreg fără ajutorul Flash.

Cu toate acestea, simplificarea codării în HTML5 care creează o interacțiune uimitoare de animație merită menționată aici.

Alt exemplu excelent: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Glisați și plasați în HTML5

Tutoriale, ghid și probe HTML 5

Drag and drop (uneori cunoscut sub numele de DnD) este o altă caracteristică interesantă disponibilă HTML5. Un exemplu excelent ar fi implementarea de către Google în Gmail. Dacă utilizați oricare dintre browserele acceptabile HTML5, puteți pur și simplu să trageți un fișier de pe computer și să le aruncați în fereastra de compunere. Acesta va fi adăugat automat ca atașament. Cat de tare e asta?

Cod de eșantion (DnD nativ)

document.addEventListener (‘dragstart’, funcție (eveniment) {
event.dataTransfer.setData (‘text’, ‘Text personalizat’);
event.dataTransfer.effectAllowed = ‘copie’;
}, fals);

Alt exemplu excelent: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Grafic de date CSS pur în HTML5

Tutoriale, ghid și probe HTML 5

Înainte de HTML5, este de asemenea imposibil să creezi un grafic prezentabil doar folosind codarea în HTML. În plus, modificarea valorii datelor și reflectarea în grafic nu este o sarcină simplă. Din nou, HTML5 la salvare. Împreună cu CSS, puteți crea o diagramă absolut frumoasă care a făcut Microsoft Excel de rușine. Codurile sunt simple și tot ce trebuie să faceți este să petreceți timp pentru a personaliza culoarea și efectul perfect pentru graficul dvs..

Alt exemplu excelent: http://cssglobe.com/pure-css-data-chart/

Nu pot obține suficient HTML 5?

Si noi! Iată mai multe despre subiect, accesați-le.

* 30 Exemple foarte fainoase de site-uri HTML 5
* Noțiuni introductive cu HTML 5
* Trebuie să citiți tutorialele HTML 5 în 2012
* Aflați HTML 5: 10 trebuie să citiți lecții

De asemenea, consultați  acest curs de avarie HTML 5 de Robin Nixon. Robin Nixon este autorul învățării PHP, MySQL și JavaScript; cursul acoperă aproape tot ce trebuie să știe un începător în HTML5 – incluzând codarea HTML de bază, panza HTML5 pentru desen, geolocalizare, stocare locală, precum și audio și video HTML5.

Articolul original este publicat pentru prima dată pe Blog WHSR; acum este gestionat și actualizat de personalul BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map