webdesign / development + awesome
archivovaný archívny archív
Praktické CSS3 praktiky
napísal yablko, 22 Nov 2010
Najprv sme si ukázali Esenciálne CSS tipy a triky, nasledovali Užitočné CSS tipy a triky a dnes si povieme čo to o CSS3.
CSS3 je nová špecifikácia, ktorá do CSS pridáva kopu efektov a srandičiek. A mnohé z nich radikálne uľahčujú dizajnérom život. Zatiaľ to nie je oficiálny štandard, čo niektorí chápu ako povolenie vystupovať proti jeho používaniu. Kravina, CSS3 je awesome a je použiteľné už dnes.
Fun fact: aby sa špecifikácia stala oficiálnym štandardom, musia ju plne podporovať dva prehliadače. CSS2.1, ktoré používate, nie je plne podporované žiadnym. Najbližšie k tomu má IE8 ;) (zdroj: remy sharp)
Realita je taká, že moderné prehliadače podporujú mnohé z CSS3 atribútov už dnes a kľudne ich môžete používať. Staršie prehliadače neznáme atribúty jednoducho odignorujú a svet sa nezrúti keď v IE ten tieň nebude ;)
Noviniek v CSS3 je veľa, reálne použiteľných je ich menej a my si ukážeme tie, ktoré v rámci brm používame najčastejšie. Ak budem v texte používať výraz "moderné prehliadače", myslím tým Operu, Firefox, Chrome a Safari. Sorry ostatní :)
Pozor: v starých prehliadačoch nasledovné efekty nemusia byť viditeľné. Ak je toto váš prípad, stiahnite si najnovšiu verziu svojho prehliadača, v tomto prípade je novšie prakticky vždy lepšie ;)
text-shadow: [px] [px] [px] [farba]
Tieň pod písmom patrí medzi tie subtílne efekty, ktoré je fajn mať, ale ak nie sú, nič závažné sa nestane. text-shadow podporujú všetky moderné prehliadače bez problémov už nejakú tú dobu a funguje asi takto:
brm brm brm
text-shadow: 2px 2px 3px #317392;
bla bla bla
text-shadow: -1px -1px 0px #ccc;
2 komentáre
[ 
]
]
Užitočné CSS tipy a triky
napísal yablko, 15 Nov 2010
Nedávno sme si ukázali esenciálne css tipy a triky, teda veci, ktoré potrebujete vedieť. Dnes si ukážeme užitočné css tipy a triky, teda veci, ktoré je fajn vedieť.
CSS reset
Čo: CSS reset je CSSko obsahujúce nastavenia, ktoré pomáhajú zabezpečiť kompatibilitu prehliadačov.
Prečo: veci, ktorým presne neurčíte ako majú vyzerať, prehliadač vykreslí podľa vlastného uváženia. A každý z nich môže uvažovať inak. Medzery medzi <p> môžu byť rôzne, veľkosti písma v <h1>...<h6> môžu byť rôzne, niektoré prehliadače môžu okolo obrázkov zobrazovať border atď. Použitím CSS resetu vytvoríte pre všetky prehliadače rovnakú štartovaciu pozíciu.
<p> v <div>, firefox má odsadenie, IE nie... zdroj obrázku
Ako: toto Eric Meyer's Reset (prípadne upravenú verziu) hodíte do svojho HTML pred ostatné CSSká, prípadne stačí skopírovať kód na začiatok svojho CSS súboru.
Čo dodať: Existujú aj resety od iných autorov, tento je však zrejme najpoužívanejší. Je to obyčajné CSS a je teda dobrý nápad si ho upraviť podľa vlastnej potreby. Nie vždy budete používať všetky elementy, ktorých štýly sú "resetované", takže ich môžete kľudne z resetu odstrániť a vo všeobecnosti si to upraviť ako len chcete.
Môžno si práve hovoríte "Toto je všetko pekné a fajn, ale..." a ja to plne chápem. Možno vám vyhovuje spôsob, akým prehliadače vykresľujú veci. Možno vám nevadí, že niektoré veci vyzerajú v IE trochu ináč. Možno máte dojem, že je to plno zbytočného kódu a že ak vám aj niečo bude prekážať, upravíte si to sami. A to je v poriadku. Je však dobré vedieť, že možnosť ako CSS reset existuje.
[ ]
]
Esenciálne CSS tipy a triky
napísal yablko, 8 Nov 2010
CSS je slušný bordel. Nie že by sa s ním nedalo pracovať, avšak aby ho dizajnér donútil vypľuť zo seba ako-tak-modernú stránku, potrebuje poznať riadnu dávku trikov, odžubov a čiernej mágie.
V tomto článku predstavíme problémy, s ktorými sa web-človek bežne stretáva, ukážeme si riešenia a nakoniec možno prihodíme pár užitočných tipov a možno aj trikov. Ak budete poslúchať. ;)
Predtým ale odporúčam mrknúť na HTML inline a block elementy. Článok tiež predpokladá aspoň základnú znalosť CSS. Ak také nemáte, nevadí, zastavíte sa neskôr :) Ok? Let's go.
Horizontálne centrovanie
Na zarovnanie textu na stred máme text-align: center; ale pre block elementy (ako <div>) nič podobné neexistuje. Čo je problém v dobe, kedy je väčšina stránok na stred obrazovky.
Riešenie: nastaviť centrovanému elementu pevnú šírku a margin: 0px auto;
V tomto prípade bude #box2 zhora a zdola odsadený o 15px a zo strán o "auto", čo prehliadač chápe tak, že ho má hodiť na stred rodiča - čiže do stredu divu #container.
[ ]
]
všetko je na webe
napísal yablko, 31 Oct 2010
Všetko je na webe je výber z toho, čo za uplynulý týždeň priliezlo cez reader a twitter.
The Future of PC Gaming, According To The Lead Creator Of BioShock
"Chceš vidieť budúcnosť hrania? Kúp si PC!", hlása veliteľ štúdia Irrational Games, ktoré sa nás najbližšie chystá odrovnať pripravovaným BioShock Infinite. Vo svojej úvahe Ken Levine vyzdvihuje otvorenosť platformy či fakt, že v konečnom dôsledku každý vývojár pochádza z PC prostredia.
@yablko: Programátorské knihy bývajú hrozne rozťahané a plné balastu. Seriously, viac a rýchlejšie sa naučíte z webu, z manuálov a skúšaním.
Toto je jeden z obsiahlejších článkov o prokrastinácii (nie je ich v poslednej dobe na nete nejak moc?). Rozoberá netflix, marshmallows, rozmýšľanie nad rozmýšľaním a stránka sa volá "You Are Not So Smart. A Celebration of Self Delusion." ;) So yeah.. vyhnite sa tomu, čo by ste mali robiť a prečítajte si článok o tom, prečo ste sa práve vyhli tomu, čo by ste mali robiť.
[ 
]
]
HTML inline a block elementy
napísal yablko, 31 Oct 2010
Rozdiel medzi inline a block elementami patrí medzi základné koncepty, ktoré treba pri web-stránkach pochopiť. Hlavne keď neskôr príde na CSS. Nebojte, skúsim sa vyhnúť zbytočným poučkám a prebehnem to najdôležitejšie.
Block HTML elementy
- napr.:
<div><p><h1>...<h6><table><form><ul><li><pre><blockquote>... - zaberajú plnú šírku svojho rodiča ak mám
<div id="rodic">široký 300px a v ňom<p id="decko">, tak #decko sa automaticky natiahne na 300px bez ohľadu na to, koľko textu a inej hávede v sebe má - okupujú samostatný riadok zjednodušene to funguje ako keby ste pred a za element dali
<br> - môžu obsahovať iné inline/block elementy používajú sa ako také "obaľovače" pre ostatné elementy
Inline HTML elementy
- napr.:
<span><a><img><strong><em><br><input>... - zaberajú len koľko potrebujú
- zobrazia sa v tom istom riadku, zarovno s textom
- môžu obsahovať len inline elementy: ako
<img>v<a>často sa jedná o elementy s "dekoračnými" účelmi, ktoré zmenia text na tučný, zalomia riadok alebo vytvoria link
Čítajte ďalej a odhaľte silu CSS a display: inline-block;...
[ 
]
]
I ♥ Neil deGrasse Tyson
napísal yablko, 30 Oct 2010
Toto je preklad článku, ktorý som svojho času poslal do sveta cez google reader. Mám chuť (potrebu!) sa oň podeliť znova, tentoraz po slovensky - fakt, ktorý sa stane bezvýznamným v momente, keď sa pustíte do videí, ktoré samozrejme zostávajú v angličtine :)
Neil deGrasse Tyson je brilantný astrofyzik, znamenitý rozprávač a enormne zábavný človek, na ktorého sa skvelo pozerá a ešte lepšie sa počúva. A čo je možno najdôležitejšie - chápe, že "odborné výrazy" patria do laboratória a zložité koncepty dokáže vysvetliť maximálne jednoducho a jasne.
Videá začínajú v momente s pointou, ktorá ma zaujala. To ale neznamená, že by ste ich nemali pozerať celé - naopak. Sú plné podobných perál... a spomínal som, že je to človek hrozne zábavný? :)
"we astrophysicists tell it how it is" - o dôležitosti jednoduchého vyjadrovania sa
sledujte ďalej a odhaľte, okrem iného, ktoré 2 typy ľudí zahynú v tsunami, ktorá zničí planétu :)
[ 
]
]
Validácia HTML kódu je tu pre dobrý pocit
napísal yablko, 29 Oct 2010
Sú ľudia, ktorí považujú w3c štandardy za slovo božie a stránky, ktoré neprejdú validáciou za menejcenné. Sú ľudia ako Douglass Crockford, ktorí tvrdia, že w3c konzorcium nevie, ako Internet funguje.
Osobne validáciou považujem za ekvivalent achievementov vo videohrách. Som rád, keď vidím krásne zelenú hlášku "This document was successfully checked.." a niekedy sa o to aktívne snažím. Pre dobrý pocit.
Avšak rovnako ako pre dokončenie hry nepotrebujete pozbierať všetky achievementy, pre dokončenie stránky rozhodne nepotrebujete spĺňať všetky podmienky validácie. Mnohé sú užitočné (validátor je taktiež dobrá pomôcka pri odhaľovaní preklepov či zle uzatvorených tagov), ale priznajme si, kopa z nich je ridikulózna.
Ak musím niečo obaľovať do nadbytočných elementov, kašlem na to. <tfoot> v tabuľke nedám pod <thead>, ale pekne dole pod <tbody>. Lebo postupnosť hlava-telo-päta je logická, ostatné sú nezmysel. Viem, má to praktický význam, ale možno tak pri tabuľkách s miliónmi údajov.
A prehľadný kód > validný kód.
Štandardy sa snažím dodržovať, pokiaľ to nie je súboj ústiaci vo frustráciu.
Som však za to, aby sa tagy používali na to, na čo sú určené. Nechcem sa veľmi oháňať frázami ako "sémantický web", skôr mi ide o to, že na pekne štruktúrovaný a bohatý html sa dobre pozerá, je prehľadný a jednotlivé elementy sa dajú jednoducho cieliť v CSS-kách a JavaScriptoch. Kolujú dokonca chýry, že na pekne štruktúrovaný kód sa dobre pozerá aj Googlu, ktorý ho za to patrične odmení ;)
Keď už sme pri tom... čo sa týka CSS validácie - ignorujte ju a ignorujte každého, kto tvrdí, že na nej záleží. Nezáleží. CSS je rozbitý štandard, každý browser implementuje inú podmnožinu iným spôsobom a človek aj bez toho potrebuje často stvárať absurdné ninja kúsky k tomu, aby dosiahol čo potrebuje. A to aj keď neberieme v úvahu staré IEčka. CSS hacky, prefixy, čokoľvek potrebujete - všetko s absolútnym kľudom používajte.
Nechcem byť advokátom zlého kódu. Ľudia by nemali písať stránky "ako sa podarí" a nechať na browser, nech si s tým poradí. Nemali by to ale ani zbytočne preháňať s validáciou. Všetko pekne v rámci oného :)
[ ]
]
