Krása a jednoduchosť
kaskádových štýlov

Nostalgia

Nostalgia je základný CSS štýl tejto stránky. Vytvoriť ho mi trvalo najdlhšie, pretože bol prvý. Zároveň som si dal tú prácu aby fungoval približne rovnako v Opere aj v Internet Exploreri (pochopiteľne, keď je to základný štýl...)
Keď som ho tvoril, chcel som dodať stránke, taký ľudskejší vzhľad a spraviť ju trošku "teplejšou" a "mäkkšou". Chcel som niečo štýlové a odlišujúce sa od bežného prúdu. Pôvodne som chcel stránku s vlastným fontom s poriadnym antialiasingom, peknými pastelovými farbami, animovanými menu a nadpismi a jemnou hudbou v pozadí. Flash... Ale keďže s flashom si zatiaľ veľmi nerozumiem, a sám nemám rád keď nejaká stránka nejde len preto, že nemám flash, tak som rozmýšľal o inej ceste... Pekný grafický výsledok, aj keď iba statický sa dá dosiahnuť s plno grafickými stránkami. Proste urobiť každú stránku ako obrázok, každý text ako obrázok (s vlastným fontom a efektami samozrejme) a menu - samozrejme tiež obrázkové... Pekná myšlienka, ale pri predstave koľko by mi to trvalo, koľko zaberalo miesta a ako zložito by sa to v budúcnosti asi editovalo, som zavrhol aj túto myšlienku. Takže nakoniec som sa musel uspokojiť s obyčajným CSS. Keď už som vytváral nový CSS, tak som prerobil stránku z tabuľkového layoutu na beztabuľkový, a keďže to boli práve tabuľky čo robili problém s validitou, tak som po pár drobných úpravách dosiahol, že moja stránka bola aj W3C valídna. Prechod z tabuliek na vrstvy bol veľmi jednoduchý, ale len kým som to robil iba v Opere. Akonáhle som to vyskúšal v Internet Exploreri, veľmi rýchlo som pochopil, že rôzne browsery majú na normu CSS rôzny štýl. Takže som každému boxu priradil inú farbu pozadia a nastavoval som rozloženie boxov, až kým bolo približne rovnaké v oboch prehlaidačoch. (Hovorím náročky "približne", pretože ani dnes nevyzerá stránka v Internet Exploreri tak ako by som chcel, a v Opere vyzerá iba približne ako by som chcel...).
Po rozmiestnení boxov (čo bola časť, ktorá zaberá najviac času) som začal rozmiestňovať pozadia. Od začiatku som chcel aby bola stránka "osobná" a tak som sa rozhodol pre štýl "rozsypané fotky". V Photoshope som povyberal fotky z môjho fotoalbumu (podľa možností čím staršie), naformátoval ich na novú malú veľkosť, nastavil aby vrhali tieň a rozsypal ich po jednotlivých boxoch. Na rozsypané fotky som položil v Photoshope novú vrstvu upravujúcu úrovne, aby fotky dostali žltkastý nádych... Boxy som rozmiestnil tak aby sa aspoň trošku prispôsobovali tomu ako stránka vyzerá. Teda jeden box s fotkami je hore, jeden úplne dole, a jeden je pod pravým menu. Pôvodne bolo boxov ešte viac, ale potom bolo zložité dosiahnuť aby nezasahovali fotky do textu a neznižovali čitateľnosť, tak som ostal pri troch pozadiach...
Biele pozadie stránky bola jasná voľba vzhľadom na rozsypané fotky, a doladiť ostatné farby už nebolo nič zložité. Všetko som nastavil do žltkastého až béžového nádychu. Nadpisom som ponechal modifikáciu small-caps, aby sa to podobalo predošlej verzii stránky, akurát nadpisom odsekov som pridal podčiarknutie pomocou pozadia. Jednotlivé odseky som dal do nových boxov, ktorým som pridal decentný rámček, takže to teraz vyzerá ako keby sa jednotlivé odseky v boxoch vznášali nad bielym pozadím... Hlavné nadpisy som spravil dvojfarebné, aby to bolo trošku pestrejšie. Stránkam, ktoré nemajú odseky, alebo nezačínajú podnadpisom som nastavil prvé písmeno veľké, aby to vyzeralo ako "novinový" štýl. Nakoniec som už len doplnil triedy pre monospace fonty používané pri výpisoch zdrojových kódov a hotovo. Vpravo dole som napísal "wray" modrým písmom a rukou, čo malo znázorňovať akože písanie atramentovým perom, neviem, či to úplne vyšlo, a tá troška modrej farby mierne narúša žltkastý vzhľad, ale nakoniec som to tam ponechal.
Ako som napísal hneď na začiatku, nie je to úplne presne čo som chcel, ale je to už aspoň veľmi podobné. To čo je však veľmi príjemné, je to, že vďaka tomu, že som celú stránku upravil do CSS layoutu, je veľmi ľahké upravovať, resp. dopĺňať nové štýly. A už po pár dňoch som nejaké nové naozaj vyskúšal...

