CSS

LESS je zajímavé rozšíření klasického zápisu kaskádových stylů CSS umožňující v nich používat proměnné, funkce, operace a větvit části zápisů do sebe. Výsledkem je pak radikální zrychlení tvorby finálního stylesheetu.

Chcete k základní variantě svých webových stránek nabídnout také mobilní zobrazení? Někdo se omezí na redukci grafických prvků, jiný dá přednost tzv. responsive designu. V článku si ukážeme, jak vytvořit mobilní vzhled webu simulující vzhled aplikace pro iPhone.

Nejnovější verze webového prohlížeče Firefox přináší několik vylepšení i po stránce pomůcek pro vývojáře webu. Pojďme se podívat, co všechno momentálně Firefox 11 nabízí pro tvůrce webových stránek a jak můžete tyto nástroje využít.

Některé grafické návrhy pro webové stránky počítají s tím, že různé rozbalovací nabídky formulářů (prvek <select>) mají vlastní vzhled, nezávislý na webovém prohlížeči. V CSS samotném toho moc nezmůžete, ale s jednoduchým pluginem pro jQuery to můžete vyřešit jak v jednoduchých stránkách, tak třeba v Drupalu.

Nové značky v HTML5 jsme již několikrát nakousli. Dnes se podíváme podrobněji na tvorbu kostry stránky tvořené v HTML5, na nové značky pro její vytvoření a na úpravy layoutu pomocí CSS3. Řada věcí je nová a dobrou zprávou je, že vše je jednodušší, než kdy dříve.

Nedávno jsme si ukázali novinky, které nabízí HTML5 pro tvorbu webových formulářů. Dnes se podíváme, jak můžeme tyto formuláře nastylovat s využitím novinek v CSS3. Vyzkoušíme si stínování, přechodové výplně a zaoblené rohy.

V mailech i komentářích pod články se často ptáte, jak se pustit do stylování Drupalu. Nemůžete se zorientovat ve vygenerovaném HTML ani v připravených šablonách. Je to přitom snadné. V návodu se podíváme, jak připravit vzhled bloku s poslední anketou, přičemž využijeme úpravy pomocí CSS3.

Požadavek na vytvoření rozbalovacího menu v Drupalu je poměrně častý a každý jej řeší jiným způsobem. Z hlediska výsledku asi nejčistějším řešením je nakódování rozbalovacího menu jen s využitím CSS. Obejdete se tak bez doplňkových modulů.

Chcete vytvářet své kaskádové styly efektivně? A ještě jste nevyzkoušeli Firebug? V tom případě se podívejte na video představující jednotlivé vývojářské nástroje zabudované do webových prohlížečů a využijte jejich funkcí pro usnadnění své práce.

Chcete na svém webu využít všech novinek, které přináší podpora kaskádových stylů ve verzi CSS 3 u současných webových prohlížečů? Než se naučíte nové definice z CSS 3 z paměti, pomůže vám klikací udělátko CSS Maker 3.0 na webu.

Google spustil službu, jejímž úkolem je nabídnout online prohlížeč nejrůznějších písem a zároveň poskytnout jednoduchou možnost, jak si tato písma kdokoli doplní do svých webových stránek. Zapomeňte tedy na složité vyhledávání fontů.

Pokud webová stránka obsahuje větší množství CSS souborů, může být její načtení do prohlížeče mírně zpožděno. Současná rychlost internetových připojení je taková, že nejde o velký problém, přesto můžete vyzkoušet nástroj, který vaše CSS soubory zmenší.

Stavíte si web a hledáte nějaký povedený nástroj pro vytváření a úpravu kaskádových stylů? Pokud jste příležitostní weboví tvůrci a nemáte zakoupen profesionální nástroj, pak vyzkoušejte freewarovou pomůcku ArduoCss.

Nastavení vzhledu tabulek na webových stránkách je často nejvíce nepříjemná část práce webového designéra, resp. toho, kdo tvoří soubor CSS. Myslím, že nebudu daleko od pravdy, když napíšu, že většina designérů počítá s tím, že tabulky se prostě nějak zobrazí, plus mínus podobně jako zbytek webu. Také si nevzpomínám, že bych někdy viděl grafický návrh, který by nějakým způsobem počítal se zobrazením tabulek.

Na letošním Remixu byla jedna z přednášek věnována také málo známým trikům v použití kaskádových stylů. Každý asi zná podmíněné formátování pro nastavení stylů podle použitého webového prohlížeče, rozdíly mezi identifikátory a třídami, dědičnost atd. Molly Holzschlag ukázala i několik méně známých fint, jak přivést webové stránky k dokonalosti pomocí kaskádových stylů. Nabízím vám stručný přehled těch nejzajímavějších.