Begin met HTML5 / CSS3: wenke, vertoonvensters en kodes vir voorbeelde

HTML5 word al hoe meer gewild en begin die hele webkoppelvlak ontwikkel. Selfs sommige webontwikkelaars het aangehaal dat HTM5-elemente en visuele effekte vergelykbaar is met Flash. Die nuwe skrifstyl is maklik om te verstaan ​​en die vermoë om die webkoppelvlak te verbeter, is onbeperk. Hoe interessant is hierdie HTML5 in elk geval?


Hierdie artikel is bedoel om lesers ‘n insig te gee oor wat u moet weet oor die HTML5, en die belangrikste van die wenke & probeer om liggewig, aantreklik en interaktief HTML5-bladsye te skep.

1. Basies in HTML5

HTML5

Voordat ons verder begin met hierdie onderwerp in HTML5, is dit goed om eers die huidige blaaier na te gaan. Aangesien baie van die blaaiers nog in die ontwikkelingsmodus is (verbetering om die HTML5 te akkommodeer), is dit moontlik dat sommige funksies wat hier genoem word, nie ondersteunbaar is nie.

Hier is ‘n vinnige wenke om na te gaan blaaierversoenbaarheid.

U kan verwys na die beperking van ‘n sekere blaaier verder hier.

2. Tekseffekte – Voeg skaduwee en vooraf-effek in HTML5 toe

Tekseffekte in HTML5

Basiese skadu-effek op teks

Dit is die eenvoudigste stringkode wat u gewone kop in ‘n mooi teks omskep. Moet nooit die skadu-effek onderskat nie. Om hierdie soortgelyke effek te bewerkstellig, vereis dat die webontwerper verskeie stappe van beeldbewerking in Photoshop deurmaak. En nou is dit net ‘n kodelyn. Die skaduwee-afstand, kleur kan na u hartinhoud verander.

Koderingsmonster

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

Teks oor vooraf vuuragtige effek

Die volgende wenk is om u te wys hoe die HTML5-kodering in ‘n nog koeler teks kan opmaak. As u genoeg eksperimenteer of ander voorbeelde vind, is die moontlikhede om die effekte aan te pas oneindig. Opmerking: hierdie voorbeeld word nie deur enige beeldbewerkingsagteware geskep nie. Net gewone kodes in HTML5.

Koderingsmonster

#vuur h1 {
teksbelyning: middelpunt;
marge: 200 px outomaties;
Font familie: "League-Gotiese", Courier;
lettergrootte: 200px; teks-transform: hoofletters;
kleur: #fff;
tekskadu: 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 80px # 451b0e;
}

Nog ‘n goeie voorbeeld: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Afgeronde hoek in HTML5

Afgeronde hoek in HTML5

Die ontwerp van die webbladsy in HTML5 was nog nooit so maklik sedert die bekendstelling van CSS nie. En nou kan u selfs afgeronde hoeke van u uitlegelemente hê! Stel jou voor; nie meer snye agtergrondprentjies nie, geen slordige prentfragmente meer nie. Dit sal baie gejuig bring vir die webontwerpers wat daar is.

Koderingsmonster

div {
rand: 2px soliede # 434343;
opvulling: 10px;
agtergrond: # e3e3e3;
-moz-border-radius: 10px;
-webkit-grens-radius: 10px;
breedte: 500 px;
}

Opmerking: Moz beteken Mozilla, en webkit is vir Safari en Chrome.

Nog ‘n goeie voorbeeld: http://fjd1.com/roundcorner.html

4. Skaalbare vektorgrafika (SVG) in HTML5

HTML 5 tutoriale, gids en voorbeelde

Skaalbare vektorgrafika of algemeen bekend as (SVG) is ‘n 2-dimensie vektorgrafiek wat in XML-tekslêers gedefinieër word. Met ander woorde, omdat hul DNA gebaseer is op ‘n XML-tekslêer, kan dit op die webplatform geskep of geredigeer word. Wat ook beteken dat daar maklik skaal is, en soekenjins kan die beeld lees en verstaan.

Voorbeeldkode

Ander wonderlike voorbeelde:

5. Die inbed van filmlêers in HTML5

Video in HTML5

Hier is nog ‘n interessante deel om die funksies van HTML5 ten toon te stel. Baie van die video’s aanlyn word gewoonlik aan die webgebruiker in die vorm van Flash aangebied. Tot onlangs is die inbedding van video in HTML5 stadig besig om momentum te kry (YouTube is ‘n goeie voorbeeld) en Flash verloor sy aantreklikheid stadig. Waarom is dit so? Mobiele gebruikers. As u wil hê dat u video in iPhone- sowel as Android-fone kan speel, is HTML5 die manier om vorentoe te beweeg.

