Započnite s HTML5 / CSS3: Savjeti, izlozi i kodiranje uzoraka

HTML5 dobija sve veću popularnost i počinje evoluizirati cijelo web sučelje. Čak su i neki web programeri citirali da su HTM5 elementi i vizualni efekti usporedivi s Flashom. Novi stil skriptiranja lako je razumjeti, a mogućnosti poboljšanja web sučelja su neograničene. Pa koliko je uopće zanimljiv ovaj HTML5?


Ovaj je članak namijenjen pružanju čitateljima uvid u ono što biste trebali znati o HTML5 i što je najvažnije nekoliko savjeta & trikovi za stvaranje laganih, atraktivnih i interaktivnih HTML5 stranica.

1. Osnovni u HTML5

HTML5

Prije nego što započnemo dalje s ovom temom na HTML5, dobro je prvo provjeriti svoj trenutačni preglednik. Budući da je većina preglednika još uvijek u načinu razvoja (poboljšanja kako bi se prilagodio HTML5), neke ovdje spomenute značajke možda neće biti korisne.

Evo kratkih savjeta za provjeru vašeg kompatibilnost preglednika.

Za daljnje razumijevanje ograničenja određenog preglednika možete se obratiti ovdje.

2. Tekstualni efekti – Dodavanje sjene i naprednog efekta teksta u HTML5

Tekstualni efekti u HTML5

Osnovni efekt sjene na tekst

Ovo je najjednostavniji kôd niza koji vaš uobičajeni naslov pretvara u tekst cool izgleda. Nikada ne podcjenjujte efekt sjene. Za stvaranje ovog sličnog izgleda potrebno je da web dizajner prođe kroz više koraka uređivanja slika u Photoshopu. A sada je potrebno samo jednu liniju koda. Udaljenost sjene, boja može se mijenjati prema sadržaju vašeg srca.

Uzorak kodiranja

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

Tekst o unaprijed efektu sličnom vatri

Sljedeći savjet će vam pokazati kako HTML5 kodiranje možete prilagoditi tekstu koji izgleda hladnije. Ako dovoljno eksperimentirate ili pronađete druge primjere, mogućnosti prilagođavanja efekata su beskrajne. Napomena: ovaj primjer nije stvoren niti jednim softverom za uređivanje slika. Samo obični kodovi u HTML5.

Uzorak kodiranja

#fire h1 {
poravnavanje teksta: središte;
marža: 200px automatski;
font-family: "Liga-gotička", Courier;
veličina fonta: 200px; pretvaranje teksta: velika slova;
boja: #fff;
sjena teksta: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10p 80px # 451b0e;
}

Drugi sjajan primjer: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Zaokruženi kut u HTML5

Zaobljeni ugao u HTML5

Izrada izgleda web stranice u HTML5 nikada nije bila tako jednostavna od uvođenja CSS-a. A sada možete imati i zaobljene kutove elemenata izgleda! Zamislite ovo; nema više rezanja pozadinske slike, nema više neurednih fragmenata slike. To će donijeti mnogo veselja web dizajnerima.

Uzorak kodiranja

div {
obrub: 2px kruta # 434343;
padding: 10px;
pozadina: # e3e3e3;
-moz-granica-polumjer: 10px;
-web-granica-radijus: 10px;
širina: 500px;
}

Napomena: Moz znači Mozilla, a webkit je za Safari i Chrome.

Drugi sjajan primjer: http://fjd1.com/roundcorner.html

4. Skalabilna vektorska grafika (SVG) u HTML5

HTML 5 udžbenici, vodič i uzorci

Skalabilna vektorska grafika ili općenito poznata kao (SVG) je dvodimenzionalna vektorska grafika koja je definirana u XML tekstualnim datotekama. Drugim riječima, jer se njihova DNK temelji na XML tekstualnoj datoteci, one se mogu kreirati ili uređivati ​​na web platformi. Što također znači, slika se može lako mjeriti, a tražilice mogu čitati i razumjeti sliku.

Uzorak koda

Ostali sjajni primjeri:

5. Umetanje datoteke filma u HTML5

Videozapis u HTML5

Evo još jednog zanimljivog dijela koji prikazuje mogućnosti HTML5-a. Mnogi videozapisi na mreži obično se prezentiraju web korisniku u obliku Flash-a. Donedavno je umetanje videozapisa u HTML5 polako dobivalo na značaju (YouTube je dobar primjer), a Flash polako gubi na atraktivnosti. Zašto je to tako? Korisnici mobilnih uređaja. Ako želite da se vaš videozapis može reproducirati i na telefonima iPhone i Android, HTML5 je način za napredovanje.

