A ‘CSS3 alapok’ kategória archívuma
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 »
Sokáig tanakodtam, hogy elővegyem-e ezt a témát, mert sokan sokféleképp közelítették meg. Van aki úgy gondolja, hogy áldás, van aki egyenesen elveti a használatát mert bonyolult (szerintem nem az), de abban mindenesetre egyet értünk, hogy az egyre jobban leterhelt webszerverekkel valamit tenni kell. Ma már fontos, hogy oldalainkat optimalizáljuk (Nézd meg hány pontot kapsz az oldaladra), vagy legalábbis kísérletet tegyünk rá. A CSS sprite erre ad egy igen érdekes lehetőséget, ami talán mindenki számára, de főként a kis képek tömkelegéből álló weblapoknál bizony rettentően hasznos lehet.
Olvastam statisztikákat – amolyan “weboldal-celeb” előtte utána stílusban – és nagyjából a ténylegesen nagy forgalmú oldalak esetén olyan 10-12%-ot javult a teljesítmény a bevezetése után. Elgondolkodtató. Azért már most figyelmeztetek mindenkit, hogy csodaszerek természetesen nincsenek! No lássuk ezt a nem csodaszernek számító Sprite-ot.
Mi az a CSS sprite ?
Gyakorlatilag nem más, mint egy képállomány, amire az összes képünket rápakoljuk és a CSS kód segítségével kiválasztjuk, hogy melyiket akarjuk megjeleníteni. És itt is van a legnagyobb előnye, hiszen így egyetlen kép letöltésével, a weboldal szinte összes grafikai elemét letöltjük az esetenként 30-40 apró kép helyett. Ráadásul bármelyik aloldalt nyitjuk meg, a grafikai elemeket nem kell újra letöltenünk, ezzel csökken a szerver terhelése és gyorsabbá, gördülékenyebbé válik az oldal böngészése. 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 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