Éjfél Kapitány
CSS
CSS varázslat
A weboldalak nagyon hasonlóak a word dokumentumokhoz. Formázni lehet mindkettőjüket többféleképpen, csúnyán és szépen, átgondoltan és összevissza. A weboldalak formázásának kulcsa a CSS (Cascading Style Sheet), amit alapszinten régóta használok magam is. Ez az oldal is CSS segítségével van formázva, a címek, a paragrafusok, a színek nem a html dokumentumban, hanem egy arról leválasztott css dokumentumban vannak meghatározva, valahogy úgy, ahogy egy igényes word dokumentumot is a sablonok és stílusok segítségével formázunk meg.
Ahogy telt-múlt az idő, kiderült, hogy a CSS az egyszerű formázásnál jóval többre képes. Pusztán CSS segítségével nem csak más kinézetű, de más elrendezésű oldalakat is elő lehet varázsolni. Gondoltam kipróbálom, mit lehet mindebből kihozni. A következőkben az alapvető színvilágot és a jól bevált betűtípusokat nem változtattam meg, annál inkább a megszokott elrendezést. A következő eredmények pusztán a már emlegetett CSS állomány megváltoztatásával, de ez eredeti html dokumentum megváltoztatása nélkül születtek meg...
Egy klasszikus Éjfél Kapitány oldal
Két hasáb, paragrafusokkal formázott szöveg, az
ember azt hinné, ezt aztán tényleg egyszerű lesz DIV tagekkel megvalósítani.
Hát - nem egészen. A baloldali fekete hasáb ugyanis a valóságban a
halálfej alatt rögtön véget ér, így a hasábnak adott háttérszín
csak addig hatásos. Hogy a halálfej alatti terület is fekete legyen,
ahhoz magának a body tagnek kellett fekete hátteret beállítanom. Ez az
ún. faux
columns trükk.
Megnézheted hogy néz ki...
Itt pedig a CSS állományt...
Tükrözött oldal
Az előző állapotból egy-egy float:right és
float:left direktíva felcserélésével elérhető a tükörkép:
Megnézheted hogy néz ki...
Itt pedig a CSS állományt...
Egyhasábos verzió fejléccel
Kicsit nehezebben, de a fekete hasáb átalakulhat fejléccé.
Ennek a verziónak az olvashatósága a túl széles paragrafusok miatt
borzalmas, de ez most részletkérdés. A lényeg, hogy innen elindulva
ennél szebb, egyhasábos oldal készíthető.
Megnézheted hogy néz ki...
Itt pedig a CSS állományt...
Korszerű verzió
Eljátszva a margókkal és az egyszínű hátteret képes
háttérre cserélve könnyen kaphatunk korszerűbb kinézetet. (Sőt, ha
a különböző böngészők pontosan ugyanúgy értelmeznék a CSS direktívákat,
akkor a "könnyen" szócskát szó szerint lehetne venni, így
azonban jelentős idő elment a böngészőfüggetlen kompromisszumok
megtalálásával.)
Megnézheted hogy néz ki...
Itt pedig a CSS állományt...
Hátteret
persze nem csak a fejlécben módosíthatunk, hanem bárhol. Keressünk
egy nagyon menő aprómintás pattern tapétát (mondjuk a Kaliber10K
oldalán) és máris ugyanúgy nézünk ki, mint mindenki aki számít...
Eljátszhatunk még a címsorokhoz hozzáadott díszítőkkel, és a különböző
keretekkel, amelyekkel némi fény-árnyék hatást is elérhetünk. Most
már elég szembetűnő a különbség a kiinduló állapothoz képest és
mindez pusztán CSS formázás eredménye...
Megnézheted hogy néz ki...
Itt pedig a CSS állományt...
Kijárat...