Začíname s HTML5 / CSS3: Tipy, ukážky a ukážky kódovania

HTML5 získava na popularite a začína vyvíjať celé webové rozhranie. Dokonca aj niektorí weboví vývojári uviedli, že prvky HTM5 a vizuálne efekty sú porovnateľné s formátom Flash. Nový štýl skriptovania je ľahko zrozumiteľný a možnosti vylepšenia webového rozhrania sú neobmedzené. Aký zaujímavý je tento kód HTML5??


Účelom tohto článku je poskytnúť čitateľom prehľad o tom, čo by ste mali vedieť o HTML5, a čo je najdôležitejšie, niektoré tipy & triky pri vytváraní ľahkých, atraktívnych a interaktívnych stránok HTML5.

1. Základné v HTML5

HTML5

Predtým, ako začneme s touto témou v HTML5, bude dobré najskôr skontrolovať aktuálny prehliadač. Pretože mnoho prehliadačov je stále vo vývojovom režime (vylepšenie na prispôsobenie HTML5), niektoré tu uvedené funkcie nemusia byť podporovateľné.

Tu je niekoľko rýchlych tipov, ako skontrolovať svoje kompatibilita prehliadača.

Ak sa chcete dozvedieť viac o obmedzení určitého prehliadača, môžete sa odvolať na tu.

2. Textové efekty – Pridanie efektu tieňa a posunu textu v HTML5

Textové efekty v HTML5

Základný efekt tieňa na text

Jedná sa o najjednoduchší jeden reťazcový kód, ktorý transformuje váš obyčajný nadpis na pekne vyzerajúci text. Nikdy nepodceňujte efekt tieňa. Na vytvorenie tohto podobného efektu je potrebné, aby webový dizajnér prešiel viacerými krokmi úpravy obrázkov vo Photoshope. Teraz už stačí iba jeden riadok kódu. Vzdialenosť tieňa, farba sa môže meniť podľa obsahu vášho srdca.

Vzorka kódovania

#shadow h1 {
textový tieň: 0px 1px 1px rgba (0,0,0, .2);
}

Text o vopred ohňom podobnom účinku

Ďalším tipom je ukázať, ako je možné kódovanie HTML5 vyladiť na text, ktorý vyzerá ešte chladnejšie. Ak experimentujete dosť alebo nájdete iné príklady, možnosti prispôsobenia účinkov sú nekonečné. Poznámka: Tento príklad nevytvára žiadny softvér na úpravu obrázkov. Len obyčajné kódy v kóde HTML5.

Vzorka kódovania

#fire h1 {
zarovnanie textu: stred;
marža: 200px auto;
font-family: "league gotický", Courier;
veľkosť písma: 200px; textová transformácia: veľké písmená;
farba: #fff;
textový tieň: 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;
}

Ďalší skvelý príklad: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Zaoblený roh v HTML5

Zaoblený roh v HTML5

Navrhovanie rozloženia webových stránok v jazyku HTML5 nebolo od zavedenia CSS nikdy také jednoduché. A teraz môžete mať dokonca zaoblené rohy prvkov rozloženia! Predstavte si to; už žiadne plátky na pozadí, žiadne špinavé fragmenty obrázkov. To prinesie webovým dizajnérom veľa fandenia.

Vzorka kódovania

div {
hranica: 2px pevná látka # 434343;
čalúnenie: 10px;
pozadia: # e3e3e3;
-polomer mozgu: 10px;
-polomer okraja webkitu: 10px;
šírka: 500px;
}

Poznámka: Moz znamená Mozilla a webkit je určený pre prehliadače Safari a Chrome.

Ďalší skvelý príklad: http://fjd1.com/roundcorner.html

4. Škálovateľná vektorová grafika (SVG) v HTML5

Príručky, príručky a ukážky HTML 5

Škálovateľná vektorová grafika alebo všeobecne známa ako (SVG) je dvojrozmerná vektorová grafika, ktorá je definovaná v textových súboroch XML. Inými slovami, pretože ich DNA je založená na textovom súbore XML, môžu sa vytvárať alebo upravovať na webovej platforme. Čo tiež znamená, že sa dá ľahko škálovať a vyhľadávacie nástroje sú schopné prečítať obrázok a porozumieť mu.

Vzorový kód

Ďalšie skvelé príklady:

5. Vloženie filmového súboru do HTML5

Video vo formáte HTML5

