Byrjaðu með HTML5 / CSS3: ábendingar, sýningarskáp og kóðunarsýni

HTML5 fær meiri vinsældir og byrjar að þróa allt vefviðmótið. Jafnvel sumir vefur verktaki vitnað í að HTM5 þættir og sjónræn áhrif eru sambærileg við Flash. Auðvelt er að skilja nýja forskriftarstílinn og getu til að bæta vefviðmótið er takmarkalaus. Svo hversu áhugavert er þetta HTML5 samt?


Þessari grein er ætlað að veita lesendum innsýn í það sem þú ættir að vita um HTML5 og síðast en ekki síst nokkur ráð & bragðarefur við að búa til léttar, aðlaðandi og gagnvirkar HTML5 síður.

1. Grunn í HTML5

HTML5

Áður en við byrjum frekar á þessu efni í HTML5 verður gott að skoða núverandi vafra þinn. Þar sem margir af þeim vöfrum eru ennþá í þróunarstillingu (aukahlutur til að hýsa HTML5) er hugsanlegt að sumar aðgerðir sem nefndar eru hér séu ekki studdar.

Hér eru fljótleg ráð til að athuga eindrægni vafra.

Til að skilja frekar takmörkun ákveðins vafra gætirðu vísað til hér.

2. Textaáhrif – Bætir við skugga og framhjá textaáhrifum í HTML5

Textaáhrif í HTML5

Grunn skuggaáhrif á texta

Þetta er einfaldasti strengjakóðinn sem umbreytir venjulegu fyrirsögninni þinni í flotta texta. Aldrei vanmeta skuggaáhrifin. Til að búa til þessi svipuðu útlit þarf vefhönnuður að fara í gegnum mörg skref í myndvinnslu í Photoshop. Og það eina sem þarf er aðeins ein lína af kóða. Skugga fjarlægð, lit er hægt að breyta í hjarta innihald þitt.

Kóðunarsýni

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

Texti um eld-eins áhrif

Næsta ráð er að sýna þér hvernig hægt er að fínstilla HTML5 kóðann í enn flottari texta. Ef þú gerir tilraunir nægilega, eða finnur önnur dæmi, eru möguleikarnir á að sérsníða áhrifin óþrjótandi. Athugið: þetta dæmi er ekki búið til af neinum myndvinnsluforritum. Bara einfaldir kóðar í HTML5.

Kóðunarsýni

# eldur h1 {
texta-samræma: miðja;
framlegð: 200px farartæki;
leturfjölskylda: "League-Gothic", Hraðboði;
leturstærð: 200px; text-umbreyting: hástafi;
litur: #fff;
textaskuggi: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10x-10x 80px # 451b0e;
}

Annað frábært dæmi: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Rúnnuð horn í HTML5

Rúnnuð horn í HTML5

Það hefur aldrei verið svo auðvelt síðan að stilla vefsíðuna í HTML5 síðan CSS var kynnt. Og nú geturðu jafnvel haft ávöl horn af útlitsþáttum þínum! Ímyndaðu þér þetta; ekki fleiri sneið bakgrunnsmynd, ekki fleiri sóðaleg myndbrot. Þetta mun koma mörgum skálum fyrir hönnuðina á vefnum þarna úti.

Kóðunarsýni

div {
landamæri: 2px solid # 434343;
padding: 10px;
bakgrunnur: # e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
breidd: 500px;
}

Athugið: Moz þýðir Mozilla, og webkit er fyrir Safari og Chrome.

Annað frábært dæmi: http://fjd1.com/roundcorner.html

4. Stærð vektorgrafík (SVG) í HTML5

HTML 5 námskeið, leiðbeiningar og sýnishorn

Scalable Vector Graphic eða almennt þekktur sem (SVG) er tvívíddar grafík sem er skilgreind í XML textaskrám. Með öðrum orðum, vegna þess að DNA þeirra er byggt á XML textaskrá, er hægt að búa þau til eða breyta þeim á vefpallinum. Sem þýðir líka að það getur verið auðveldlega umfang og leitarvélar geta lesið og skilið myndina.

Dæmi um kóða

Önnur frábær dæmi:

5. Fella kvikmyndaskrá inn í HTML5

Myndskeið í HTML5

Hér er annar áhugaverður hluti til að sýna fram á getu HTML5. Mörg myndbandsins á netinu eru venjulega kynnt fyrir vefnotanda í formi Flash. Þangað til nýlega, fellir vídeó í HTML5 hægt og rólega skriðþunga (YouTube er gott dæmi) og Flash er að missa hægt aðdráttarafl sitt. Af hverju er það svona? Notendur farsíma. Ef þú vilt að myndbandið þitt geti spilað í bæði iPhone og Android símum er HTML5 leiðin til að halda áfram.

