Pradėkite naudotis HTML5 / CSS3: patarimais, vitrinomis ir kodavimo pavyzdžiais

HTML5 populiarėja ir pradeda vystytis visa žiniatinklio sąsaja. Net kai kurie interneto kūrėjai citavo, kad HTM5 elementai ir vaizdiniai efektai yra palyginami su „Flash“. Naujų scenarijų stilius lengvai suprantamas, o galimybės patobulinti žiniatinklio sąsają yra beribės. Taigi kaip įdomu šis HTML5?


Šis straipsnis skirtas skaitytojams įžvalgai apie tai, ką turėtumėte žinoti apie HTML5, o svarbiausia – keletą patarimų & gudrybės kuriant lengvus, patrauklius ir interaktyvius HTML5 puslapius.

1. Pagrindiniai HTML5

HTML5

Prieš pradėdami daugiau šios temos HTML5, pirmiausia turėsime patikrinti dabartinę naršyklę. Kadangi daugelis naršyklių vis dar veikia kūrimo režimu (patobulinimas, kad būtų galima pritaikyti HTML5), kai kurios čia paminėtos funkcijos gali būti nepalaikomos..

Čia yra trumpi patarimai, kaip patikrinti suderinamumas su naršykle.

Norėdami daugiau suprasti tam tikros naršyklės apribojimus, galite kreiptis čia.

2. Teksto efektai – šešėlio ir išankstinio teksto efekto pridėjimas HTML5

Teksto efektai HTML5

Pagrindinis šešėlio poveikis tekstui

Tai yra paprasčiausias eilutės kodas, kuris jūsų įprastą antraštę paverčia šauniai atrodančiu tekstu. Niekada nenuvertinkite šešėlio efekto. Norėdami sukurti šį panašų efektą, žiniatinklio dizaineris turi atlikti kelis vaizdo redagavimo veiksmus „Photoshop“. Dabar viskas, ko reikia, yra tik viena kodo eilutė. Šešėlio atstumas, spalva gali būti pakeista atsižvelgiant į jūsų širdies turinį.

Kodavimo pavyzdys

#shadow h1 {
tekstas-šešėlis: 0px 1px 1px rgba (0,0,0, .2);
}

Tekstas apie išankstinį į ugnį panašų efektą

Kitas patarimas – parodyti, kaip HTML5 kodavimas gali būti paverstas į dar šaunesnio stiliaus tekstą. Jei pakankamai eksperimentuojate ar randate kitų pavyzdžių, efektų pritaikymo galimybių yra begalė. Pastaba: šio pavyzdžio nesukūrė jokia vaizdų redagavimo programinė įranga. Tiesiog paprasti kodai HTML5.

Kodavimo pavyzdys

#fire h1 {
suderinti tekstą: centre;
paraštė: 200 taškų automatinis;
šrifto šeima: "Lyga-gotika", Kurjeris;
šrifto dydis: 200 pikselių; teksto transformacija: didžiosios raidės;
spalva: #fff;
tekstas-šešėlis: 0 0 20 pikselių # fefcc9, 10 pikselių –10 pikselių 30 pikselių # feec85, –20 pikselių –20 pikselių 40 pikselių # ffae34, 20 pikselių –40 pikselių 50 pikselių # ec760c, –20 pikselių –60 pikselių 60 pikselių # cd4606, 0–80 pikselių 70 pikselių # 973790, 10 80 taškų # 451b0e;
}

Kitas puikus pavyzdys: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. HTML5 apvalus kampas

Suapvalintas kampas HTML5

Nuo CSS įvedimo niekada nebuvo taip lengva formuoti tinklalapio išdėstymą HTML5. O dabar jūs netgi galite turėti suapvalintus išdėstymo elementų kampus! Įsivaizduok tai; nebereikia pjaustyti fono paveikslėlio, daugiau nepatogių paveikslėlių fragmentų. Tai pritrauks daugybę žiniatinklio dizainerių.

Kodavimo pavyzdys

div {
kraštinė: 2 taškų kietas # 434343;
paminkštinimas: 10 taškų;
fonas: # e3e3e3;
-moz-sienos spindulys: 10 pikselių;
-„webkit-border-radius“: 10 pikselių;
plotis: 500 pikselių;
}

Pastaba: „Moz“ reiškia „Mozilla“, o „webkit“ yra „Safari“ ir „Chrome“.

Kitas puikus pavyzdys: http://fjd1.com/roundcorner.html

4. Scalable Vector Graphic (SVG) HTML5

HTML 5 vadovėliai, vadovas ir pavyzdžiai

Scalable Vector Graphic arba paprastai žinomas kaip (SVG) yra 2 dimensijų vektorinė grafika, apibrėžta XML tekstiniuose failuose. Kitais žodžiais tariant, kadangi jų DNR yra paremta XML tekstiniu failu, juos galima sukurti arba redaguoti žiniatinklio platformoje. Tai taip pat reiškia, kad mastelį galima lengvai nustatyti, o paieškos varikliai gali skaityti ir suprasti vaizdą.

Imties kodas

Kiti puikūs pavyzdžiai:

5. Filmo failo įdėjimas į HTML5

Vaizdo įrašas HTML5

