A ‘CSS3 Font’ kategória archívuma
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
Egy kis kimaradás után, a CSS3 témakörben hoztam nektek egy újabb cikket. Az előzőekben bemutattam nektek a keretezésben rejlő lehetőségeket, most nézzük meg, hogy a szövegeinkkel mit tudunk tenni, hogy még szebbek és látványosabbak legyenek. A CSS3 és már elődei is számos szöveg effekttel rendelkeztek. Egy két a régebbiek által támogatott tulajdonság is bekerült a cikkbe, de főként az újdonságokra próbálom a hangsúlyt fektetni. Nézzük mik az alapvető eszközeink és hogyan tudjuk őket használni.
1. Text-shadow
Szerintem talán az egyik legjobb újdonság, hiszen az árnyékok nagyon fel tudják dobni a weboldalainkon elhelyezett szöveget. Persze, mint mindent ezt sem szabad túlzásba vinni. Lássuk, hogy használjuk:
CSS3 text-shadow példa
text-shadow: h-shadow v-shadow blur color;
Ahogy látható, maga az utasítás nem túl bonyolult. 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 »