Alustage HTML5 / CSS3-ga: näpunäited, vitriinid ja näidiste kodeerimine

HTML5 on üha populaarsemaks muutumas ja hakkab arenema kogu veebiliides. Isegi mõned veebiarendajad tsiteerisid, et HTM5 elemendid ja visuaalefektid on Flashiga võrreldavad. Uut skriptimisstiili on lihtne mõista ja veebiliidese täiustamise võimalused on piiramatud. Kui huvitav see HTML5 ikkagi on?


Selle artikli eesmärk on anda lugejatele ülevaade sellest, mida peaksite teadma HTML5 kohta, ja mis kõige tähtsam, mõned näpunäited & nippe kergete, atraktiivsete ja interaktiivsete HTML5-lehtede loomisel.

1. Põhiline HTML5-s

HTML5

Enne HTML5-teemast selle teemaga lähemalt alustamist on kõigepealt hea kontrollida oma praegust brauserit. Kuna paljud brauserid on endiselt arendusrežiimis (täiustus HTML5 mahutamiseks), ei pruugi mõned siin nimetatud funktsioonid olla toetavad.

Siin on kiired näpunäited, et kontrollida oma brauseri ühilduvus.

Teatud brauseri piirangute täiendavaks mõistmiseks võite viidata siin.

2. Tekstiefektid – HTML5-s varju- ja tekstiefektide lisamine

Tekstirefektid HTML5-s

Põhiline variefekt tekstile

See on lihtsaim stringikood, mis muudab teie tavalise pealkirja laheda välimusega tekstiks. Ärge kunagi alahinnake variefekti. Selle sarnase välimusega efekti loomiseks peab veebidisainer läbima Photoshopis mitu pildi redigeerimise sammu. Ja nüüd on vaja ainult ühte koodirida. Varju kaugust, värvi saab muuta vastavalt teie südame sisule.

Kodeerimise proov

#vari h1 {
tekstivari: 0px 1px 1px rgba (0,0,0, .2);
}

Tekst eelneva tuletaolise efekti kohta

Järgmine näpunäide on teile näitamine, kuidas HTML5 kodeeringut saab veelgi jahedama väljanägemisega teksti muuta. Kui katsetate piisavalt või leiate muid näiteid, on efektide kohandamise võimalused lõputud. Märkus. Seda näidet ei loo ükski pilditöötlustarkvara. Lihtsad koodid HTML5-s.

Kodeerimise proov

#fire h1 {
teksti joondamine: keskel;
veeris: 200 pikslit automaatne;
fondiperekond: "Liiga-gooti stiilis", Kuller;
kirjasuurus: 200 pikslit; teksti teisendamine: suurtähed;
värv: #fff;
text-shadow: 0 0 20 pikslit # fefcc9, 10 pikslit -10 pikslit 30 pikslit # feec85, -20 pikslit -20 pikslit 40 pikslit # ffae34, 20 pikslit -40 pikslit 50 pikslit # ec760c, -20 pikslit -60 pikslit 60 pikslit # cd4606, 0 -80 pikslit 70 pikslit # 973790, 10 80 pikslit # 451b0e;
}

Teine suurepärane näide: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Ümardatud nurk HTML5-s

Ümardatud nurk HTML5-s

Veebilehe paigutuse kujundamine HTML5-s pole CSS-i juurutamisest alates kunagi olnud nii lihtne. Ja nüüd võite oma paigutuselementide ümardatud nurgad olla! Kujutage seda ette; pole vaja enam taustapilti tükeldada, enam pole räpaseid pildifragmente. See toob sealsetele veebidisaineritele palju rõõmu.

Kodeerimise proov

div {
ääris: 2xx tahke # 434343;
polster: 10 px;
taust: # e3e3e3;
-moz-piiri raadius: 10 px;
-veebikomplekti-raadiuse raadius: 10 pikslit;
laius: 500 pikslit;
}

Märkus. Moz tähendab Mozilla ning veebikomplekt on Safari ja Chrome’i jaoks.

Teine suurepärane näide: http://fjd1.com/roundcorner.html

4. Skaalautuv vektorgraafika (SVG) HTML5-s

HTML 5 õpetused, juhend ja näidised

Skaalautuva vektorgraafika või üldtuntud kui (SVG) on kahemõõtmeline vektorgraafika, mis on määratletud XML-i tekstifailides. Teisisõnu, kuna nende DNA põhineb XML-tekstifailil, saab neid veebiplatvormil luua või redigeerida. Mis tähendab ka seda, et mastaap on hõlpsasti kättesaadav ja otsingumootorid saavad pilti lugeda ja sellest aru saada.

Näidiskood

Muud suurepärased näited:

5. Filmifaili manustamine HTML5-s

Video HTML5-s

