Začínáme s HTML5 / CSS3: Tipy, ukázky a ukázky kódování

HTML5 získává větší popularitu a začíná vyvíjet celé webové rozhraní. Dokonce i někteří vývojáři webu uvedli, že prvky HTM5 a vizuální efekty jsou srovnatelné s Flash. Nový styl skriptování je snadno srozumitelný a možnosti pro vylepšení webového rozhraní jsou neomezené. Jak zajímavý je tento HTML5??


Tento článek má čtenářům poskytnout informace o tom, co byste měli vědět o HTML5, a co je nejdůležitější, některé tipy & triky při vytváření lehkých, atraktivních a interaktivních stránek HTML5.

1. Základní v HTML5

HTML5

Než začneme s dalším tématem v HTML5, bude dobré nejprve zkontrolovat aktuální prohlížeč. Protože mnoho prohlížečů je stále ve vývojovém režimu (vylepšení přizpůsobení HTML5), některé zde uvedené funkce nemusí být podporovatelné.

Zde je několik rychlých tipů, jak to zkontrolovat kompatibilita prohlížeče.

Chcete-li dále porozumět omezení určitého prohlížeče, můžete odkazovat na tady.

2. Textové efekty – Přidání stínového a dopředného textového efektu v HTML5

Textové efekty v HTML5

Základní stínový efekt na text

Toto je nejjednodušší jeden řetězcový kód, který transformuje váš obyčejný titulek na skvěle vypadající text. Nikdy nepodceňujte stínový efekt. Chcete-li vytvořit tento podobný vzhled, je třeba, aby webový designér prošel několika kroky úpravy obrázků ve Photoshopu. A nyní stačí jen jeden řádek kódu. Vzdálenost stínů, barvu lze změnit na obsah vašeho srdce.

Ukázka kódování

#shadow h1 {
textový stín: 0px 1px 1px rgba (0,0,0, .2);
}

Text o dopředném požárním efektu

Další tip je ukázat vám, jak je možné kódování HTML5 vylepšit do ještě chladnějšího textu. Pokud dostatečně experimentujete nebo najdete jiné příklady, možnosti přizpůsobení efektů jsou nekonečné. Poznámka: Tento příklad není vytvořen žádným softwarem pro úpravu obrázků. Jen prosté kódy v HTML5.

Ukázka kódování

#fire h1 {
zarovnání textu: střed;
okraj: 200px auto;
rodina fontů: "Liga-gotická", Kurýr;
velikost písma: 200px; textová transformace: velká písmena;
barva: #fff;
textový stín: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973790x, 10px 80px # 451b0e;
}

Další skvělý příklad: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Zaoblený roh v HTML5

Zaoblený roh v HTML5

Stylování rozložení webové stránky v HTML5 nebylo od zavedení CSS nikdy tak snadné. A nyní můžete mít dokonce zaoblené rohy prvků rozvržení! Představte si to; žádný další řezný obrázek na pozadí, žádné špinavé fragmenty obrázku. To přinese webovým designérům mnoho radosti.

Ukázka kódování

div {
rámeček: 2px pevná látka # 434343;
čalounění: 10px;
pozadí: # e3e3e3;
-poloměr mozku: 10px;
-poloměr webkit-border-radius: 10px;
šířka: 500px;
}

Poznámka: Moz znamená Mozilla a webkit je určen pro Safari a Chrome.

Další skvělý příklad: http://fjd1.com/roundcorner.html

4. Škálovatelná vektorová grafika (SVG) v HTML5

Návody, průvodce a ukázky HTML 5

Škálovatelná vektorová grafika nebo běžně známá jako (SVG) je vektorová grafika ve dvou rozměrech, která je definována v textových souborech XML. Jinými slovy, protože jejich DNA je založena na textovém souboru XML, lze je vytvořit nebo upravit na webové platformě. Což také znamená, že lze snadno škálovat a vyhledávače jsou schopny přečíst obrázek a porozumět mu.

Ukázkový kód

Další skvělé příklady:

5. Vložení filmového souboru do HTML5

Video v HTML5