Tu je ďalšia zaujímavá časť, ktorá predstavuje možnosti HTML5. Mnohé z videí online sa zvyčajne poskytujú webuserovi vo forme Flash. Až donedávna vkladanie videa do jazyka HTML5 pomaly naberá na obrátkach (YouTube je dobrým príkladom) a Flash pomaly stráca svoju atraktivitu. Prečo je to tak? Mobilní používatelia. Ak chcete, aby sa vaše video mohlo prehrávať v telefónoch iPhone aj Android, HTML5 je spôsob, ako sa pohnúť vpred.

Ak chcete vložiť video, musíte vedieť, že v súčasnosti existujú 3 formáty podporované rôznymi prehliadačmi; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Vzorový kód

Ďalší skvelý príklad: https://www.html5rocks.com/en/tutorials/video/basics/

6. Prezentácia snímok v HTML5

Príručky, príručky a ukážky HTML 5

Powerpoint je synonymum mena priradené k prezentácii. Prečo sa však obmedzovať na offline prezentáciu, kde môžete vytvárať snímky určené pre webové publikum? HTML5 prišiel k záchrane pri vytváraní mocných prezentačných snímok, doplnených o ponuku prechodu a navigáciu. Najlepšie na tom je, že môžete dokonca použiť 3D transformáciu na svoju prezentáciu.

Vzorový kód

pred {
prechod: všetky 1s easy-inout;
}

pre: hover {
farba pozadia: # F2F5FE;
farba okraja: čierna;
}

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

Ďalšie skvelé príklady:

7. Upraviteľný obsah v HTML5

Príručky, príručky a ukážky HTML 5

Statický text je takou starou školou, v ktorej vládne svetu flexibilita a dynamika. V HTML5 môžete definovať textovú oblasť, ktorú urobí používateľ webu bez textového editora.

Vzorový kód

Tento obsah je možné upravovať!

Ďalší skvelý príklad: http://html5demos.com/contenteditable

8. Interaktívne webové plátno v HTML5

Príručky, príručky a ukážky HTML 5

Okrem SVG v HTML5 je plátno ďalšou najlepšou vecou, ​​ktorá sa kedy na webe stala. Canvas umožňuje vykreslenie 2-rozmerných tvarov, ktoré prinášajú interaktivitu na celú úroveň bez pomoci programu Flash.

Napriek tomu tu stojí za zmienku jednoduché kódovanie v HTML5, ktoré vytvára úžasnú animačnú interakciu.

Ďalší skvelý príklad: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Drag and Drop v HTML5

Príručky, príručky a ukážky HTML 5

Drag and drop (niekedy známy ako DnD) je ďalšia skvelá funkcia dostupná pre HTML5. Skvelým príkladom by mohla byť implementácia spoločnosťou Google do ich Gmailu. Ak používate niektorý z prehliadačov podporujúcich HTML5, môžete jednoducho pretiahnuť súbor z počítača a presunúť sa do okna písania správy. Bude automaticky pridaná ako príloha. Aké je to skvelé?

Vzorový kód (natívny DnD)

document.addEventListener (‘dragstart’, function (event) {
event.dataTransfer.setData (‘text’, ‘Prispôsobený text’);
event.dataTransfer.effectAllowed = ‘copy’;
}, nepravdivé);

Ďalší skvelý príklad: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Čistý dátový graf CSS v HTML5

Príručky, príručky a ukážky HTML 5

Pred HTML5 je tiež nemožné vytvoriť reprezentatívny graf iba pomocou kódovania v HTML. Okrem toho zmena hodnoty údajov a jej premietnutie do grafu nie je jednoduchá úloha. Znovu, HTML5 na záchranu. Spolu s CSS môžete vytvoriť úplne krásny graf, ktorý Microsoft Excel zahanbí. Kódy sú jednoduché a všetko, čo musíte urobiť, je stráviť čas prispôsobením dokonalej farby a efektu grafu.

Ďalší skvelý príklad: http://cssglobe.com/pure-css-data-chart/

Nemožno získať dosť HTML 5?

My tiež! Tu je viac o tejto téme, pozrite sa na ne.

* 30 veľmi zaujímavých príkladov webových stránok HTML 5
* Začíname s HTML 5
* V roku 2012 si musíte prečítať príručky HTML 5
* Naučte sa HTML 5: 10 Je potrebné prečítať si lekcie

Skontrolujte tiež  tento kurz havárie HTML 5 od Robina Nixona. Robin Nixon je autorom programu Learning PHP, MySQL a JavaScript; Kurz pokrýva takmer všetko, čo nováčik potrebuje vedieť v HTML5 – vrátane základného kódovania HTML, plátna HTML5 na kreslenie, geolokáciu, miestneho úložiska, ako aj zvuku a videa vo formáte HTML5..

Pôvodný článok bol prvýkrát publikovaný dňa Blog WHSR; teraz je spravovaný a aktualizovaný štábmi 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