Začnite s HTML5 / CSS3: Nasveti, vitrine in kodiranje vzorcev

HTML5 pridobiva večjo priljubljenost in začne evoluirati celoten spletni vmesnik. Celo nekateri spletni razvijalci navajajo, da so elementi HTM5 in vizualni učinki primerljivi s Flashom. Novi slog skripta je enostavno razumeti, zmogljivosti za izboljšanje spletnega vmesnika pa so neomejene. Kako zanimiv je ta HTML5?


Ta članek naj bi bralcem omogočil vpogled v to, kar morate vedeti o HTML5 in najpomembneje nekaj nasvetov & triki za ustvarjanje lahkih, privlačnih in interaktivnih strani HTML5.

1. Osnovno v HTML5

HTML5

Preden začnemo nadaljevati s to temo v HTML5, bo dobro, da najprej preverite svoj trenutni brskalnik. Ker je veliko brskalnikov še vedno v razvojnem načinu (izboljšava za sprejem HTML5), nekatere funkcije, omenjene tukaj, morda niso podporne.

Tu je nekaj hitrih nasvetov za preverjanje vašega združljivost brskalnika.

Če želite nadalje razumeti omejitev določenega brskalnika, se lahko obrnete na tukaj.

2. Besedilni učinki – Dodajanje senčila in napredni besedilni učinek v HTML5

Besedilni učinki v HTML5

Osnovni senčni učinek na besedilo

To je najpreprostejša enovrstna koda, ki vaš navaden naslov pretvori v besedilo hladnega videza. Nikoli ne podcenjujte učinka sence. Če želite ustvariti ta podoben videz, spletni oblikovalec potrebuje več korakov urejanja slik v Photoshopu. In zdaj je potrebno le eno vrstico kode. Razdalja v senci, barvo lahko spremenite glede na vsebino vašega srca.

Vzorec kodiranja

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

Besedilo o vnaprejšnjem ognjenem učinku

Naslednji namig vam bo pokazal, kako lahko kodiranje HTML5 spremenite v še bolj hladno besedilo. Če dovolj eksperimentirate ali najdete druge primere, so možnosti prilagajanja učinkov neskončne. Opomba: tega primera ne ustvari nobena programska oprema za urejanje slik. Samo navadne kode v HTML5.

Vzorec kodiranja

#fire h1 {
poravnava besedila: sredina;
marža: 200px samodejno;
družina pisav: "Liga-gotika", Kurir;
velikost pisave: 200px; preoblikovanje besedila: velika črka;
barva: #fff;
besedilo-senca: 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 odličen primer: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Zaokrožen vogal v HTML5

Zaokrožen kotiček v HTML5

Oblikovanje postavitve spletnih strani v HTML5 od uvedbe CSS še nikoli ni bilo tako enostavno. Zdaj lahko imate celo zaobljene vogale elementov postavitve! Predstavljajte si to; ni več rezanja slike ozadja, ne več umazanih fragmentov slike. To bo spletnim oblikovalcem prineslo veliko veselja.

Vzorec kodiranja

div {
obroba: 2px trdna # 434343;
oblazinjenje: 10px;
ozadje: # e3e3e3;
-mož-meja-polmer: 10px;
-webkit-meja-polmer: 10px;
širina: 500px;
}

Opomba: Moz pomeni Mozilla, webkit pa za Safari in Chrome.

Drugi odličen primer: http://fjd1.com/roundcorner.html

4. Priložljiva vektorska grafika (HTML) v HTML5

Vadnice, vodnik in vzorci HTML 5

Skalabilna vektorska grafika ali splošno znana kot (SVG) je dvodimenzionalna vektorska grafika, ki je določena v besedilnih datotekah XML. Z drugimi besedami, ker njihov DNK temelji na besedilni datoteki XML, jih lahko ustvarite ali uredite na spletni platformi. Kar tudi pomeni, da je mogoče enostavno meriti, iskalniki pa lahko preberejo in razumejo sliko.

Vzorčna koda

Drugi odlični primeri:

5. Vdelava datoteke filma v HTML5

Video v HTML5

Tu je še en zanimiv del, ki prikazuje lastnosti HTML5. Mnogi videoposnetki na spletu so ponavadi predstavljeni spletnemu uporabniku v obliki Flash. Do nedavnega je vdelava videa v HTML5 počasi pridobivala na veljavi (YouTube je dober primer) in Flash počasi izgublja svojo privlačnost. Zakaj je tako? Uporabniki mobilnih naprav. Če želite, da se lahko vaš videoposnetek predvaja v telefonih iPhone in Android, je HTML5 korak naprej.

