Aan de slag met HTML5 / CSS3: tips, showcases en coderingsvoorbeelden

HTML5 wint aan populariteit en begint de hele webinterface te evolueren. Zelfs sommige webontwikkelaars gaven aan dat HTM5-elementen en visuele effecten vergelijkbaar zijn met Flash. De nieuwe scriptstijl is gemakkelijk te begrijpen en de mogelijkheden om de webinterface te verbeteren zijn onbeperkt. Dus hoe interessant is deze HTML5 sowieso?


Dit artikel is bedoeld om lezers inzicht te geven in wat u moet weten over de HTML5 en vooral enkele tips & trucs voor het maken van lichtgewicht, aantrekkelijke en interactieve HTML5-pagina’s.

1. Basis in HTML5

HTML5

Voordat we verder gaan met dit onderwerp in HTML5, is het goed om eerst je huidige browser te controleren. Aangezien veel van de browsers nog in de ontwikkelingsmodus zijn (verbetering voor HTML5), zijn sommige hier genoemde functies mogelijk niet ondersteunbaar.

Hier zijn een paar snelle tips om je te controleren browser compatibiliteit.

Om de beperking van een bepaalde browser verder te begrijpen, kunt u verwijzen naar hier.

2. Teksteffecten – Schaduw toevoegen en teksteffect bevorderen in HTML5

Teksteffecten in HTML5

Basisch schaduweffect op tekst

Dit is de eenvoudigste tekenreekscode die uw gewone kop verandert in een cool ogende tekst. Onderschat nooit het schaduweffect. Om dit soortgelijk ogende effect te creëren, moet de webdesigner meerdere stappen van beeldbewerking in Photoshop doorlopen. En nu is er maar één regel code nodig. De schaduwafstand, kleur kan naar hartelust worden veranderd.

Coderingsvoorbeeld

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

Tekst op voorwaarts vuurachtig effect

De volgende tip is om u te laten zien hoe de HTML5-codering kan worden aangepast tot een nog cooler ogende tekst. Als je genoeg experimenteert of andere voorbeelden vindt, zijn de mogelijkheden om de effecten aan te passen eindeloos. Let op: dit voorbeeld is niet gemaakt door enige beeldbewerkingssoftware. Gewoon gewone codes in HTML5.

Coderingsvoorbeeld

#fire h1 {
text-align: center;
marge: 200px auto;
font-familie: "League-Gothic", Koerier;
lettergrootte: 200px; text-transform: hoofdletters;
kleur: #fff;
tekstschaduw: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10px -90px 80px # 451b0e;
}

Ander geweldig voorbeeld: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Afgeronde hoek in HTML5

Afgeronde hoek in HTML5

Het opmaken van de webpagina-indeling in HTML5 is nog nooit zo eenvoudig geweest sinds de introductie van CSS. En nu kunt u zelfs afgeronde hoeken van uw lay-outelementen hebben! Stel je dit eens voor; geen achtergrondafbeelding meer, geen rommelige afbeeldingsfragmenten meer. Dit zal veel gejuich brengen bij de webontwerpers die er zijn.

Coderingsvoorbeeld

div {
border: 2px solid # 434343;
opvulling: 10px;
achtergrond: # e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
breedte: 500px;
}

Opmerking: Moz betekent Mozilla en webkit is voor Safari en Chrome.

Ander geweldig voorbeeld: http://fjd1.com/roundcorner.html

4. Schaalbare vectorafbeelding (SVG) in HTML5

HTML 5-zelfstudies, handleiding en voorbeelden

Scalable Vector Graphic of algemeen bekend als (SVG) is een tweedimensionale vectorgrafiek die wordt gedefinieerd in XML-tekstbestanden. Met andere woorden, omdat hun DNA is gebaseerd op een XML-tekstbestand, kunnen ze worden gemaakt of bewerkt op het webplatform. Wat ook betekent dat er gemakkelijk schaalbaarheid is en dat zoekmachines de afbeelding kunnen lezen en begrijpen.

Voorbeeldcode

Andere geweldige voorbeelden:

5. Inbedding filmbestand in HTML5

Video in HTML5

Hier is nog een interessant onderdeel om de mogelijkheden van HTML5 te laten zien. Veel van de online video’s worden meestal in de vorm van Flash aan webgebruikers gepresenteerd. Tot voor kort won het insluiten van video in HTML5 langzaam aan vaart (YouTube is een goed voorbeeld) en verliest Flash langzaam zijn aantrekkelijkheid. Waarom is dat zo? Mobiele gebruikers. Als je wilt dat je video op zowel iPhone- als Android-telefoons kan worden afgespeeld, is HTML5 de manier om verder te gaan.