Cuba

Po úspešnom dokončení prvého CSS štýlu som sa rozhodol hneď vyskúšať ako veľmi dokážem vzhľad stránky meniť, iba pomocou CSS súboru. Keďže prvý štýl som navrhol dosť komplexne (pozícia fotiek sa mení, dĺžka menu sa mení, nadpisy nie sú rovnako dlhé...), a veľa veci bolo navrhnutých špecificky pre štýl Nostalgia, tak bol celkom problém dosiahnuť úplne iný vzhľad. Aj kvôli tomu neštandardnému rozloženiu boxov vznikajú problémy s kompatibilitou v Internet Explorere, ale neplánujem robiť ďalšie kompromisy v dizajne, len preto, že browsery nepodporujú jednotné normy. Štýly na tejto stránke tu nie sú ani tak preto, aby sa naozaj používali, ale skôr aby som ukázal, že sa to dá :) Takže jednou vetou - ide to len v Opere. V ostatných browseroch môžu byť boxy rozhádzané, a neplánujem to ani riešiť, kým nebude Cuba (alebo iný nový štýl) základným štýlom v mojej stránke.
Kuba ma napadla, ako komunistická krajina s nádherným prostredím a španielskym jazykom, chcel som opäť spraviť koláž z rozsypaných kubánskych fotografií na červenom pozadí, ale modré kubánske nebo a more nevyzerali na červenom pozadí, až tak pôsobivo, takže som uprednostnil čistý "revolucionársky" štýl. Do rohu som chcel dať aspoň klasického čierneho Che Guevaru na červenom pozadí, ale aj to by vyzeralo príliš obyčajne. Fotografia Fidela sa mi nepozdávala taktiež, a ani neviem koľko ďalších typicky kubánskych motívov... Pozitívne na tom celom bolo aspoň to, že popri tom pátraní na google po vhodnom kubánskom motíve som sa dozvedel čosi viac o Ernestovi Che Guevarovi, a kubánskej revolúcii. Napokon som sa rozhodol umiestniť aspoň poriadne rozmazanú kubánsku revolucionársku báseň, aby bolo cítiť nádych revolúcie...
Fonty som mal od začiatku nastavené na biele a čierne, a ako sa ukázalo biely a čierny text výborne pasuje na červené pozadie. Ako štandardný font som zvolil Courier, ktorý by mal byť na každom počítači (ono celkovo nemá človek veľmi na výber pri výbere fontu do CSS, lebo veľa "bežných" fontov nie je...). Nadpisy stránok som odsadil úplne doprava aby bolo vidieť silu boxov, a aby to nevyzeralo, že nadpis musí byť vždy nutne v strede hore nad hlavným textom. Naľavo od nadpisu som dal aspoň malú hviezdu, aby bolo cítiť nádych komunizmu. Mohlo tam byť čosi iné, ale celú Cubu som spravil za pár hodín, a nechcel som mať ďalší vyšperkovaný štýl, chcel som len vidieť, že to ide...
Hlavné menu som dal úplne naľavo, najmä preto aby bolo vidieť ako ľahko sa dá zmeniť pozícia menu iba za použitia CSS štýlov. To že som v pôvodnom štýle zvolil, že prvé písmeno nadpisu menu bude inej farby spôsobilo trošku problémy, pretože nefunguje ako linka, a v ďalších štýloch som ani prvé meno odlišnej farby nepotreboval, ale v Cube som ho ešte ponechal, a iba mu nastavil inú farbu. Nadpisom odsekov som ponechal silný čierny Courier font, a dal vedľa nich ikonku zaťatej päste. Opäť najmä preto, že sa mi nechcelo vymýšľať dlho nejaký symbol, a tak som zobral z internetu prvé čo som našiel... Odseky som ponechal v boxoch s dvojitým rámikom, lebo v pôvodnom štýle ten rámik vyzeral pekne, tak som chcel z neho vyťažiť čo najviac. Nakoniec som začal experimentovať aj s hover parametrom vďaka ktorému sa dá ľahko nasimulovať JavaScriptovský OnMouseOver efekt. Takže do hlavného menu som dodal ďalší klasický komunistický symbol, ktorý nahradí prvé písmeno nadpisu, keď na ňho príde kurzor myši... Priznám sa, že som pôvodne plánoval aby sa kosák zjavoval, úplne pred textom, a nie ponad prvé písmeno, ale keďže mi to náhodou takto vyšlo, tak som objavil celkom pekný efekt (je to kvôli tomu, že prvé písmeno nie je súčasťou linky, a tak ho možno prekryť). Kosák ostal aj pri podmenu, aj keď som to nechcel, a tak som to proste nechal tak aj keď som to nemal pôvodne v úmysle a malo to fungovať iba na hlavné menu. Nakoniec som už len doladil ostatné typy textu aby zapadali do celkového štýlu a pridal kubánsku zástavu. Opäť ani nie tak preto, že by tam pasovala, ako preto, aby som ukázal, že sa to dá...
Tento štýl ma na spodku na prvý pohľad veľa nevyužitého červeného miesta... Toto je iba kvôli tomu, že báseň napravo je občas dlhšia ako ostatný text a zanechaválo to vďaka nerovnakej výške stĺpcov nepekný spodok, tak som to riešil takto. Dá sa to spraviť krajšie, ale pri tvorbe tohto štýlu nebola "krása" hlavný cieľ, skôr som chcel čo najrýchlejšie zmeniť vzhľad stránky.
Niektoré veci sa mi nepodarilo doladiť úplne (nechcelo sa mi) ale celkovo Cuba funguje pomerne dobre, a keď už nie je dizajnovo najzaujímavejšia, určite pekne dokazuje čo všetko (a ako ľahko) sa dá...

