Egy nagyon jópofa HTML5 referenciára akadtam a minap, gondoltam megosztom veletek.
A poszter a következő linken érhető el: http://www.xhtml-lab.com/html5-poster/pdf/HTML5-Reference-Poster.pdf
Gondolom amikor bevezették, közületek sokan kipróbálták majd -mint ahogy én is-, visszaváltottak a Flash verzióra. Fagyott, kidobott a videóból, ha az elején volt valami szöveg, akkor a film eltűnt mögüle.
Végre elért arra a szintre a fejlesztés, hogy most már érdemes használni. Sőt, számos tesztet lefuttattam és közel 30%-al kevesebb teljesítményt foglal le magának, ami akkumulátor üzemidőben egy kis pluszt jelent nekünk.
Támogatott böngészők
- Firefox 4 (WebM)
- Google Chrome (WebM)
- Opera 10.6+ (WebM)
- Apple Safari (h.264, 4+ verzió)
- Microsoft Internet Explorer 9 (h.264, WebM)
Ha WebM formátumban elérhető videókat keresel, a keresésnél csak add hozzá a webm szót a keresett kifejezéshez
Ha ki akarod próbálni, itt tudsz váltani: http://www.youtube.com/html5
A következőkben egy nagyon egyszerű példát mutatok be nektek, hogy a tipográfia és a CSS3 animációs képessége miként teheti esztétikailag gazdagabbá weboldalainkat. A Példában egy kis jQuery-t is használunk. Az Internet Explorer kivételével az összes böngésző támogatja a CSS3 animációt. Javasolt böngészők: (Firefox vagy Chrome).
Az előző cikkben (CSS3 animáció) már bemutattam, hogy miként is működik az animációs modul. Így itt most csak a tipográfia részével foglalkozunk. A példámban a régebben már ismertetett @font-face megoldást is használom, hogy egyedi betűtípusokkal is gazdagodjon az animációm.
CSS3 animáció kiinduló állapot
http://www.atari.com/arcade#!/arcade/atari-promo
HTML5-ben készült Atari játékokat tudtok itt kipróbálni. Nézzétek meg a developer guide-ot is, érdemes!
Jó szórakozást!
A következőkben a CSS3 animációs képességeit, azok használatának módját szeretném bemutatni nektek. A CSS3 animációt a piacon levő böngészők közül csak az Internet Explorer nem támogatja, így érdemes valamelyik másikat is beszerezni, ha még nem rendelkezel vele; például a Firefoxot vagy a Chrome-ot.
Ez a kis kitérő után tekintsük át, hogy miként is működik a CSS3 animáció:
- @keyframes – A segítségével definiálhatjuk magát az animációt, from{ paraméterek } – to { paraméterek } vagy %-os értékekkel, ahogy a példámban is láthatjátok majd.
- animation – A rövid forma segítségével lehet megadni az alábbi opciókat.
animation: |name |duration| timing-function| delay |iteration-count| direction; - animation-name – A @keyframes animációnk egyedi nevét adhatjuk meg a segítségével.
- animation-duration – Az animáció hosszát, időtartamát definiáljuk vele. Alapértelmezésben: 0. Pl.: animation-duration: 5s;
- animation-timing-function – Az animáció módját állítjuk vele. Alapértelmezésben: “ease”
Opciói:
linear – Egyenletes sebességgel halad az animáció “elejétől a végéig” (javasolt)
ease – Lassan indul, majd gyorsul és a végén újra lassan fejeződik be.
ease-in – Lassan induló, majd normál tempóban megy végig az animáció
ease-out – Normál tempóban kezdődő és lassan végződő animáció
ease-in-out – Lassan induló és végződő animáció - animation-delay – Az animáció indulásának késleltetése. Alapértelmezésben 0 Pl.: animation-delay:2s; (2 másodperccel késleltetve)
- animation-iteration-count – A segítségével megadhatjuk, hogy hányszor játssza le az animációt. Alapértelmezésben 1
- animation-direction – Az animáció irányát adhatjuk meg vele. Alapértelmezésben “normal” Opcionálisan “alternate” (nálam a példában backwards)
- animation-play-state – Az animáció szüneteltetésére és futtatására adhatunk vele utasítást. Alapértelmezésben “running” Opcionálisan “paused”
Mivel a CSS3 még nem teljes-körűen támogatott célszerű mindent a böngészőknek kedvezve definiálni, pl. így: Tovább olvasom »