Om de video in te sluiten, moet u weten dat er momenteel 3 formaten zijn die door verschillende browsers worden ondersteund; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Voorbeeldcode

Ander geweldig voorbeeld: https://www.html5rocks.com/en/tutorials/video/basics/

6. Diapresentatie in HTML5

HTML 5-zelfstudies, handleiding en voorbeelden

Powerpoint is een synoniemennaam geassocieerd met diapresentatie. Maar waarom zou u zich beperken tot een offline presentatie waar u dia’s kunt maken die bedoeld zijn voor een webpubliek? HTML5 is te hulp gekomen bij het maken van veel krachtige presentatiedia’s, compleet met overgangs- en navigatiemenu. Het beste is dat u zelfs 3D-transformatie op uw presentatie kunt toepassen.

Voorbeeldcode

pre {
overgang: alle 1s gemak-in;
}

pre: hover {
achtergrondkleur: # F2F5FE;
randkleur: zwart;
}

div {
transformeren: rotate3d (1,1,0, 45deg);
}

Andere geweldige voorbeelden:

7. Bewerkbare inhoud in HTML5

HTML 5-zelfstudies, handleiding en voorbeelden

Statische tekst is zo ouderwets in het tijdperk waarin flexibiliteit en dynamiek de wereld regeren. In HTML5 kunt u een tekstgebied definiëren dat door de webgebruiker kan worden bewerkt zonder teksteditor.

Voorbeeldcode

Deze inhoud is bewerkbaar!

Ander geweldig voorbeeld: http://html5demos.com/contenteditable

8. Interactief webcanvas in HTML5

HTML 5-zelfstudies, handleiding en voorbeelden

Naast SVG in HTML5, is canvas het beste dat ooit op internet is gebeurd. Canvas maakt weergave van tweedimensionale vormen mogelijk die interactiviteit naar een heel niveau brengen zonder de hulp van Flash.

Desalniettemin is de eenvoudige codering in HTML5 die verbazingwekkende animatie-interactie creëert de moeite waard om hier genoemd te worden.

Ander geweldig voorbeeld: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Sleep en zet neer in HTML5

HTML 5-zelfstudies, handleiding en voorbeelden

Slepen en neerzetten (ook wel bekend als DnD) is een andere coole functie die beschikbaar is voor HTML5. Een goed voorbeeld is de implementatie door Google in hun Gmail. Als u een van de HTML5-ondersteunde browsers gebruikt, kunt u eenvoudig een bestand van uw computer slepen en neerzetten in het berichtvenster voor opstellen. Het wordt automatisch toegevoegd als bijlage. Hoe cool is dat?

Voorbeeldcode (native DnD)

document.addEventListener (‘dragstart’, function (event) {
event.dataTransfer.setData (‘tekst’, ‘Aangepaste tekst’);
event.dataTransfer.effectAllowed = ‘kopiëren’;
}, false);

Ander geweldig voorbeeld: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Pure CSS-gegevenskaart in HTML5

HTML 5-zelfstudies, handleiding en voorbeelden

Vóór HTML5 is het ook onmogelijk om een ​​presentabele grafiek te maken door alleen codering in HTML te gebruiken. Bovendien is het veranderen van de gegevenswaarde en het weerspiegelen in de grafiek geen eenvoudige taak. Nogmaals, HTML5 schiet te hulp. Samen met CSS kunt u een absoluut prachtige grafiek maken die Microsoft Excel te schande maakt. De codes zijn eenvoudig en u hoeft alleen maar tijd te besteden aan het aanpassen van de perfecte kleur en effect voor uw grafiek.

Ander geweldig voorbeeld: http://cssglobe.com/pure-css-data-chart/

Kan geen genoeg krijgen van HTML 5?

Wij ook! Hier is meer over het onderwerp, ga ze bekijken.

* 30 zeer coole voorbeelden van HTML 5-websites
* Aan de slag met HTML 5
* Moet HTML 5-zelfstudies lezen in 2012
* Leer HTML 5:10 moet lessen lezen

Kijk ook eens  deze HTML 5-spoedcursus door Robin Nixon. Robin Nixon is de auteur van PHP, MySQL en JavaScript leren; de cursus behandelt vrijwel alles wat een beginner moet weten in HTML5 – inclusief eenvoudige HTML-codering, HTML5-canvas voor tekenen, geolocatie, lokale opslag, evenals HTML5-audio en -video.

Het originele artikel is voor het eerst gepubliceerd op WHSR Blog; het wordt nu beheerd en bijgewerkt door BuildThis.io-medewerkers.

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