Mexico

Povzbudený tým aké jednoduché bolo vytvoriť Cubu som hneď na druhý deň vytvoril ďalší štýl - Mexico. Ak vytvorenie Cuby bolo rýchle, tak Mexico som vytvoril extra rýchlo. Najdlhšie trvalo vybrať hlavný obrázok. Chcel som aby Mexico malo taký klasický vzhľad, ako milión bežných bloggerských stránok, kde je hore nejaký obrázok pod ním text a napravo, alebo naľavo menu. Na konci stránky nejaké zápätie, a hotovo. Vytvoriť rozmiestnenie boxov pre takýto štýl je otázkou pár minút. Upraviť moje pôvodné rozmiestnenie boxov, tak aby sa podobalo tomu najobyčajnejšiemu štýlu, už je troška zložitejšie. Našťastie - keďže som si povedal, že kompatibilita nie je cieľ číslo 1, a stačilo mi, že to funguje v Opere, som (aj keď často neštandardne) popresúval boxy (veľa z nich má záporné pozície polohy...) a dosiahol tento vzhľad.
Základný obrázok som nakoniec našiel medzi amatérskymi fotkami z dovolenky nejakého američana v mexiku... Mal som ich vybratých viac, ale táto sa mi zapáčila najmä kvôli tej značke, ktorá je ešte aj tak trošku nakrivo, a motívu nekonečnej cesty púšťou (iným kandidátom bola fotografia ospalého mexického mestečka). V Photoshope som napravil, to čo nedokázal pôvodný fotograf, a poriadne som zosilnil červenosť piesku a modrosť neba, aby to vyzeralo ako "pravá" mexická púšť. Font hlavného nadpisu ostal Courier, ešte zo štýlu Cuba, ale keďže sa mi celkom pozdával, a aj biela farba bola úplne vporiadku, tak som ho takýto ponechal. Akurát som trocha zmenil odsadenie znakov, aby pôsobil nadpis ešte väčším dojmom. Hlavný obrázok mal také neutrálne farby, a tak som sa dlho rozhodoval, či ponechať farbu nadpisu bielu, čiernu, šedú, alebo akú dvojfarebnú kombináciu zvoliť. Nakoniec som ponechal všetko biele, aj keď to nezaručuje optimálnu čitateľnosť. Myslím, že keďže je nadpis dostatočne veľký nemalo by to byť až taký problém prečítať. Zarovnanie som nastavil naľavo, najmä preto že center, aj right som už vyskúšal v predošlých štýloch a mojim hlavným cieľom pri tvorbe nových štýlov bolo aby stránka vyzerala INAK ako pri iných štýloch, a nie aby vyzerala čo najkrajšie...
Hlavný text som opäť ponechal vo vznášajúcich sa boxoch na bielom pozadí, lebo takto to vyzerá (aj v Nostalgii) jednoducho a zaujímavo zároveň. Farbu som pochopiteľne dal pieskovo oranžovú - to bolo najrýchlejšie rozhodnutie pri tvorbe štýlu. Hlavný text som nechal šedý, aby sa to dalo dobre čítať. Úplne čiernu som radšej ponechal iba na nadpisy odsekov, lebo takáto šedá nespôsobuje taký kontrast a lepšie sa číta (aspoň myslím :). Font som zvolil Arial, lebo Arial je proste klasika, a až tak veľa možností zase nie je (Times jednoducho nemám rád, pretože keď je príliš malý tak pätky znižujú čitateľnosť...) Trošku som upravil riadkovanie a medzery medzi znakmi aby to aspoň trocha vyzeralo inak a to je všetko. K nadpisom menu som dal charakteristický mexický kaktus, ale aj tento symbol som nejak dlho nehľadal a proste som vybral prvý čo som našiel v google...
Linkám som nastavil zelenú farbu, lebo zelená je podľa mňa ďalšia charakteristická mexická farba, keď už pre nič iné, tak preto, že sa nachádza na mexickej zástave. Musím uznať, že na oranžovočervenej sa nečíta úplne najlepšie, ale tvorba stránky je o kompromisoch medzi tým čo chce autor, a tým čo sa páči čitateľovi :) Hlavné menu som umiestnil napravo s vystredeným textom. Prvé písmeno nadpisov menu som ponechal úplne rovnaké ako ostatné, čo pri texte "O MNE" nevyzerá ideálne, lebo to vyzerá ako jedno slovo, ale ako vravím - je to o kompromisoch. Poriadne som však zaexperimentoval s vedľajším menu, ktoré som poslal úplne naľavo. Naozaj je veľmi zaujímavé, že to fungovalo, pretože aj hlavné aj vedľajšie menu sú súčasťou jedného boxu, ktorý sa nachádza napravo! Som si skoro úplne istý, že to nie je v rámci noriem, ale keď to ide, tak nech to ide :) Aspoň teda v tej mojej Opere... No a keďže som ešte nikde neumiestnil mexickú vlajku, tak som ju dal práve vedľa textov menu, keď je nad nimi kurzor myši.
Úplne dole vpravo som dal obrázok s logom Made in Mexico, opäť ani nie tak preto, že by som ho tam chcel odjakživa mať, ako preto, že sa tam proste niečo dalo dať, tak som chcel túto možnosť využiť. Na spodku opäť ostalo "zbytočne veľa" bieleho miesta, ktoré je tam preto, že som kopíroval štýl Cubu, kde bolo to miesto kvôli tej básni. Určite sa to dá nejak napraviť, ale nejak sa mi nechcelo pátrať po tom ako... :)

