Web Tervezés - 5. Fejezet

CSS III.

Z-index

Pozícionálás manipulálásánál probléma léphet fel, ha fedik egymást az elemek. Ennek a kezelésére szolgál a z-index.

Media query

Nyomtatási stíluslap

Media query segítségével definiálhatunk olyan formázási tulajdonságokat, melyek csak nyomtatás esetén lesznek érvényesek.
Használhatunk oldaltöréseket, az oldal számlálót is testreszabhatjuk, stb...
Lehetőség van a nyomtatási margók beállítására is a @page direktíva segítségével.
Az eddigiekben méretezésnél a px és a % mértékegységek kerültek említésre.
A pt mértékegység kifejezetten nyomtatásra lett kitalálva, ezért nyomtatási stíluslap esetében ezt érdemes használni.
Léteznek további mértékegységek, mint például az em, mely a betűmérethez viszonyított méretezést jelenti.

Pseudo elemek

Pseudo elemek segítségével az egyes html elemek részeit is külön testre tudjuk szabni.
Nem ugyanaz, mint a pseudo szelektor. A pseudo szelektorral html elemeket tudunk kijelölni. A before és after elemek különlegesek. Segítségükkel nem létező elemeket tudunk elhelyezni a weboldalon.
Első sorban design szempontjából hasznosak. Úgy kell elképzelni, mintha lenne 1-1 div minden elem előtt és után, melyeket testre tudunk szabni.
Design trükkök

Rounded corners

A html elemek sarkainak lekerekítésére a border-radius szabály szolgál.
Mind a négy sarkot külön-külön lehet változtatni. A bal felső sarokból indulva az órajárással megegyező irányba haladva lehet megadni a mértékeket.

Árnyékok

CSS segítségével létre tudunk hozni árnyékokat is. Lehetőség van szöveg és html elem árnyékolásra is.
Egyszerre több árnyék is megadható. Minden árnyéknak van: x és y tengely menti eltolás, homályosítás és szín. Részletes bemutató

Transzformálás

Színezésen, méretezésen és pozícionáláson kívül komolyabb formázásokat is alkalmazhatunk css segítségével.
2D és 3D transzformációkat alkalmazhatunk, egyszerre többet is. Számít a transzformációk sorrendje.
A régi böngészők nem támogatják, illetve némelyik böngészőben prefix-et is meg kell adni. Részletek a linken. 3D transzformálás 2D transzformálás

Áttűnés

Azt már tudjuk, hogy számos lehetőségünk van a html elemek megjelenítésének manipulálására.
Sőt, az elemek bizonyos állapotait is testre tudjuk szabni (pl hover).
A css segítségével ezen állapotok közötti átmenetet is befolyásolhatjuk. Ez alapértelmezetten azonnali átmenet.
Megadhatjuk, hogy egy css tulajdonság milyen sebességgel váltson az állapotok között, sőt még az átmeneti görbét és a késleltetést is megmondhatjuk.
Megjegyzés: javascript segítségével dinamikusan módosított tulajdonságokra is érvényes az áttűnés.
Ez a tulajdonság nem érhető el a régi böngészőkben. Bővebb leírás

Animációk

Az előbbi szabály segítségével két állapot között tudunk megadni egy átmenetet, melynek a részleteit a böngésző automatikusa kitalálja.
Viszont előfordulhat, hogy mi testre akarjuk szabni ennek az átmenetnek a részleteit is.
Erre szolgálnak az animációk, mely folyamán kulcs képkockákat adhatunk meg, hogy egy időpillanatban milyen állapotban legyen az elem.
Ez a tulajdonság nem érhető el a régi böngészőkben. Bővebb leírás

Egyéb

A css még számos egyéb dologra használható, amiről nem volt szó. Például:

HTML5 média elemek

Manapság a flash elavult technológiának számít. Egyre kevesebb támogatást kap.
Viszont a HTML5 fejlődésével egyre több mindent tudunk megcsinálni flash nélkül is, ráadásul egységes felületet használva.
A HTML5-ös audio és video elemeket javascript segítségével vezérelhetjük, így saját kézzel összerakott div-ek/gombok használatával egyedi lejátszót készíthetünk.
Canvas és CSS animációk használatával pedig szinte csak a fantáziánk szab határokat a weboldal design-olásában.

Feladatok

Feladat 1

Készíts egy híroldalt.
Egy div-en belül helyezz el hosszabb terjedelmű tetszőleges szöveget képekkel.
A div-nek adj fix szélességet.
Helyezz el egy hirdetést a hír felett, hogy ne lehessen elolvasni (position).
A hirdetés egy kisebb méretű (200x200) div legyen a hirdetés közepén, mely együtt mozog vele.
A hirdetés és a hír közé helyezz el egy sötétített hátterű div-et (position, z-index, background), mely a hírhez tartozó div-et teljesen fedje le.
A hirdetés rendelkezzel figyelemfelkeltő kerettel (border), lekerekített sarkokkal (border-radius) és árnyékolással (box-shadow).

Feladat 2

Hozz létre egy oldalt egy hosszabb terjedelmű szöveggel, mely linkeket is tartalmaz.
Pseudo elemek segítségével helyezz el egy "(www)" feliratot az oldalon található linkek elé.
A felirat legyen kisebb betűméretű, színes és dőlt.

Feladat 3

Készíts egy div-et, mely egy webshop-ban található termékről tartalmaz adatokat.
A div szélessége 500px, magassága 200px legyen.
Transzformáció segítségével helyezz el egy 90 fokban elforgatott "Akciós" feliratot a bal szélén.

Feladat 4

Készíts egy menüt néhány menüponttal.
Áttűnés segítségével érd el, hogy az egér rávitelével az adott menüpont háttere fokozatosan színt váltson.