Kom i gang med HTML5 / CSS3: tips, utstillingsvinduer og kodingsprøver

HTML5 får mer popularitet og begynner å utvikle hele webgrensesnittet. Selv noen webutviklere siterte at HTM5-elementer og visuelle effekter kan sammenlignes med Flash. Den nye skriptestilen er lett å forstå, og mulighetene for å forbedre nettgrensesnittet er ubegrensede. Så hvor interessant er denne HTML5 likevel?


Denne artikkelen er ment å gi leserne et innblikk i hva du bør vite om HTML5, og viktigst av noen tips & triks for å lage lette, attraktive og interaktive HTML5-sider.

1. Grunnleggende i HTML5

HTML5

Før vi begynner videre med dette emnet i HTML5, vil det være greit å sjekke din nåværende nettleser først. Ettersom mange av nettleserne fremdeles er i utviklingsmodus (forbedring for å tilpasse HTML5), kan det hende at noen funksjoner som er nevnt her, ikke støttes.

Her er et raskt tips for å sjekke din nettleserkompatibilitet.

For å forstå begrensningen til en bestemt nettleser videre, kan du henvise til her.

2. Teksteffekter – Legge til skygge og forhånds teksteffekt i HTML5

Teksteffekter i HTML5

Grunnleggende skyggeeffekt på tekst

Dette er den enkleste strengkoden som forvandler den ordinære overskriften til en kul tekst. Undervurder aldri skyggeeffekten. For å skape denne lignende effekten krever webdesigner å gå gjennom flere trinn i bilderedigering i Photoshop. Og nå trengs bare en kodelinje. Skyggeavstanden, fargen kan endres til ditt hjerteinnhold.

Kodingsprøve

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

Tekst på forhånd brannlignende effekt

Neste tips er å vise deg hvordan HTML5-kodingen kan finjusteres til en enda kulere tekst. Hvis du eksperimenterer nok, eller finner andre eksempler, er mulighetene for å tilpasse effektene uendelige. Merk: dette eksemplet er ikke opprettet av noe bildedigeringsprogramvare. Bare enkle koder i HTML5.

Kodingsprøve

#fire h1 {
tekstjustering: sentrum;
margin: 200px auto;
font-family: "League-gotisk", Kurer;
skriftstørrelse: 200px; tekst-transform: store bokstaver;
farge: #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;
}

Andre gode eksempler: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Avrundet hjørne i HTML5

Avrundet hjørne i HTML5

Styling av websideoppsettet i HTML5 har aldri vært så enkelt siden innføringen av CSS. Og nå kan du til og med ha avrundede hjørner av layoutelementene dine! Se for deg dette; ikke flere skiver bakgrunnsbilde, ikke flere rotete bildefragmenter. Dette vil gi mange jubel til nettdesignerne der ute.

Kodingsprøve

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

Merk: Moz betyr Mozilla, og webkit er for Safari og Chrome.

Andre gode eksempler: http://fjd1.com/roundcorner.html

4. Skalerbar vektorgrafikk (SVG) i HTML5

HTML 5 tutorials, guide og eksempler

Skalerbar vektorgrafikk eller ofte kjent som (SVG) er en 2-dimensjons vektorgrafikk som er definert i XML-tekstfiler. Med andre ord, fordi deres DNA er basert på XML-tekstfil, kan de opprettes eller redigeres på nettplattformen. Noe som også betyr at det kan være skalaer lett, og søkemotorer kan lese og forstå bildet.

Eksempelkode

Andre gode eksempler:

5. Legge ned filmfil i HTML5

Video i HTML5

Her er en annen interessant del for å vise frem egenskapene til HTML5. Mange av videoene på nettet blir vanligvis presentert for nettbruker i form av Flash. Inntil nylig får innebygd video i HTML5 sakte fart (YouTube er et godt eksempel) og Flash mister sakte sin attraktivitet. Hvorfor er det slik? Mobilbrukere. Hvis du vil at videoen skal kunne spilles av både iPhone og Android-telefoner, er HTML5 måten å gå videre.