Če želite vdelati video, morate vedeti, da trenutno obstajajo 3 formati, ki jih podpirajo različni brskalniki; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Vzorčna koda

Drugi odličen primer: https://www.html5rocks.com/sl/tutorials/video/basics/

6. Predstavitev diapozitivov v HTML5

Vadnice, vodnik in vzorci HTML 5

Powerpoint je sinonimno ime, povezano s predstavitvijo diapozitivov. Toda zakaj se omejiti na predstavitev brez povezave, kjer lahko ustvarite diapozitive, namenjene spletnemu občinstvu? HTML5 se je rešil pri ustvarjanju veliko močnih predstavitvenih diapozitivov, skupaj s prehodom in navigacijskim menijem. Najboljši del je, da lahko na svojo predstavitev uporabite celo 3D pretvorbo.

Vzorčna koda

pred {
prehod: vsi enostavni vhodi;
}

pred: premaknite miško {
barva ozadja: # F2F5FE;
barva obrobe: črna;
}

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

Drugi odlični primeri:

7. Vsebina, ki jo je mogoče urejati v HTML5

Vadnice, vodnik in vzorci HTML 5

Statično besedilo je tako staro-šola v dobi, ko svet in fleksibilnost vladata svetu. V HTML5 lahko določite območje besedila, ki ga je spletni uporabnik uredil brez urejevalnika besedil.

Vzorčna koda

Vsebino je mogoče urejati!

Drugi odličen primer: http://html5demos.com/contenteditable

8. Interaktivno spletno platno v HTML5

Vadnice, vodnik in vzorci HTML 5

Poleg SVG v HTML5 je platno naslednja najboljša stvar v spletu. Platno omogoča upodabljanje dveh dimenzijskih oblik, ki interaktivnost dvignejo na celotno raven brez pomoči Flash-a.

Tu je vredno omeniti preprosto kodiranje v HTML5, ki ustvarja neverjetno interakcijo med animacijo.

Drugi odličen primer: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Povlecite in spustite v HTML5

Vadnice, vodnik in vzorci HTML 5

Povleci in spusti (včasih znan tudi kot DnD) je še ena odlična funkcija, ki je na voljo HTML5. Odličen primer bi bilo izvajanje Googla v njihovem Gmailu. Če uporabljate katerega koli brskalnika s podporo HTML5, lahko datoteko preprosto povlečete iz računalnika in se spustite v okno za sestavo sporočil. Samodejno bo dodan kot priloga. Kako kul je to?

Vzorčna koda (izvorni DnD)

document.addEventListener (‘dragstart’, funkcija (dogodek) {
event.dataTransfer.setData (‘besedilo’, ‘Prilagojeno besedilo’);
event.dataTransfer.effectAllowed = ‘kopiraj’;
}, napačno);

Drugi odličen primer: http://www.html5rocks.com/sl/tutorials/dnd/basics/

10. Čisti podatkovni grafikon CSS v HTML5

Vadnice, vodnik in vzorci HTML 5

Pred HTML5 tudi ni mogoče ustvariti predstavljivega grafikona z uporabo kodiranja v HTML-ju. Poleg tega spreminjanje vrednosti podatkov in odraz v grafikonu ni enostavna naloga. Spet HTML5 na pomoč. Skupaj s CSS-om lahko ustvarite popolnoma lep grafikon, s katerim se Microsoft Excel sramoti. Kode so preproste, vse kar morate storiti je, da porabite čas za prilagajanje popolne barve in učinka za vaš grafikon.

Drugi odličen primer: http://cssglobe.com/pure-css-data-chart/

Ne morem dobiti dovolj HTML 5?

Tako tudi mi! Tukaj je več o temi, poglejte jih.

* 30 zelo kul primerov spletnih strani HTML 5
* Uvod v HTML 5
* Morate prebrati HTML 5 Vadnice v letu 2012
* Naučite se HTML 5: 10 Obvezno preberite lekcije

Oglejte si tudi  ta tečaj zrušitve HTML 5 Robina Nixona. Robin Nixon je avtor učenja PHP, MySQL in JavaScript; tečaj zajema skoraj vse, kar mora novinec vedeti v HTML5 – vključno z osnovnim kodiranjem HTML, HTML5 platnom za risanje, geolokacijo, lokalno shranjevanje ter HTML5 avdio in video.

Izvirni članek je prvič objavljen na Blog WHSR; Zdaj jih upravljajo in posodabljajo zaposleni v 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