Til að fella myndbandið þarftu að vita um það 3 snið sem nú eru studd af mismunandi vöfrum; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Dæmi um kóða

Annað frábært dæmi: https://www.html5rocks.com/is/tutorials/video/basics/

6. Rennibraut í HTML5

HTML 5 námskeið, leiðbeiningar og sýnishorn

Powerpoint hefur verið samheiti sem tengist kynningu á skyggnum. En af hverju að einskorða þig við offline kynningu þar sem þú getur búið til skyggnur ætlaðar fyrir áhorfendur á vefnum? HTML5 hefur komið til bjargar með því að búa til mikið öflugar kynningarskyggnur, heill með umbreytingar- og siglingarvalmynd. Það besta er að þú getur jafnvel beitt 3D umbreytingu á kynninguna þína.

Dæmi um kóða

fyrir {
umskipti: allar eru auðveldar innar;
}

fyrirfram: sveima {
bakgrunnslitur: # F2F5FE;
jaðarlitur: svartur;
}

div {
umbreyting: snúningur3d (1,1,0, 45deg);
}

Önnur frábær dæmi:

7. Editable Innihald í HTML5

HTML 5 námskeið, leiðbeiningar og sýnishorn

Static texti er svo gamall skóli á þeim tíma þar sem sveigjanleiki og kraftmikill stjórna heiminum. Í HTML5 er hægt að skilgreina textasvæði sem gerir það að notendum kleift að breyta honum án textaritils.

Dæmi um kóða

Þessu efni er hægt að breyta!

Annað frábært dæmi: http://html5demos.com/contenteditable

8. Interactive Web Canvas í HTML5

HTML 5 námskeið, leiðbeiningar og sýnishorn

Fyrir utan SVG í HTML5, er striga það besta sem gerðist á vefnum. Canvas gerir kleift að gera 2 víddarform sem færa gagnvirkni á allt stig án hjálpar Flash.

Engu að síður er það þess virði að minnast á þessa einföldu kóðun í HTML5 sem býr til ótrúlegt fjörspil.

Annað frábært dæmi: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Dragðu og slepptu HTML5 inn

HTML 5 námskeið, leiðbeiningar og sýnishorn

Drag and drop (stundum þekkt sem DnD) er annar kaldur eiginleiki sem er tiltækur fyrir HTML5. Gott dæmi væri framkvæmd Google í Gmail þeirra. Ef þú ert að nota einhvern af HTML5 sem hægt er að styðja vafra geturðu einfaldlega dregið skrá úr tölvunni þinni og sleppt á skrifa gluggann. Það verður sjálfkrafa bætt við sem viðhengi. Hversu flott er það?

Dæmi um kóða (innfæddur DnD)

document.addEventListener (‘dragstart’, fall (atburður) {
event.dataTransfer.setData (‘texti’, ‘Sérsniðinn texti’);
event.dataTransfer.effectAllowed = ‘afrita’;
}, rangt);

Annað frábært dæmi: http://www.html5rocks.com/is/tutorials/dnd/basics/

10. Hreint CSS gagnakort í HTML5

HTML 5 námskeið, leiðbeiningar og sýnishorn

Fyrir HTML5 er ekki hægt að búa til frambærilegt töflu með því að nota kóðun í HTML. Ennfremur, að breyta gagnagildinu og endurspegla í töflunni er ekkert einfalt verkefni. Aftur, HTML5 til bjargar. Þú getur búið til alveg fallegt kort ásamt CSS sem gerir Microsoft Excel til skammar. Kóðarnir eru einfaldir og það eina sem þú þarft að gera er að eyða tíma í að sérsníða hinn fullkomna lit og áhrif fyrir töfluna þína.

Annað frábært dæmi: http://cssglobe.com/pure-css-data-chart/

Get ekki fengið nóg af HTML 5?

Það gerum við líka! Hérna er meira um efnið, farðu að skoða þau.

* 30 Mjög flott dæmi um HTML 5 vefsíður
* Byrjaðu með HTML 5
* Verður að lesa HTML 5 námskeið árið 2012
* Lærðu HTML 5: 10 Verður að lesa lexíur

Skoðaðu líka  þetta HTML 5 hrun námskeið eftir Robin Nixon. Robin Nixon er höfundur að læra PHP, MySQL og JavaScript; námskeiðið nær nokkurn veginn yfir allt sem nýliði þarf að vita í HTML5 – þar með talið grunn HTML kóðun, HTML5 striga til að teikna, landfræðilega staðsetningu, geymslu á staðnum, svo og HTML5 hljóð og myndband.

Upprunalega greinin er fyrst birt þann WHSR bloggið; það er nú stjórnað og uppfært af starfsfólki 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