‘CSS3’ címkét tartalmazó cikkek
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
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 »
Ebben a cikkben a CSS háttérkép kezelési lehetőségeit mutatom be nektek. Valójában érintőlegesen már foglalkoztunk vele, de külön szeretnék kiemelni egy új lehetőséget, amely a CSS3-ban mutatkozott be, ez nem más, mint a multi-background. Segítségével több hátteret tudunk megadni, ami nagyon hasznos lehet bizonyos esetekben. No, de ne szaladjunk ennyire előre.
1. Background
Ahogy azt bizonyára tudjátok, szinte bármely DOM elemhez rendelhetünk hátteret, de talán a body az, amelyhez a leggyakrabban rendelünk. Elsőként tekintsük át a CSS background syntax-át és nézzünk meg egy-két hozzájuk kötődő tulajdonságot. (A profik ugorjanak a kettes ponthoz, hiszen ezt ők már bizonyára tudják, de a most ismerkedőknek hasznos lehet.)
a, background-color
Ennek segítségével, a háttér színét tudjuk beállítani.
Használata: Tovább olvasom »
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 »
Egy kis szünet után egy újabb összefoglaló cikket hoztam nektek a CSS3 border (szegély,keret kinek melyik tetszik jobban) frontról. Természetesen ezek egy része már a korábbi verziókban is megtalálható volt, de próbálok hangsúlyt fektetni az újdonságok kiemelésére, azok bemutatására. A szegélyeket számtalan területen tudjuk hasznosítani és jelentősen fel tudják dobni egy-egy oldal kinézetét. Érdemes velük komolyabban foglalkozni. Nézzük, hogy a CSS3 segítségével hogy tudunk szegélyeket definiálni, illetve, azoknak milyen típusai vannak.
1. Szegélyek
Maga az utasítás egy rövidítés, ami az alábbi al-tulajdonságokat hordozza, illetve definiálható a segítségével.
border: [ border-style|border-width ||color|transparent || inherit]
Használatára egy példa:
border:solid 5px #000;
Nézzük az egyes tulajdonságokat egyesével
CSS3 border-style