Kezdje el a HTML5 / CSS3 használatát: tippek, vitrinek és minták kódolása

A HTML5 egyre népszerűbb és elkezdi fejleszteni a teljes webes felületet. Még néhány webfejlesztő is megemlítette, hogy a HTM5 elemek és a vizuális effektusok összehasonlíthatók a Flash-rel. Az új szkriptálási stílus könnyen érthető, és a webes felület fejlesztésének lehetőségei korlátlanok. Szóval milyen érdekes ez a HTML5?


Ez a cikk az olvasók számára betekintést nyújt arról, hogy mit kell tudnia a HTML5-ről, és ami a legfontosabb: néhány tippet & trükkök a könnyű, vonzó és interaktív HTML5 oldalak készítéséhez.

1. Alapvető HTML5

HTML5

Mielőtt a HTML5 elõzõleg tovább kezdenénk a témát, jó lenne elõször ellenõrizni a jelenlegi böngészõt. Mivel sok böngésző továbbra is fejlesztési módban van (fejlesztés a HTML5 beépítéséhez), egyes itt felsorolt ​​funkciók esetleg nem támogathatók.

Itt található egy gyors tipp a saját adatainak ellenőrzéséhez böngésző kompatibilitás.

Egy bizonyos böngésző korlátozásának további megértése érdekében hivatkozhat itt.

2. Szöveges effektusok – Árnyék- és előrehaladó szöveges effektus hozzáadása a HTML5-be

Szöveges effektusok a HTML5-ben

Alapvető árnyékhatás a szövegre

Ez a legegyszerűbb karakterlánc-kód, amely átalakítja a szokásos címsort hűvös megjelenésű szöveggé. Soha nem szabad alábecsülni az árnyékhatást. Ennek a hasonló megjelenésű hatásnak a létrehozásához a webes tervezőtől több képszerkesztő lépést kell végrehajtania a Photoshop alkalmazásban. És most csak egy sor sorra van szüksége. Az árnyék távolság és a szín megváltoztatható a szíve tartalmához.

Kódoló minta

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

Előzetes tűzszerű hatás szövege

A következő tipp az, hogy megmutassuk, hogyan lehet a HTML5 kódolást egy még hűvösebb megjelenésű szöveggé alakítani. Ha elég kísérletezik, vagy talál más példákat, a hatások testreszabásának lehetőségei végtelenek. Megjegyzés: ezt a példát egyetlen képszerkesztő szoftver sem hozta létre. Csak egyszerű kódok a HTML5-ben.

Kódoló minta

#fire h1 {
szöveg igazítás: középpont;
margin: 200 képpont auto;
betűtípus család: "League-gót", Futár;
betűméret: 200 képpont; szöveg-transzformáció: nagybetűs;
szín: #fff;
text-shadow: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70xx # 973790, 10xx 80px # 451b0e;
}

További nagyszerű példa: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Lekerekített sarok a HTML5-ben

Lekerekített sarok a HTML5-ben

A weboldal elrendezésének HTML5 formázása még soha nem volt ilyen egyszerű a CSS bevezetése óta. És most elrendezett elemeinek lekerekített sarkai is vannak! Képzelje el ezt; nincs több szeletelő háttérkép, nincs több rendetlen képfragmens. Ez sok élményt fog hozni a web-tervezők számára.

Kódoló minta

div {
szegély: 2 képpont szilárd # 434343;
párnázat: 10 képpont;
háttér: # e3e3e3;
-moz-határ-sugár: 10 képpont;
-webkit-border-sugar: 10 képpont;
szélesség: 500 képpont;
}

Megjegyzés: A Moz jelentése Mozilla, a webkit pedig a Safari és a Chrome számára.

További nagyszerű példa: http://fjd1.com/roundcorner.html

4. Méretezhető vektorgrafika (SVG) a HTML5-ben

HTML 5 oktatóanyagok, útmutató és minták

A Scalable Vector Graphic vagy más néven (SVG) néven egy kétdimenziós vektorgrafika, amelyet az XML szöveges fájlok definiálnak. Más szavakkal, mivel a DNS-nek az XML szöveges fájlja van, létrehozhatók vagy szerkeszthetők a webes platformon. Ami azt is jelenti, hogy könnyen méretezhető, és a keresőmotorok képeket tudnak olvasni és megérteni.

Minta kód

További nagyszerű példák:

5. Filmfájl beágyazása a HTML5-be

Videó HTML5 formátumban

Itt van még egy érdekes rész, amely bemutatja a HTML5 képességeit. Az online videofelvételek többségét általában Flash formájában mutatják be a webfelhasználónak. A közelmúltban a videó beágyazása a HTML5-be lassan lendületet kapott (jó példa a YouTube), és a Flash lassan elveszíti vonzerejét. Miért van ez így? Mobil felhasználók. Ha azt szeretné, hogy a videód lejátszható legyen mind iPhone, mind Android telefonokon, akkor a HTML5 a továbblépés módja.

