Ahogy azt már egy korábbi cikkemben (ahol a HTML5 input types került bemutatásra) megemlítettem, a HTML5 range element egy mostohagyerek. Nem gondolom, hogy a böngészők a normális támogatást ne tudnák megoldani, de úgy néz ki, nincs rá idejük az egyre gyorsuló verziószám háborúban. Az általam bemutatott megoldás IE alatt nem működik, de a többi tesztelt böngészőben igen.
HTML5 range
Kezdjük egy kis múltidézővel.A range beviteli típus a tartományok közötti értékek bevitelét segíti, egy csúszkával. Használata:
<input type="range" value="500" min="0" max="1000" step="100" id="egyid" />
Attribútumai, ahogy látható is:
- value - Az érték lehet bármilyen érvényes lebegőpontos szám (nem muszáj egész számnak lennie). Az alapértelmezett érték a minimum és maximum értékek fele.
- min – A tartomány minimum értéke, alapértelmezésben:0
- max – A tartomány maximum értéke, alapértelmezésben: 100
- step - A lépésköz, alapértelmezésben:1 Tovább olvasom »
Sokáig tépelődtem, hogy belefogjak-e, ebbe a poszteres cikkbe. Mert az előző CSS3 @font-face-el foglalkozó után záporoztak a levelek. Egy részében dicsérték az ötletet, hogy foglalkozzunk többet a tipográfiával, egy részében meg ijedten kérdezték, hogy ugye nem fogjuk agyon zsúfolni különböző betűtípusokkal az odalakat amiket készítünk. Azt gondolom a második reakció is teljes mértékben jogos. Hiszen, plusz terhelés a webszervernek, plusz sávszélesség annak aki meg akarja nézni és ráadásul valóban rettenetesen meg lehet csúfítani vele az oldalunkat.
Ami miatt szerintem mégis érdemes ezen gondolkodni, az az, hogy az ésszerű használat és a táblagépek egyre nagyobb elterjedése okán (nézd meg az előző cikk példáját egy táblagépen, szerintem korrekt, jobban mutat mint monitoron), a tipográfia felértékelődése várható. Persze, addig még sok víz lefolyik a Dunán, de ettől a téma nyitott, érdekes és talán megtérül az idő amit rászánunk.
Ebben a cikkben egy egyszerű posztert fogunk elkészíteni, ami akár lehetne egy felhívás, vagy akár egy komplett hirdetés. De ne szaladjunk előre. Egy barátom kérte a héten a segítségem, hogy a cégük hirdetésére szolgáló webes posztert nézzem át és véleményezzem, esetleg dolgozzam át. Ekkor gyúlt a fény és kezdtem vizsgálni a lehetőségét, hogy a CSS3 és a @font-face kombinálásával milyen posztereket lehet készíteni. Ennek az eredményét fogjátok olvasni, sok hozzáfűznivalót, újdonságot az előző cikkek után már nem fogtok tapasztalni, de ettől eltekintve, szerintem érdekes opció. Itt jegyezném meg, hogy @font-face nélkül is lehet ilyet csinálni, mielőtt rám sütitek, hogy: de hiszen ez már a CSS3 elődjeiben is megvolt.
CSS3 poszter
Egészen eddig meglehetősen bonyolult volt a saját betűtípusok használata és a böngészők jobb esetben nem hibával, hanem valami saját betűtípussal cserélték ki az általunk definiáltat. Engedjétek meg, hogy a CSS3-nak bemutassam a font modulját, ami sokaknak már ismerős lesz, de azért remélem mindenki talál benne magának való részt. Természetesen, a CSS1 és CSS2-ben is megtalálható volt a zöme az itt bemutatásra kerülő lehetőségeknek. De pl. a @font-face csak a CSS3-ban tudott igazán teret nyerni. Szerencsére a böngészők is hellyel közzel már támogatják. Az itt bemutatott példákat teszteltem a népszerűbb böngészőkkel (IE, Firefox, Safari, Chrome), azok legfrissebb változatával, tehát ha valami nem jelenne meg jól, akkor itt a lehetőség, hogy frissítsétek a böngészőtöket (http://download.chip.eu/hu/Boengesz__1906.html). Megéri!
@font-face demo
Talán nem kell elmondanom, hogy mennyire siralmas a helyzet, ha tényleg szép weboldalt, egyedi fontokat akarunk használni, erre kínál egy jó megoldást a CSS3 font modulja. Lássuk milyen alapvető lehetőségeink vannak, azokat hogyan használhatjuk. Tovább olvasom »
Mivel többen jeleztétek, hogy több galéria is lehetne az oldalon, úgy gondoltam egy másik számomra érdekes galéria modult mutatnék be nektek. Ez nem más, mint a polaroid technikára hajazó megjelenítés. A példában ismét a HTML5, valamint főként a CSS3-ra fogunk építkezni JavaScript nélkül. Itt is külön mutatnám be nektek a HTML5 és a CSS3 részt. A demókat érdemes Firefox-ban vagy Chrome-ban megtekinteni, mert ugyan az IE egy szuper böngésző, de nem 100%-ig támogatja a CSS3-at. A kódból kiemelném a box-shadow és a transform: rotate elemeket.
Nézzük is meg ezeknek a paraméterezését, hogy is működnek.
- box-shadow – Szerintem az egyik legjobb újdonság, mert kép felhasználás nélkül tudunk árnyékolást készíteni vele. Használata:
box-shadow: horizontális árnyék, vertikális árnyék, homályosítás rgba(szín, átlátszóság) A galériánkban aktívan fogjuk használni. - transform: rotate (deg) – Elforgatás, szintén nagyon hasznos a képgalériák készítéséhez.
Polaroid galéria demo