Kom i gang med HTML5 / CSS3: tip, showcases og kodeprøver

HTML5 vinder mere popularitet og begynder at udvikle hele webgrænsefladen. Selv nogle webudviklere citerede, at HTM5-elementer og visuelle effekter kan sammenlignes med Flash. Den nye scriptingstil er let at forstå, og mulighederne for at forbedre webgrænsefladen er ubegrænsede. Så hvor interessant er denne HTML5 alligevel?


Denne artikel er beregnet til at give læserne et indblik i, hvad du skal vide om HTML5 og vigtigst af alt nogle tip & tricks til at skabe lette, attraktive og interaktive HTML5-sider.

1. Grundlæggende i HTML5

HTML5

Før vi begynder yderligere med dette emne i HTML5, vil det være godt at tjekke din nuværende browser først. Da mange af browserne stadig er i udviklingsfunktion (forbedring til at huse HTML5), er nogle af de funktioner, der er nævnt her muligvis ikke understøttet.

Her er en hurtig tip til at kontrollere din browserkompatibilitet.

For yderligere at forstå begrænsningen af ​​en bestemt browser kan du henvise til her.

2. Teksteffekter – Tilføjelse af skygge og tekstteksteffekt i HTML5

Teksteffekter i HTML5

Grundlæggende skyggeeffekt på teksten

Dette er den enkleste strengkode, der omdanner din almindelige overskrift til en sejt tekst. Undervurder aldrig skyggeeffekten. For at skabe denne lignende effekt kræver webdesigner at gennemgå flere trin i billedredigering i Photoshop. Og det eneste, det tager, er kun en kodelinie. Skygge afstand, farve kan ændres til dit hjerteindhold.

Kodningsprøve

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

Tekst om forudgående brandlignende effekt

Det næste tip er at vise dig, hvordan HTML5-kodningen kan finjusteres til en endnu køligere tekst. Hvis du eksperimenterer nok, eller finder andre eksempler, er mulighederne for at tilpasse effekterne uendelige. Bemærk: dette eksempel oprettes ikke af noget billedredigeringssoftware. Bare almindelige koder i HTML5.

Kodningsprøve

#fire h1 {
tekstjustering: center;
margin: 200px auto;
font-family: "Liga-gotisk", Kurer;
skriftstørrelse: 200px; tekst-transformation: store bogstaver;
farve: #fff;
tekstskygge: 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-10 80px # 451b0e;
}

Andet godt eksempel: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Rundet hjørne i HTML5

Rundet hjørne i HTML5

Styling af websidens layout i HTML5 har aldrig været så let siden introduktionen af ​​CSS. Og nu kan du endda have afrundede hjørner af dine layoutelementer! Forestil dig dette; ikke mere skiver baggrundsbillede, ikke flere rodede billedfragmenter. Dette vil bringe mange skål til webdesignerne derude.

Kodningsprøve

div {
kant: 2px faststof # 434343;
polstring: 10px;
baggrund: # e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
bredde: 500 px;
}

Bemærk: Moz betyder Mozilla, og webkit er til Safari og Chrome.

Andet godt eksempel: http://fjd1.com/roundcorner.html

4. Skalerbar vektorgrafik (SVG) i HTML5

HTML 5-tutorials, guide og eksempler

Skalerbar vektorgrafik eller almindeligt kendt som (SVG) er en 2-dimensions vektorgrafik, der er defineret i XML-tekstfiler. Med andre ord, fordi deres DNA er baseret på XML-tekstfil, kan de oprettes eller redigeres på webplatformen. Hvilket også betyder, at der let kan være skalaer, og søgemaskiner er i stand til at læse og forstå billedet.

Prøvekode

Andre gode eksempler:

5. Indlejring af filmfil i HTML5

Video i HTML5

Her er en anden interessant del til at vise funktionerne i HTML5. Mange af videoerne online præsenteres normalt for webbruger i form af Flash. Indtil for nylig vinder indlejring af video i HTML5 langsomt fart (YouTube er et godt eksempel), og Flash mister langsomt sin attraktivitet. Hvorfor er det sådan? Mobilbrugere. Hvis du vil have din video til at kunne afspilles i både iPhone og Android-telefoner, er HTML5 måde at komme videre på.