Čia yra dar viena įdomi dalis, skirta HTML5 galimybėms parodyti. Daugelis vaizdo įrašų internete dažniausiai pateikiami interneto vartotojui „Flash“ forma. Visai neseniai vaizdo įrašų įdėjimas į HTML5 pamažu įgauna pagreitį („YouTube“ yra geras pavyzdys), o „Flash“ pamažu praranda patrauklumą. Kodėl taip yra? Mobiliųjų telefonų vartotojai. Jei norite, kad vaizdo įrašą būtų galima leisti tiek „iPhone“, tiek „Android“ telefonuose, HTML5 yra būdas judėti pirmyn.

Norėdami įterpti vaizdo įrašą, šiuo metu turite žinoti 3 formatus, palaikomus skirtingose ​​naršyklėse; .mp4 (H.264 + AAC), .ogg („Theora + Vorbis“), .webm (VP8 + „Vorbis“)

Imties kodas

Kitas puikus pavyzdys: https://www.html5rocks.com/en/tutorials/video/basics/

6. Pristatymas skaidrėse HTML5

HTML 5 vadovėliai, vadovas ir pavyzdžiai

„Powerpoint“ buvo sinonimo vardas, susietas su skaidrių pateikimu. Bet kodėl apsiribokite prezentacija neprisijungus, kur galite sukurti skaidrę, skirtą interneto auditorijai? HTML5 atėjo į pagalbą kuriant daug galingų pristatymo skaidrių su pereinamuoju ir naršymo meniu. Geriausia yra tai, kad jūs netgi galite pritaikyti 3D transformaciją savo pristatyme.

Imties kodas

prieš {
perėjimas: visi 1 palengvina įėjimą;
}

iš anksto: užveskite pelę {
fono spalva: # F2F5FE;
kraštinės spalva: juoda;
}

div {
transformacija: pasukti3d (1,1,0, 45deg);
}

Kiti puikūs pavyzdžiai:

7. Redaguojamas HTML5 turinys

HTML 5 vadovėliai, vadovas ir pavyzdžiai

Statiškas tekstas yra toks senas amžius, kai pasaulį valdo lankstumas ir dinamiškumas. HTML5 galite apibrėžti teksto sritį, kurią interneto vartotojas gali redaguoti be teksto rengyklės.

Imties kodas

Šį turinį galima redaguoti!

Kitas puikus pavyzdys: http://html5demos.com/contenteditable

8. Interaktyvi žiniatinklio drobė HTML5

HTML 5 vadovėliai, vadovas ir pavyzdžiai

Be SVG HTML5, drobė yra geriausias geriausias dalykas, koks kada nors nutiko žiniatinklyje. Drobė leidžia atvaizduoti 2 dimensijų formas, kurios padidina interaktyvumą iki viso lygio be „Flash“ pagalbos.

Nepaisant to, čia verta paminėti paprastą HTML5 kodavimą, kuris sukuria nuostabią animacijos sąveiką.

Kitas puikus pavyzdys: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Nuvilkite HTML5

HTML 5 vadovėliai, vadovas ir pavyzdžiai

Nuvilkimas (kartais žinomas kaip DnD) yra dar viena nuostabi HTML5 funkcija. Puikus pavyzdys būtų „Google“ įdiegimas „Gmail“. Jei naudojate kurią nors iš palaikomų HTML5 naršyklių, galite tiesiog nuvilkti failą iš savo kompiuterio ir įmesti į rašymo pranešimų langą. Jis bus automatiškai pridedamas kaip priedas. Argi tai ne šaunu?

Imties kodas (gimtoji DnD)

document.addEventListener („dragstart“, funkcija (įvykis) {
event.dataTransfer.setData (‘tekstas’, ‘pritaikytas tekstas’);
event.dataTransfer.effectAllowed = ‘kopija’;
}, klaidinga);

Kitas puikus pavyzdys: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Gryna CSS duomenų diagrama HTML5

HTML 5 vadovėliai, vadovas ir pavyzdžiai

Prieš HTML5 taip pat neįmanoma sukurti pateikiamos diagramos, naudojant tik HTML kodavimą. Be to, duomenų vertės keitimas ir atspindėjimas diagramoje nėra paprasta užduotis. Vėl HTML5 į gelbėjimą. Kartu su CSS galite sukurti be galo gražią diagramą, kurioje „Microsoft Excel“ bus gėda. Kodai yra paprasti ir viskas, ką jums reikia padaryti, tai leisti laiką, kad galėtumėte pritaikyti nepriekaištingas savo diagramos spalvas ir efektus.

Kitas puikus pavyzdys: http://cssglobe.com/pure-css-data-chart/

Nepakanka HTML 5?

Kaip ir mes! Čia daugiau temos, eikite jų patikrinti.

* 30 labai puikių HTML 5 svetainių pavyzdžių
* Darbo su HTML 5 pradžia
* Privalote perskaityti HTML 5 mokymo programas 2012 m
* Sužinokite HTML 5: 10 pamokas, kurias privalote perskaityti

Taip pat patikrinkite  šį HTML 5 avarijos kursą pateikė Robinas Nixonas. Robinas Nixonas yra mokymosi PHP, MySQL ir „JavaScript“ autorius; kursas apima beveik viską, ką naujokams reikia žinoti HTML5, įskaitant pagrindinį HTML kodavimą, HTML5 drobę piešimui, geografinę vietą, vietinę saugyklą, taip pat HTML5 garso ir vaizdo įrašus.

Originalus straipsnis pirmą kartą paskelbtas WHSR dienoraštis; dabar ją tvarko ir atnaujina „BuildThis.io“ darbuotojai.

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