Tento článok patrí do nášho nového seriálu TopX, ktorý bude obsahovať jednoduché a výstižné vychytávky zo sveta webdesignu.

Bude vychádzať raz do týždňa a vždy predstaví TOP niekoľkých aplikácií a typov, ktoré stoja za vyskúšanie.

Tu je 7 z nich, týkajúcich sa kaskádových štýlov.

1. Reset.css Erica Mayera

Bohužiaľ, spolu s vývojom webových prehliadačov aj naďalej musíme hackovať kód pre rovnaké zobrazenie stránok na rôznych jadrách. Preto je tu reset.css od CSS majstra Erica Mayera, ktorý napísal knihu CSS – kompletní prúvodce, v ktorej popisuje nutnosť použiť niektorý resetovací štýl, ktorý nastaví všetkým typom prehliadačov rovnaké hodnoty, aby ste predišli hackovaniu svojich štýlov.

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126   License: none (public domain)

*/html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

 

2. TopStyle (Lite)

Ako začiatočníkom, tak aj profesionálom sa určite hodí TopStyle, ktorý je momentálne vo verzii 4. Jeho odľahčenú free verziu TopStyle Lite je možné stiahnuť na softonicu.
Okrem zvýrazňovania syntaxe a iných bežných vlastností kvalitných editorov, tento:

• automaticky validuje kód, ktorý píšete
• zobrazuje CSS kód skôr než ho dopíšete
• kontroluje kód pre rôzne prehliadače
• obsahuje Site Reports, ktorý vám ukazuje, kde je CSS kód použitý
• Style Upgrade automaticky prevádza zastaralé HTML kódy do nového CSS

 

3. Ultimate CSS Gradient Generator

V dnešnej uponáhľanej dobe mi viac vyhovuje používať rýchle a jednoduché online nástroje. Software, ktorý sa načíta 10 krát dlhšie, načíta aj funkcie, ktoré vôbec nepotrebujem a zbytočne zaberá RAM je skôr na škodu. Jednou z nich je aj Ultimate CSS Gradient Generator, ktorý generuje prechody rôznych farieb do CSS kódu. Je to dobrá pomôcka, pri ktorej viac nemusíte zapínať PhotoShop pre generovanie pozadia. Čas sú peniaze.

 

4. CSS3 Maker

Jeden z najprepracovanejších CSS generátorov vôbec. Popisuje kompatibilitu nielen v rôznych prehliadačoch ale aj v mobilných zariadeniach. Generuje kód pre:

• Border radius
• Gradienty
• Transformácie
• Animácie
• RGBA
• Tiene textov a objektov
• Otáčanie
• Fonty

Je to pomôcka vhodná najmä pre začínajúcich kodérov, no využiť ju môžu aj pokročilí.

 

5. CSS3 Generator v1.9

Narozdiel od CSS3 Makeru má ďalšie funkcie a to:

• Multiple columns
• Resizer
• Outline
• Transitions
• Selektory

 

6. Webové fonty

Na internete je množstvo rôznych fontov. Tieto stránky obsahujú databázu niekoľkých tisícok z nich. Použitie je jednoduché.

 

@font-face {

font-family: "signature";

src: url(../fonts/signature.ttf);

}

 

Všetko sú to web-safe fonty, takže sa nemusíte báť o design svojich stránok. V dnešnej dobe sa stávajú externé fonty priam štandardom pre grafikov. Hlavne pre tích, ktorý sa starajú o web aj z hľadiska typografického, čo by mal robiť každý poriadny designer.

 

7. CSS Lint

Tento alternatívny validátor CSS kódu, oproti tomu od W3C, validuje kód z TEXTAREA, takže nemusíte pridávať ani odkaz, ani uploadovať súbor s kódom.

 

Všetko sú to vychytávky, ktoré vznikajú spolu s nástupom nových vlastností CSS3 a HTML5. Je ich oveľa viac a každá sa zameriava na niečo iné. My predstavíme tie najlepšie (TopX), ktoré sa týkajú HTML, CSS a JavaScriptu.

 

//Petr Stehlík: Určitě jste si všimli, že tento skvělý a poučný článek jsem nepsal já, ale můj velmi dobrý kamarád Martin Kravec – Slovák, programátor a geek každým bajtem. Jeho články se zde budou objevovat čím dál častěji a věřím, že to bude jen ku prospěchu všech!