For at integrere videoen skal du kende der i øjeblikket 3 formater understøttet af forskellige browsere; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Prøvekode

Andet godt eksempel: https://www.html5rocks.com/en/tutorials/video/basics/

6. Slidepræsentation i HTML5

HTML 5-tutorials, guide og eksempler

Powerpoint har været et synonymnavn associeret med diaspræsentation. Men hvorfor begrænse dig til en offline præsentation, hvor du kan oprette lysbilleder beregnet til webpublikum? HTML5 er kommet til hjælp ved at skabe meget kraftfulde præsentationsbilleder, komplet med overgangs- og navigationsmenu. Det bedste er, at du endda kan anvende 3D-transformation til din præsentation.

Prøvekode

før {
overgang: alle er lette indad;
}

pre: hover {
baggrundsfarve: # F2F5FE;
kantfarve: sort;
}

div {
transform: rotere3d (1,1,0, 45deg);
}

Andre gode eksempler:

7. Redigerbart indhold i HTML5

HTML 5-tutorials, guide og eksempler

Statisk tekst er så gammel skole i den tidsalder, hvor fleksibilitet og dynamik styrer verden. I HTML5 kan du definere et tekstområde, der gør det redigerbart af webbrugeren uden teksteditor.

Prøvekode

Dette indhold kan redigeres!

Andet godt eksempel: http://html5demos.com/contenteditable

8. Interaktivt web lærred i HTML5

HTML 5-tutorials, guide og eksempler

Udover SVG i HTML5 er lærred det næste bedste, der nogensinde er sket på Internettet. Canvas tillader gengivelse af 2 dimensionsformer, der bringer interaktivitet til et helt niveau uden hjælp fra Flash.

Ikke desto mindre er den enkle kodning i HTML5, der skaber en fantastisk animationsinteraktion, værd at nævne her.

Andet godt eksempel: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Træk og slip HTML5

HTML 5-tutorials, guide og eksempler

Træk og slip (undertiden kendt som DnD) er en anden cool funktion, der er tilgængelig for HTML5. Et godt eksempel ville være implementering af Google i deres Gmail. Hvis du bruger nogen af ​​de HTML5-understøttede browsere, kan du blot trække en fil fra din computer og slippe hen til skrivebordsvinduet. Det tilføjes automatisk som en vedhæftet fil. Hvor cool er det?

Prøvekode (native DnD)

document.addEventListener (‘dragstart’, funktion (begivenhed) {
event.dataTransfer.setData (‘tekst’, ’tilpasset tekst’);
event.dataTransfer.effectAllowed = ‘kopi’;
}, falsk);

Andet godt eksempel: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Ren CSS-datakort i HTML5

HTML 5-tutorials, guide og eksempler

Før HTML5 er det også umuligt at oprette et præsentabelt diagram ved blot at bruge kodning i HTML. Endvidere er det ingen enkel opgave at ændre dataværdien og afspejle dem i diagrammet. Igen, HTML5 til redning. Sammen med CSS kan du oprette et absolut smukt diagram, der gør Microsoft Excel til skamme. Koderne er enkle, og alt hvad du skal gøre er at bruge tid på at tilpasse den perfekte farve og effekt til dit diagram.

Andet godt eksempel: http://cssglobe.com/pure-css-data-chart/

Kan ikke få nok af HTML 5?

Det gør vi også! Her er mere om emnet. Gå til at tjekke dem ud.

* 30 Meget sejle eksempler på HTML 5-websteder
* Kom godt i gang med HTML 5
* Skal læse HTML 5-tutorials i 2012
* Lær HTML 5: 10 skal læse lektioner

Tjek også ud  dette HTML 5 crash-kursus af Robin Nixon. Robin Nixon er forfatteren af ​​Learning PHP, MySQL og JavaScript; kurset dækker stort set alt, hvad en nybegynder har brug for at vide i HTML5 – inklusive grundlæggende HTML-kodning, HTML5-lærred til tegning, geolocation, lokal opbevaring samt HTML5 lyd og video.

Den originale artikel offentliggøres først den WHSR-blog; det administreres og opdateres nu af BuildThis.io-stabe.

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