Kom igång med HTML5 / CSS3: tips, showcases och kodprover

HTML5 får mer popularitet och börjar utveckla hela webbgränssnittet. Även vissa webbutvecklare citerade att HTM5-element och visuella effekter är jämförbara med Flash. Den nya skriptstilen är lätt att förstå och möjligheterna att förbättra webbgränssnittet är obegränsade. Så hur intressant är den här HTML5 ändå?


Den här artikeln är avsedd att ge läsarna en inblick i vad du borde veta om HTML5 och viktigast av några tips & trick för att skapa lätta, attraktiva och interaktiva HTML5-sidor.

1. Grundläggande i HTML5

HTML5

Innan vi börjar vidare med detta ämne i HTML5 kommer det att vara bra att kontrollera din nuvarande webbläsare först. Eftersom många av webbläsarna fortfarande är i utvecklingsläget (förbättring för att anpassa HTML5), kan vissa funktioner som nämns här kanske inte stödjas.

Här är några snabbtips för att kontrollera din webbläsarens kompatibilitet.

För att ytterligare förstå begränsningen för en viss webbläsare kan du hänvisa till här.

2. Texteffekter – Lägga till skugga och förhandstexteffekt i HTML5

Texteffekter i HTML5

Grundläggande skuggeffekt på text

Detta är den enklaste strängkoden som förvandlar din vanliga rubrik till en snygg text. Underskatta aldrig skuggeffekten. För att skapa denna liknande utseende kräver webbdesigner att gå igenom flera steg för bildredigering i Photoshop. Och nu krävs bara en kodrad. Skuggavståndet, färgen kan ändras till ditt hjärtainnehåll.

Kodningsprov

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

Text om förskott brandliknande effekt

Nästa tips är att visa hur HTML5-kodningen kan justeras till en ännu coolare text. Om du experimenterar tillräckligt eller hittar andra exempel är möjligheterna att anpassa effekterna oändliga. Obs: detta exempel skapas inte av något bildredigeringsprogram. Bara enkla koder i HTML5.

Kodningsprov

#fire h1 {
text-align: center;
marginal: 200px auto;
typsnittsfamilj: "League-gotiska", Kurir;
teckenstorlek: 200px; text-transform: versaler;
färg: #fff;
text-skugga: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716x10p 80px # 451b0e;
}

Andra bra exempel: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Rundat hörn i HTML5

Rundat hörn i HTML5

Att utforma webbsidans layout i HTML5 har aldrig varit så enkelt sedan introduktionen av CSS. Och nu kan du till och med ha rundade hörn av dina layoutelement! Föreställ dig detta; inte mer skivad bakgrundsbild, inga fler röriga bildfragment. Detta kommer att ge många jubel till webbdesignarna där ute.

Kodningsprov

div {
kant: 2px fast # 434343;
stoppning: 10px;
bakgrund: # e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
bredd: 500 px;
}

Obs: Moz betyder Mozilla, och webkit är för Safari och Chrome.

Andra bra exempel: http://fjd1.com/roundcorner.html

4. Skalbar vektorgrafik (SVG) i HTML5

HTML 5 tutorials, guide och prover

Skalbar vektorgrafik eller allmänt känd som (SVG) är en 2-dimensionell vektorgrafik som definieras i XML-textfiler. Med andra ord, eftersom deras DNA är baserat på XML-textfil, kan de skapas eller redigeras på webbplattformen. Vilket också innebär att det kan finnas skala enkelt, och sökmotorer kan läsa och förstå bilden.

Exempelkod

Andra bra exempel:

5. Bädda in filfil i HTML5

Video i HTML5

Här är en annan intressant del för att visa funktionerna i HTML5. Många av videon online presenteras vanligtvis för webbanvändare i form av Flash. Fram tills nyligen har inbäddning av video i HTML5 långsamt fått fart (YouTube är ett bra exempel) och Flash förlorar långsamt sin attraktionskraft. Varför är det så? Mobila användare. Om du vill att din video ska kunna spela i både iPhone- och Android-telefoner är HTML5 sättet att gå framåt.