Siin on veel üks huvitav osa HTML5 võimaluste tutvustamiseks. Paljud veebivideod kuvatakse veebikasutajatele tavaliselt Flashi kujul. Kuni viimase ajani on video manustamine HTML5-s aeglaselt hoogu juurde saanud (YouTube on hea näide) ja Flash on aeglaselt oma atraktiivsust kaotamas. Miks see nii on? Mobiilikasutajad. Kui soovite, et teie videot saaks mängida nii iPhone’is kui ka Androidi telefonides, on HTML5 viis edasi liikuda.

Video manustamiseks peate teadma 3 eri vormingut, mida erinevad brauserid toetavad; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Näidiskood

Teine suurepärane näide: https://www.html5rocks.com/et/tutorials/video/basics/

6. Slaidiesitlus HTML5-s

HTML 5 õpetused, juhend ja näidised

Powerpoint on slaidiesitlusega seotud sünonüüminimi. Kuid miks piirduda võrguühenduseta esitlusega, kus saate luua veebipublikule mõeldud slaidid? HTML5 on appi luues palju võimsaid esitlusslaidid koos ülemineku- ja navigeerimismenüüga. Parim osa on see, et saate oma esitlusele rakendada isegi 3D-teisendust.

Näidiskood

eel {
üleminek: kõik on hõlpsamad;
}

pre: hõljutage kursorit {
taustavärv: # F2F5FE;
äärise värv: must;
}

div {
teisendamine: pöörake3d (1,1,0, 45 kraadi);
}

Muud suurepärased näited:

7. Redigeeritav sisu HTML5-s

HTML 5 õpetused, juhend ja näidised

Staatiline tekst on ajastul nii vana kool, kus paindlikkust ja dünaamikat valitseb maailm. HTML5-s saate määratleda tekstiala, mille muudab veebikasutaja redigeeritavaks ilma tekstiredaktorita.

Näidiskood

Seda sisu saab muuta!

Teine suurepärane näide: http://html5demos.com/contenteditable

8. Interaktiivne veebipõhine lõuend HTML5-s

HTML 5 õpetused, juhend ja näidised

Lisaks HTML5-s sisalduvale SVG-le on lõuend järgmine parim asi, mis veebis kunagi juhtunud on. Lõuend võimaldab ilma Flashi abita kahemõõtmeliste kujundite renderdamist, mis viivad interaktiivsuse kogu tasemele.

Sellegipoolest väärib siin mainimist HTML5 lihtne kodeerimine, mis loob hämmastava animatsiooni interaktsiooni.

Teine suurepärane näide: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Lohistage HTML5-sse

HTML 5 õpetused, juhend ja näidised

Lohistamine (mõnikord tuntud ka kui DnD) on veel üks lahe funktsioon, mis on HTML5-le saadaval. Suurepärane näide oleks Google’i rakendamine oma Gmailis. Kui kasutate mõnda HTML5 toetatavat brauserit, saate faili lihtsalt oma arvutist lohistada ja kukutada koostamisteate aknasse. See lisatakse automaatselt manusena. Kui lahe see on?

Proovi kood (natiivne DnD)

document.addEventListener (‘dragstart’, funktsioon (sündmus) {
event.dataTransfer.setData (‘tekst’, ‘kohandatud tekst’);
event.dataTransfer.effectAllowed = ‘koopia’;
}, vale);

Teine suurepärane näide: http://www.html5rocks.com/et/tutorials/dnd/basics/

10. Puhas CSS-andmete diagramm HTML5-s

HTML 5 õpetused, juhend ja näidised

Enne HTML5 pole ka esinduslikku diagrammi võimalik luua, kasutades lihtsalt HTML-is kodeerimist. Lisaks pole andmeväärtuse muutmine ja diagrammis kajastamine lihtne ülesanne. Jälle HTML5 appi. Koos CSS-iga saate luua täiesti ilusa diagrammi, mis paneb Microsoft Exceli häbi tundma. Koodid on lihtsad ja kõik, mida peate tegema, on aja kulutamine oma diagrammi täiusliku värvi ja efekti kohandamiseks.

Teine suurepärane näide: http://cssglobe.com/pure-css-data-chart/

HTML 5-st ei piisa?

Nii ka meie! Siin on rohkem teemat, minge vaadake neid.

* 30 väga lahedat näidet HTML 5 veebisaitide kohta
* Alustamine HTML 5-ga
* Peab lugema HTML 5 õpetusi 2012. aastal
* Õppige HTML 5: 10 õppetunde

Vaadake ka  see HTML 5 krahhikursus, mille autor on Robin Nixon. Robin Nixon on õppe PHP, MySQL ja JavaScripti autor; kursus hõlmab peaaegu kõike, mida uustulnuk peab HTML5-s teadma – sealhulgas HTML-i põhikodeering, HTML5-lõuend joonistamiseks, geograafiline asukoht, kohalik salvestusruum, samuti HTML5-heli ja -video.

Esialgne artikkel avaldatakse esmakordselt WHSRi blogi; seda haldavad ja värskendavad nüüd BuildThis.io staabid.

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