As u die video wil inbed, moet u weet dat daar tans drie formate is wat deur verskillende blaaiers ondersteun word; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Voorbeeldkode

Nog ‘n goeie voorbeeld: https://www.html5rocks.com/en/tutorials/video/basics/

6. Skyfie-aanbieding in HTML5

HTML 5 tutoriale, gids en voorbeelde

Powerpoint is ‘n naamnaam wat geassosieer word met skyfievoorstelling. Maar waarom beperk u u met ‘n aflyn-aanbieding waar u skyfies kan maak wat bedoel is vir die webgehoor? HTML5 het tot die redding gekom deur baie kragtige aanbiedingsskyfies te skep, kompleet met oorgangs- en navigasiekieslys. Die beste is dat u selfs 3D-transform op u aanbieding kan toepas.

Voorbeeldkode

voor {
oorgang: alles is maklik;
}

pre: hover {
agtergrondkleur: # F2F5FE;
randkleur: swart;
}

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

Ander wonderlike voorbeelde:

7. Bewerkbare inhoud in HTML5

HTML 5 tutoriale, gids en voorbeelde

Statiese teks is so oud in die tyd waarin buigsaamheid en dinamiek die wêreld regeer. In HTML5 kan u ‘n teksarea definieer wat deur die webgebruiker bewerkbaar gemaak kan word sonder teksredakteur.

Voorbeeldkode

Hierdie inhoud is redigeerbaar!

Nog ‘n goeie voorbeeld: http://html5demos.com/contenteditable

8. Interaktiewe web-doek in HTML5

HTML 5 tutoriale, gids en voorbeelde

Behalwe SVG in HTML5, is doek die volgende beste ding wat ooit op die web gebeur het. Canvas maak dit moontlik om twee dimensievorms weer te gee wat interaktiwiteit op ‘n hele vlak bring sonder die hulp van Flash.

Nietemin, die eenvoudige kodering in HTML5 wat ongelooflike animasie-interaksie skep, is die moeite werd om hierin te noem.

Nog ‘n goeie voorbeeld: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Sleep en laat HTML5 in

HTML 5 tutoriale, gids en voorbeelde

Drag and drop (soms bekend as DnD) is nog ‘n cool funksie wat beskikbaar is vir HTML5. ‘N Goeie voorbeeld is implementering deur Google in hul Gmail. As u enige van die HTML5-ondersteunbare blaaiers gebruik, kan u ‘n lêer van u rekenaar sleep en na die komposboodskapvenster val. Dit sal outomaties as ‘n aanhangsel bygevoeg word. Hoe cool is dit nie?

Voorbeeldkode (native DnD)

document.addEventListener (‘dragstart’, funksie (gebeurtenis) {
event.dataTransfer.setData (‘teks’, ‘Aangepaste teks’);
event.dataTransfer.effectAllowed = ‘kopie’;
}, onwaar);

Nog ‘n goeie voorbeeld: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Suiwer CSS-gegewenskaart in HTML5

HTML 5 tutoriale, gids en voorbeelde

Voor HTML5 is dit ook onmoontlik om ‘n presentabele kaart te skep deur net kodering in HTML te gebruik. Verder is dit nie ‘n eenvoudige taak om die datawaarde te verander en dit in die kaart te weerspieël nie. Weereens, HTML5 tot die redding. Saam met CSS kan u ‘n absoluut pragtige kaart skep wat Microsoft Excel skaam maak. Die kodes is eenvoudig, en alles wat u hoef te doen is om tyd te spandeer om die perfekte kleur en effek vir u kaart aan te pas.

Nog ‘n goeie voorbeeld: http://cssglobe.com/pure-css-data-chart/

Kan nie genoeg van HTML 5 kry nie?

Ons ook! Hier is meer oor die onderwerp, gaan kyk gerus.

* 30 Baie oulike voorbeelde van HTML 5-webwerwe
* Aan die begin met HTML 5
* Moet HTML 5-tutoriale in 2012 lees
* Leer HTML 5: 10 moet lesse lees

Kyk ook gerus  hierdie HTML 5-ongelukskursus deur Robin Nixon. Robin Nixon is die skrywer van Learning PHP, MySQL en JavaScript; die kursus dek ongeveer alles wat ‘n beginner in HTML5 moet weet – insluitend basiese HTML-kodering, HTML5-doek vir teken, geolokalisering, plaaslike berging, sowel as HTML5-klank en video.

Die oorspronklike artikel word die eerste keer op WHSR Blog; dit word nou bestuur en bygewerk deur BuildThis.io-personeel.

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