webdesign / development + awesome
archivovaný archívny archív
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.
[ 
]
]
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;...
[ 
]
]
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 :)
[ 
]
]
Ikonky pri linkoch cez CSS
napísal yablko, 13 Oct 2010
Niekedy je dobrý nápad zakomponovať ikonky pri odkazoch cez CSS background, namiesto kombinácie <img> a <a>. Menej písania, menej html elementov, je to kompaktnejšie a pre prípadnú zmenu dizajnu netreba loziť do html.
ikonka cez obrázok: 
awesome comments
<a href="#"> <img src="comments.png" alt="comments" style="vertical-align: middle; border: 0;"> awesome comments </a>
V niektorých browseroch podčiarknutie textu zasahuje do samotného obrázku. Vybrať <img> von z <a> by to síce vyriešilo, potom by ale kliknutie na obrázok nefungovalo ako link. Fix:
ikonka cez css: really awesome comments
<a href="#" style="padding-left: 21px; background: url('comments.png') 0px 2px no-repeat;">
really awesome comments
</a>
Wheee:)
padding-left: 21px je tu potrebný, aby obrázok neprekrýval text - vyhradíme mu 21px na ľavej strane, v nich sa môže realizovať a text nechá na pokoji.
[ ]
]
Hráme sa s formulármi, CSS3 a jQuery [video]
napísal yablko, 7 Oct 2010
Aké jednoduché je vytvoriť formulár ako tento od nuly? Takto jednoduché:
Klikni na "povedz mi o tom viac" a dozvieš sa, ako presunúť labels priamo do inputov, ako zariadiť aby zmizli, keď do nich človek klikne a iné JavaScript srandy (warning: includes jQuery).
[ 
]
]
Najrýchlejší úvod do vytvárania web stránok
napísal blade, 3 Oct 2010
Tento návod som sa rozhodol napísať, keďže už dosť ľudí po mne chcelo, nech im vysvetlím ako sa dajú tvoriť vlastné web stránky, ako to všetko okolo nich funguje a kde sa to naučiť. Samozrejme, že si môžu nakúpiť knihy, ale tie bývajú spravidla tak rozťahané, že ich veľa ľudí ani nedočíta. Plus zaťažujú množstvom detailov, ktoré na začiatku iba mýlia a zdržujú.
Preto píšem tento návod čo najstručnejšie, aby slúžil ako alternatíva k prehnane ukecaným knihám a aby ste namiesto zbytočného čítania mohli radšej kódiť. :p
Najskôr zbežný prehľad o tom, čo všetko sa deje, keď si v prehliadači otvoríte nejakú stránku. To aby ste vedeli kde sa vlastne používajú všetky tie technológie ako je HTML, CSS, PHP, SQL, JavaScript, jQuery, AJAX a iné.
1) Zadáte URL adresu - to je celý ten text, čo vidíte hore v address bare prehliadača.
2) Na základe názvu stránky (t.j. domény) sa zistí IP adresa servera, na ktorom sa nachádza hľadaná stránka. (Na toto slúži DNS server, ktorého adresu poznáme)
[ 
]
]
Click.. me?
napísal yablko, 28 Sep 2010
Je iritujúce keď neviem, na čo môžem na stránke kliknúť. A je mega iritujúce, keď to neviem ani keď som po tom práve prešiel myšou. Looks like a job for Captain Obvious!
Ikonka "ruky" je vcelku jednoznačný indikátor kliknuteľnosti a jedno z riešení ako zabrániť konfúzii je pridať patričným elementom class="click" a potom:
.click { cursor: pointer; }
[ 
]
]