Afterdark

Predtým ako som vytvoril Afterdark, mal som v hlave predstavu stránky s čiernym podkladom, kde bude všetko okolie tvoriť veľa neónových nápisov, plagátov s upútavkami na rôzne koncerty a akcie, všade bude plno striptérok a jazzových muzikantov a úplne hore bude hlavný obrázok - záber z vysvieteného nočného klubu tesne pred záverečnou...
Tvorba stránok je o kompromisoch a veľmi rýchlo sa ukázalo, že sa mi vôbec nechce hľadať dostatok obrázkov aby som si vytvoril pekné pozadie... (Hľadanie/tvorba obrázkov pre pozadia je podľa mňa práve tou najviac čas zaberajúcou časťou pri webdizajne - a zároveň má najväčší dopad na to ako pekne stránka nakoniec vyzerá...) Druhým veľkým problémom bolo, že sa mi nepodarilo (v krátkej dobe, lebo celý Afterdark som opäť vytvoril za pár hodín...) nájsť pekný neónový font, a tak som proste od mojich vysokých nárokov upustil a spravil to celé jednoducho a rýchlo. Hlavný obrázok som našiel na google. Na mieste kde je teraz nadpis bol na pôvodnom obrázku názov klubu. Tento som prepísal (tým nevyhovoujúcim neónovým fontom) nápisom afterdark, a nasimuloval mu v Photoshope neónové žiarenie. Ďalej som mal v pláne aby nadpis stránky bol vždy medzi tými návštevníčkami baru. Keďže na pôvodnom obrázku boli ľudia rozmiestnení aj v strede, trošku som ich v Photoshope popremiestňoval aby boli iba na krajoch a aby v strede ostalo veľa voľného miesta na nadpis... Celému obrázku som ešte ponastavoval úrovne podľa mojich predstáv a začal som skúšať do ňho umiestňovať nadpis(y). Veľmi rýchlo ma však zarazilo, že jeden nadpis (Afterdark) sa bije s tými ozajstnými nadpismi stránky... Nielen, že mali rôzne fonty, ale najmä ten všadeprítomný "Afterdark" odpútaval pozornosť od naozajstných nadpisov. Odstránil som teda v Photoshope aj ten nadpis "Afterdark" a umiestnil nadpisy stránky do oblasti medzi tie krídla... To už vyzeralo omnoho krajšie, a keďže sa mi nechcelo hľadať opäť pôvodný obrázok a upravovať nanovo úrovne, ponechal som tento, aj keď ľudia sú na ňom rozmiestnení iba po krajoch a vyvoláva to ešte čudnejší pocit čudného baru, v ktorom "nik" nie je... Viacriadkové nadpisy (ktorých je bohužiaľ na stránke dosť) nevyzerajú veľmi pekne, ale čo už - chcel som to mať hlavne rýchlo spravené :) Farba nadpisov mala byť pôvodne žiarivá neónová, ale prívlastok "žiarivý" sa v HTML a CSS dosť ťažko simuluje, takže som nakoniec zvolil jemnú zelenú a belasú, ktoré podľa mňa aspoň trochu pripomínajú neónky...
Farbu menu som dal neónovo ružovú, pretože s neónmi sa mi proste spája ružová. Dosiahnuť žiarivý efekt je však opäť nemožné, a tak to vyzerá iba veľmi približne :) Ešte z Mexica som ponechal hlavné menu vpravo a vedľajšie vľavo, akurát som ich tentokrát umiestnil nad (v zmysle osi Z) hlavný obrázok, čím som zabezpečil ešte väčšiu nekompatibilitu s normami :) Pri vylaďovaní toho čo sa má objavovať, keď je nad položkou menu kurzor myši sa mi podarilo (opäť nechtiac) dosiahnuť zaujímavý efekt, že keď kliknem na položku menu, text poskočí o jeden pixel, a vyzerá to ako keby sa stlačilo tlačítko. Chcel som aby sa posunulo aj trošku dole, a vyzeralo to ako naozajstné tlačítko, ale to sa mi nejak (v rozumne krátkej dobe) nepodarilo, takže som to nechal iba takéto "polodokončené".
Nadpisy odsekov som opäť ponechal v "žiarivej" neónovej, a podčiarkol ich srdiečkovou linkou. Chcel som najskôr použiť obyčajné podčiarknutie, ale keď už mám možnosť používať grafiku, tak som ju naozaj použil...
Všetok text som poriadne zväčšil, pretože aj stránka samotná je širšia. Toto je aj najmä tomu, že biely text na čiernom pozadí sa číta o niečo horšie, a tak dúfam, že toto zväčšenie čitateľnosti prospeje a nebude na úkor toho, že to bude "zbytočne veľké"