Da biste ugradili videozapis, morat ćete znati da trenutno postoje 3 formata podržana od strane različitih preglednika; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Uzorak koda

Drugi sjajan primjer: https://www.html5rocks.com/en/tutorials/video/basics/

6. Prezentacija dijapozitiva u HTML5

HTML 5 udžbenici, vodič i uzorci

Powerpoint je sinonimni naziv pridružen prezentaciji dijapozitiva. Ali zašto se ograničiti na izvanmrežnu prezentaciju na kojoj možete kreirati dijapozitive namijenjene web publici? HTML5 nam je pomogao u stvaranju mnogo moćnih prezentacijskih prezentacija, zajedno s prijelaznim i navigacijskim izbornikom. Najbolji dio je što čak možete primijeniti 3D transformaciju na svoju prezentaciju.

Uzorak koda

prije {
prijelaz: sve 1s lakoća ulaska;
}

prije: lebdeći {
boja pozadine: # F2F5FE;
boja obruba: crna;
}

div {
pretvorba: rotate3d (1,1,0, 45deg);
}

Ostali sjajni primjeri:

7. Sadržaj koji se može uređivati ​​u HTML5

HTML 5 udžbenici, vodič i uzorci

Statički tekst toliko je starosjedilački u vremenu u kojem fleksibilnost i dinamika vladaju svijetom. U HTML5 možete definirati tekstno područje koje je učinilo web korisnik bez uređivača teksta.

Uzorak koda

Ovaj je sadržaj moguće uređivati!

Drugi sjajan primjer: http://html5demos.com/contenteditable

8. Interaktivno web platno u HTML5

HTML 5 udžbenici, vodič i uzorci

Pored SVG-a u HTML5-u, platno je sljedeća najbolja stvar koja se ikada dogodila na webu. Na platnu se mogu prikazati dva dimenzijska oblika koji interaktivnost dovode na cijelu razinu bez pomoći Flash-a.

Ipak, ovdje je vrijedno spomenuti jednostavno kodiranje u HTML5 koji stvara nevjerojatnu interakciju s animacijom.

Drugi sjajan primjer: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Povucite i ispustite u HTML5

HTML 5 udžbenici, vodič i uzorci

Povlačenje i ispuštanje (ponekad poznato i kao DnD) još je jedna sjajna značajka koja je dostupna za HTML5. Sjajan primjer bila bi implementacija Googlea u svom Gmailu. Ako koristite neki od preglednika koji podržavaju HTML5, jednostavno možete povući datoteku s računala i upisati se na prozor poruke poruke. Automatski će se dodati kao privitak. Kako je to cool?

Uzorak koda (izvorni DnD)

document.addEventListener (‘dragstart’, funkcija (događaj) {
event.dataTransfer.setData (‘tekst’, ‘Prilagođeni tekst’);
event.dataTransfer.effectAllowed = ‘kopiraj’;
}, lažno);

Drugi sjajan primjer: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Čisti CSS grafikon podataka u HTML5

HTML 5 udžbenici, vodič i uzorci

Prije HTML5, također je nemoguće stvoriti prezentacijski grafikon korištenjem kodiranja u HTML-u. Nadalje, promjena vrijednosti podataka i njihovog odražavanja na grafikonu nije jednostavan zadatak. Opet, HTML5 na spas. Zajedno s CSS-om možete stvoriti apsolutno lijep grafikon koji splasne Microsoft Excel. Kodovi su jednostavni, a sve što trebate učiniti je potrošiti vrijeme za prilagodbu savršene boje i efekta za vaš grafikon.

Drugi sjajan primjer: http://cssglobe.com/pure-css-data-chart/

Ne mogu dobiti dovoljno HTML 5?

Tako i mi! Evo više o temi, pogledajte ih.

* 30 vrlo zgodnih primjera web stranica HTML 5
* Početak rada s HTML-om 5
* Obavezno pročitajte HTML 5 udžbenike u 2012. godini
* Naučite HTML 5: 10 moraju pročitati lekcije

Također, provjerite  ovaj HTML 5 tečaj rušenja Robina Nixona. Robin Nixon autor je učenja PHP-a, MySQL-a i JavaScript-a; tečaj pokriva gotovo sve što novajlija mora znati u HTML5 – uključujući osnovno HTML kodiranje, HTML5 platno za crtanje, geolokaciju, lokalnu pohranu kao i HTML5 audio i video.

Izvorni članak prvi put je objavljen na Blog WHSR; to sada upravlja i ažurira osoblje usluge 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