For å legge inn videoen, må du vite at det for øyeblikket er 3 formater som støttes av forskjellige nettlesere. .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Eksempelkode

Andre gode eksempler: https://www.html5rocks.com/en/tutorials/video/basics/

6. Lysbildepresentasjon i HTML5

HTML 5 tutorials, guide og eksempler

Powerpoint har vært et synonymnavn assosiert med lysbildefremvisning. Men hvorfor begrense deg med en offline presentasjon der du kan lage lysbilder ment for nettpublikum? HTML5 har kommet til unnsetning i å lage mye kraftige presentasjonsbilder, komplett med overgangs- og navigasjonsmeny. Det beste er at du til og med kan bruke 3D-transformasjon på presentasjonen.

Eksempelkode

før {
overgang: alle er enkle inn;
}

pre: hover {
bakgrunnsfarge: # F2F5FE;
kantfarge: svart;
}

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

Andre gode eksempler:

7. Redigerbart innhold i HTML5

HTML 5 tutorials, guide og eksempler

Statisk tekst er så old-school i den tiden der fleksibilitet og dynamikk styrer verden. I HTML5 kan du definere et tekstområde som gjør det redigerbart av nettbrukeren uten tekstredigerer.

Eksempelkode

Dette innholdet er redigerbart!

Andre gode eksempler: http://html5demos.com/contenteditable

8. Interaktivt nett-lerret i HTML5

HTML 5 tutorials, guide og eksempler

Foruten SVG i HTML5, er lerret den neste beste tingen som noen gang har skjedd på nettet. Canvas tillater gjengivelse av to dimensjonsformer som gir interaktivitet til et helt nivå uten hjelp fra Flash.

Likevel er den enkle kodingen i HTML5 som skaper fantastisk animasjonsinteraksjon verdt å nevne her.

Andre gode eksempler: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Dra og slipp inn HTML5

HTML 5 tutorials, guide og eksempler

Dra og slipp (noen ganger kjent som DnD) er en annen kul funksjon som er tilgjengelig for HTML5. Et flott eksempel er implementering av Google i deres Gmail. Hvis du bruker noen av de HTML5-støttbare nettleserne, kan du ganske enkelt dra en fil fra datamaskinen din og slippe den til meldingsvinduet. Det legges automatisk inn som et vedlegg. Hvor kult er det?

Eksempelkode (naturlig DnD)

document.addEventListener (‘dragstart’, funksjon (hendelse) {
event.dataTransfer.setData (‘tekst’, ‘Tilpasset tekst’);
event.dataTransfer.effectAllowed = ‘kopi’;
}, falsk);

Andre gode eksempler: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Rent CSS-datakart i HTML5

HTML 5 tutorials, guide og eksempler

Før HTML5 er det også umulig å lage et presentabelt diagram ved å bare bruke koding i HTML. Det er ingen enkel oppgave å endre dataverdien og reflektere i diagrammet. Igjen, HTML5 til unnsetning. Sammen med CSS kan du lage et helt nydelig diagram som gjør Microsoft Excel til sjenanse. Kodene er enkle, og alt du trenger å gjøre er å bruke tid på å tilpasse den perfekte fargen og effekten til diagrammet.

Andre gode eksempler: http://cssglobe.com/pure-css-data-chart/

Kan ikke få nok av HTML 5?

Det gjør vi også! Her er mer om emnet, sjekk dem ut.

* 30 veldig kule eksempler på HTML 5 nettsteder
* Komme i gang med HTML 5
* Må lese HTML 5-veiledninger i 2012
* Lær HTML 5: 10 Må lese leksjoner

Sjekk også ut  dette HTML 5 krasjekurset av Robin Nixon. Robin Nixon er forfatteren av Learning PHP, MySQL og JavaScript; kurset dekker stort sett alt en nybegynner trenger å vite i HTML5 – inkludert grunnleggende HTML-koding, HTML5-lerret for tegning, geolokalisering, lokal lagring, samt HTML5 lyd og video.

Den originale artikkelen ble først publisert på WHSR-blogg; den er nå administrert og oppdatert av BuildThis.io-ansatte.

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