Zde je další zajímavá část, která vám představí možnosti HTML5. Mnoho videí online je obvykle prezentováno webuserovi ve formě Flash. Až donedávna vkládání videa do HTML5 pomalu nabývá na síle (YouTube je dobrým příkladem) a Flash pomalu ztrácí svou atraktivitu. Proč je to tak? Mobilní uživatelé. Chcete-li, aby se vaše video mohlo přehrávat v telefonech iPhone i Android, HTML5 je cesta vpřed.

Chcete-li vložit video, musíte vědět, že v současné době existují 3 formáty podporované různými prohlížeči; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Ukázkový kód

Další skvělý příklad: https://www.html5rocks.com/en/tutorials/video/basics/

6. Prezentace snímků v HTML5

Návody, průvodce a ukázky HTML 5

Powerpoint je jméno synonymum spojené s prezentací snímků. Proč se však omezit na offline prezentaci, kde můžete vytvářet snímky určené pro webové publikum? HTML5 přišel k záchraně při vytváření mnohem výkonnějších prezentačních snímků, kompletní s přechodem a navigační nabídkou. Nejlepší na tom je, že můžete dokonce použít 3D transformaci na svou prezentaci.

Ukázkový kód

pre {
přechod: všechny 1s easy-inout;
}

pre: hover {
barva pozadí: # F2F5FE;
barva okraje: černá;
}

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

Další skvělé příklady:

7. Upravitelný obsah v HTML5

Návody, průvodce a ukázky HTML 5

Statický text je v době, kdy svět ovládá flexibilita a dynamika, tak stará škola. V HTML5 můžete definovat textovou oblast, kterou uživatel webu upraví bez textového editoru.

Ukázkový kód

Tento obsah lze upravovat!

Další skvělý příklad: http://html5demos.com/contenteditable

8. Interaktivní webové plátno v HTML5

Návody, průvodce a ukázky HTML 5

Kromě SVG v HTML5 je plátno další nejlepší věcí, která se kdy na webu stala. Canvas umožňuje vykreslování 2-rozměrných tvarů, které přináší interaktivitu na celou úroveň bez pomoci Flash.

Nicméně je zde třeba zmínit jednoduché kódování v HTML5, které vytváří úžasnou animační interakci.

Další skvělý příklad: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Drag and Drop v HTML5

Návody, průvodce a ukázky HTML 5

Drag and drop (někdy známý jako DnD) je další skvělá funkce dostupná pro HTML5. Skvělým příkladem by byla implementace společností Google do jejich Gmailu. Pokud používáte některý z podporovatelných prohlížečů HTML5, můžete jednoduše přetáhnout soubor z počítače a umístit jej do okna pro psaní zprávy. Bude automaticky přidán jako příloha. Jak je to v pohodě?

Ukázkový kód (nativní DnD)

document.addEventListener (‘dragstart’, function (event) {
event.dataTransfer.setData (‘text’, ‘Přizpůsobený text’);
event.dataTransfer.effectAllowed = ‘copy’;
}, Nepravdivé);

Další skvělý příklad: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Čistý datový graf CSS v HTML5

Návody, průvodce a ukázky HTML 5

Před HTML5 je také nemožné vytvořit reprezentativní graf pouhým použitím kódování v HTML. Kromě toho není změna datové hodnoty a promítnutí do grafu jednoduchým úkolem. Znovu, HTML5 k záchraně. Spolu s CSS můžete vytvořit naprosto krásný graf, který Microsoft Excel zahanbí. Kódy jsou jednoduché a vše, co musíte udělat, je strávit čas přizpůsobením dokonalé barvy a efektu grafu.

Další skvělý příklad: http://cssglobe.com/pure-css-data-chart/

Nelze získat dostatek HTML 5?

My též! Tady je více na toto téma, jděte se na ně podívat.

* 30 velmi cool příklady webových stránek HTML 5
* Začínáme s HTML 5
* V roce 2012 si musíte přečíst návody HTML 5
* Naučte se HTML 5: 10 Musíte si přečíst lekce

Také se podívejte  tento kurz havárie HTML 5 od Robina Nixona. Robin Nixon je autorem výuky PHP, MySQL a JavaScript; kurz pokrývá téměř vše, co nováčci potřebují vědět v HTML5 – včetně základního kódování HTML, plátna HTML5 pro kreslení, geolokace, místního úložiště, jakož i zvuku a videa HTML5.

Původní článek byl poprvé zveřejněn na Blog WHSR; nyní je spravován a aktualizován štábem BuildThis.io.

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