Plain HTML

Plain HTML nie je žiaden štýl, a ukazuje iba to ako stránka vyzerá bez použitia kaskádových štýlov. Aj napriek tomu, že to nie je štýl, nájdete ho na všetkých stránkach so style switchermi. Nevyzerá vôbec pekne, ani nemá žiadne obrovské výhody a jediný dôvod prečo ho každý spomína je to, aby bolo vidieť ako veľa dokážu CSS štýly spraviť. Či už ide o farby a veľkosti textov, pozadia, alebo samotný layout. Proste CSS je silná vec, a keby ešte aj bola kompatibilná vo všetkých prehliadačoch bola by to krása.
To čo nemám na Plain HTML rád je, že sa nedá moc o ňom písať, a v tejto chvíli tu musím niečo napísať, lebo vľavo mám obrázok, a nemá okolo neho čo obtekať :) Nuž tak aspoň napíšem, že najviac ma k celej záležitosti okolo štýlov inšpirovala stránka csszengarden, kde vidieť PORIADNE CSS štýly, a čo všetko naozaj dosiahnu. Táto moja stránka sa na to ani zďaleka nechytá, ale podstatné bolo, že som sa konečne celý beztabuľkový layout naučil (skoro správne :) používať, a robiť stránky v budúcnosti bude zase o niečo ľahšie.
Ozaj ak by na to niekto až do tejto chvíle neprišiel - štýly sa prepínajú tak, že sa klikne na obrázok konkrétneho štýlu na tejto podstránke. Prepínanie je vytvorené pomocou cookies, ktoré nemajú nastavené expiry, a teda platia do konca session. Toto značí v ľudskej reči to, že keď si prepnete štýl, tak bude zapnutý, až kým nezapnete nejaký iný, alebo nezatvoríte Operu. Keď sa na moju stránku vrátite v budúcnosti, tak sa nastaví zase pôvodný Nostalgia štýl. Ale keby ste moc moc chceli, tak sa to dá v Opere "hacknúť" a nastaviť pre cookie nekonečnú platnosť, a stránka ostane navždy podľa vašich predstáv...
Uff no a to je koniec najnudnejšieho odstavca čo som kedy napísal. Je tu fakt len preto aby malo čo obtekať okolo obrázku a sám si uvedomujem, že celý tento obkec Plain HTML štýlu je úplne odveci...