A videó beágyazásához meg kell ismernie 3 különböző formátumot, amelyeket különböző böngészők támogatnak; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Minta kód

További nagyszerű példa: https://www.html5rocks.com/en/tutorials/video/basics/

6. Diabemutató HTML5 formátumban

HTML 5 oktatóanyagok, útmutató és minták

A Powerpoint szinkronnév volt, amely társult a diák bemutatásával. De miért korlátozódik egy offline prezentációra, ahol diákat készíthet a webes közönség számára? A HTML5 nagy segítségre került a nagy teljesítményű prezentációs diák létrehozása során, kiegészítve az átmeneti és navigációs menüvel. A legjobb az egészben, ha 3D-s átalakítást is alkalmazhat a bemutatóján.

Minta kód

elő {
átmenet: mindegyik egyszerűsíti a bejutást;
}

pre: lebeg {
háttér szín: # F2F5FE;
szegélyszín: fekete;
}

div {
transzformáció: forgatás3d (1,1,0, 45 fok);
}

További nagyszerű példák:

7. Szerkeszthető tartalom a HTML5-ben

HTML 5 oktatóanyagok, útmutató és minták

A statikus szöveg olyan régi iskola a korban, amikor a rugalmasság és a dinamika uralja a világot. A HTML5-ben meghatározhat egy olyan szöveges területet, amelyet szerkeszthetővé tett a webes felhasználó a szövegszerkesztő nélkül.

Minta kód

Ez a tartalom szerkeszthető!

További nagyszerű példa: http://html5demos.com/contenteditable

8. Interaktív webes vászon HTML5-ben

HTML 5 oktatóanyagok, útmutató és minták

A HTML5-ben az SVG mellett a vászon a következő legjobb dolog, ami valaha történt az interneten. A vászon lehetővé teszi olyan 2 dimenziós alakzatok renderelését, amelyek az interaktivitást egy egész szintre állítják a Flash segítség nélkül.

Ennek ellenére érdemes megemlíteni a HTML5 egyszerű kódolását, amely elképesztő animációs interakciót hoz létre.

További nagyszerű példa: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Húzza a HTML5-be

HTML 5 oktatóanyagok, útmutató és minták

A drag and drop (néha DnD néven ismert) egy másik remek funkció, amely a HTML5 számára elérhető. Nagyszerű példa erre a Google általi végrehajtás a Gmail-ben. Ha bármelyik HTML5 támogatható böngészőt használ, akkor egyszerűen csak húzhat egy fájlt a számítógépről és dobhatja az üzenet írása ablakba. Automatikusan hozzáadódik mellékletként. Mennyire jó?

Minta kód (natív DnD)

document.addEventListener (‘dragstart’, függvény (esemény) {
event.dataTransfer.setData (‘szöveg’, ‘testreszabott szöveg’);
event.dataTransfer.effectAllowed = ‘copy’;
}, hamis);

További nagyszerű példa: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Tiszta CSS adatdiagram HTML5-ben

HTML 5 oktatóanyagok, útmutató és minták

A HTML5 elõtt szintén lehetetlen elõkészíthetõ diagramot létrehozni a HTML kódolás segítségével. Ezenkívül az adatérték megváltoztatása és a diagramban való tükrözés nem egyszerű feladat. Ismét HTML5 a mentésre. A CSS-sel együtt létrehozhat egy abszolút gyönyörű diagramot, amely szégyenteljesíti a Microsoft Excel-t. A kódok egyszerűek, és csak annyit kell tennie, hogy időt töltsön a diagram tökéletes színének és effektusának testreszabásához.

További nagyszerű példa: http://cssglobe.com/pure-css-data-chart/

Nem tudok elég HTML 5-et megkapni?

Ahogy mi is! Itt van még a témáról, nézd meg őket.

* 30 nagyon jó példa a HTML 5 webhelyekre
* Az HTML 5 használatának megkezdése
* Olvassa el a HTML 5 oktatóanyagokat 2012-ben
* Tanulj HTML 5: 10 tanulságokat

Ezenkívül nézd meg  ez a HTML 5 összeomlási tanfolyam, Robin Nixon készítette. Robin Nixon a PHP, a MySQL és a JavaScript tanulmányozója; a tanfolyam nagyjából mindent tartalmaz, amelyet egy kezdőnek tudnia kell a HTML5-ben – beleértve az alapvető HTML kódolást, HTML5 vászon rajzot, földrajzi helymeghatározást, helyi tárolást, valamint a HTML5 hangot és videót.

Az eredeti cikket először közzétették WHSR Blog; most a BuildThis.io személyzet kezeli és frissíti.

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