För att bädda in videon måste du veta att det för närvarande finns 3 format som stöds av olika webbläsare; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Exempelkod

Andra bra exempel: https://www.html5rocks.com/en/tutorials/video/basics/

6. Bildspel i HTML5

HTML 5 tutorials, guide och prover

Powerpoint har varit ett synonymnamn associerat med bildpresentation. Men varför begränsa dig med en offline-presentation där du kan skapa bilder avsedda för webbpublik? HTML5 har räddat med att skapa mycket kraftfulla presentationsbilder, komplett med övergångs- och navigationsmeny. Det bästa är att du till och med kan använda 3D-transform på din presentation.

Exempelkod

före {
övergång: alla är enkla-inout;
}

pre: sväva {
bakgrundsfärg: # F2F5FE;
kantfärg: svart;
}

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

Andra bra exempel:

7. Redigerbart innehåll i HTML5

HTML 5 tutorials, guide och prover

Statisk text är så gammal skola i en tid där flexibilitet och dynamik styr världen. I HTML5 kan du definiera ett textområde som gör det redigerbart av webbanvändaren utan textredigerare.

Exempelkod

Detta innehåll är redigerbart!

Andra bra exempel: http://html5demos.com/contenteditable

8. Interaktiv webbkanfas i HTML5

HTML 5 tutorials, guide och prover

Förutom SVG i HTML5 är duk det näst bästa som någonsin har hänt på webben. Canvas möjliggör återgivning av två dimensionella former som ger interaktivitet till en hel nivå utan hjälp av Flash.

Ändå är den enkla kodningen i HTML5 som skapar en fantastisk animationsinteraktion värd att nämnas här.

Andra bra exempel: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Dra och släpp HTML5

HTML 5 tutorials, guide och prover

Dra och släpp (ibland känd som DnD) är en annan cool funktion som är tillgänglig för HTML5. Ett bra exempel skulle vara implementering av Google i deras Gmail. Om du använder någon av de webbläsare som stöds av HTML5 kan du helt enkelt dra en fil från din dator och släppa till fönstret för skrivmeddelanden. Den läggs automatiskt in som en bilaga. Hur coolt är inte det?

Provkod (nativ DnD)

document.addEventListener (‘dragstart’, funktion (händelse) {
event.dataTransfer.setData (‘text’, ‘Anpassad text’);
event.dataTransfer.effectAllowed = ‘kopia’;
}, falsk);

Andra bra exempel: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Ren CSS-datatabell i HTML5

HTML 5 handledning, guide och prover

Innan HTML5 är det också omöjligt att skapa ett presentabelt diagram genom att bara använda kodning i HTML. Dessutom är det ingen enkel uppgift att ändra datavärdet och återspegla i diagrammet. Återigen, HTML5 till undsättning. Tillsammans med CSS kan du skapa ett helt vackert diagram som gör Microsoft Excel till skam. Koderna är enkla, och allt du behöver göra är att spendera tid för att anpassa den perfekta färgen och effekten för ditt diagram.

Andra bra exempel: http://cssglobe.com/pure-css-data-chart/

Det går inte att få tillräckligt med HTML 5?

Det gör vi också! Här är mer om ämnet, kolla in dem.

* 30 Mycket coola exempel på HTML 5-webbplatser
* Komma igång med HTML 5
* Måste läsa HTML 5 självstudier 2012
* Lär dig HTML 5: 10 måste läsa lektioner

Kolla också in  denna HTML 5 kraschkurs av Robin Nixon. Robin Nixon är författaren till Learning PHP, MySQL och JavaScript; Kursen täcker stort sett allt en nybörjare behöver veta i HTML5 – inklusive grundläggande HTML-kodning, HTML5-duk för ritning, geolokalisering, lokal lagring, samt HTML5-ljud och video.

Den ursprungliga artikeln publiceras först den WHSR-blogg; det hanteras och uppdateras nu av BuildThis.io-personal.

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