A načo to vlastne je?

O užitočnosti style switchera, ktorý prepína štýly, ktoré vyzerajú dobre iba v Opere, by sa dalo polemizovať... Zvlášť, keď jednotlivé štýly sú robené skôr "pre efekt", a nemá veľký význam ich trvalo používať - dokonca to ani nie je možné, vždy keď sa zavre browser tak aj štýly "zmiznú" a nastaví sa pôvodný... Všetky alternatívne štýly sú aj tak nejak "nedokončené" a proste všetko naznačuje tomu, že sú nanič... Ani nemienim ničím argumentovať, a aj ja si myslím, že sú nanič :) Dal som si ich sem iba preto aby som mal dobrý pocit z toho, že sa to dá, a možno aby som ukázal ostatným, ktorý si ešte s CSS tak veľmi nerozumejú, že štýly sú naozaj super vec, a dajú sa s nimi robiť veľké veci.
Hlavný dôvod prečo som si spravil StyleSwitcher je preto, že som musel... Pôvodne som mal nové štýly nastavené iba ako alternate, a dali sa prepínať len cez menu v Opere (a možno iných neIE prehliadačoch), ale keď som urobil 3 štýly zdalo sa mi, že stránka sa načítava nejak pomalšie. Naozaj neviem či to s tým súvisí, ale keďže sa mi zdalo, že áno tak som sa rozhodol, že alternatívne štýly nebudú, a bude iba jediný štýl. Keďže mi však bolo ľúto nesprístupniť to čo som už vytvoril, tak som spravil aj túto podstránku. Pozitívna vlastnosť toho, keď napíšete stránku "o ničom" je tá, že vám pribudne na stránke obsah, a "veľké" - obsahom - stránky sú u vyhľadávačov populárne, tak hádam mi to pomôže :) No a maximálne znudený čitateľ si aspoň mohol niečo prečítať...
Ešte raz zdôrazňujem, že tieto alternatívne štýly sú testované IBA v Opere, a sám som si vedomý toho, že som použil občas neštandardné postupy, a tak je občas celkom zvláštne, že to v tej opere ide :) Zatiaľ neplánujem štandardizovať kód aby fungoval vo všetkom, lebo celé toto prepínanie štýlov považujem len za okrajovú záležitosť...