CSS 3

CSS pseudo-třídy: nth-child, nth-of-type, nth-last-of-type

_
_

Článek z oboru slibuji už dlouho. A čím lepším pokračovat, než pořádným seznamem tipů a triků, jak snáz stylovat web. Dnes se podíváme některé pseudo-třídy kaskádových stylů, které vám usnadní stylování dlouhých seznamů. Ale i krátkých. Také se pokusím vysvětlit, proč tyto selektory nefungují vždy tak, jak bychom si představovali.

Celý článek

CSS transition a vytvoření jednoduchého JS carouselu

_
_

V minulém článku jsem sliboval, že bude další, ve kterém najdete návod na jednoduchý carousel vytvořený za pomoci JavaScriptu a CSS transition. Tak tady je. Pokud si na stránce zascrollujete trochu níž a vyhledáte v pravém sloupci "Mikroblog" a "Nejnovější články", tak přesně to bude výsledek. Pokud se vám metoda fade in/fade out nelíbí, v druhé části článku se můžete podívat, jak slider upravit na posuv ze strany na stranu. Jak potom dostat obě metody do jediné funkce, to si můžete zkusit sami; funkce to budou opravdu jednoduché a jejich úprava nebude nijak složitá. JavaScript zde bude ještě jednodušší než styly; takže asi taková bude náročnost. Ale i tak si všechno krok po kroku projedeme. Se vším nám pomůže knihovna jQuery.

Celý článek

CSS transition: animace přes změnu třídy - základy

_
_

CSS vlastnost transition je taková kouzelná formule, kterou můžeme využít nesčetnými způsoby. Zjednodušeně řečeno je to animace. Provede to, co bychom za jiných okolností poslali do jQuery metodě animate. Použití je velice jednoduché, vše si lze pohodlně testovat ve Firebugu. Dnešní článek bude takový úvod, abyste se s vlastností mohli seznámit, pokud ji ještě neznáte. V druhém článku bych pak ukázal využití v praxi: napíšeme si jednoduchý slider (carousel), který rozhýbe pouze změna třídy. Transition má 4 různé vlastnosti, které lze zapsat pod její definici. Povinný je ale pouze čas.

Celý článek

Jak na responzivní web: CSS Grid Layout, stylování Widgetů

_
_

Je čas zase na nějaký článek na téma, kterému byl tento blog původně věnován. V dnešním tutoriálu ukážu krátký návod, jak vytvořit takzvané Widgety závislé na aktuální šířce okna; naučíme něco o responzivním webu. Samotnému layoutu o dynamické šířce se věnovat nebudu; dnes budu předpokládat, že toto už umíte. Widgety v různé podobě jsou nyní vcelku populární záležitost, jenže jak se to má člověk naučit, když článků je pomálu.

Celý článek

Tipy na moderní web: Font Awesome, šipky pomocí CSS

_
_

Webdesign je oblast, která se pořád vyvijí a pokud chce člověk držet krok, je potřeba stále studovat nové technologie a využívat vše, co nám nynější prohlížeče dovolí. V dnešním článku si ukážeme jednu kodérskou vychytávku, a to, jak vytvořit jednoduché šipky pouze pomocí css. V druhé části představím piktogramové písmo Font Awesome spolu se stručnou ukázkou použití.

Celý článek

Jak jsem opravoval optický klam

_
_

Aneb stále se učím. Tedy abych byl přesný, nejednalo se o optický klam, ale o bug v zobrazení modelu RGB. Měl jsem stránku, kde byly v patičce ikonky sociálních sítí. A došel mi bug report, že druhá z ikon, YouTube, je trochu uskočená. Jelikož obrázky byly stylama zmenšené a navíc měly jednopixelovou mezeru přímo v sobě, první, co mě napadlo, bylo samozřejmě vše přeuložit. Zkusil jsem mezeru v obrázku, mezeru mimo obrázek, dvoupixelovou mezeru vně i uvnitř obrázku, no prostě všechno... Nic.

Celý článek

Když klient reportuje už opravené chyby

_
_

Provádění stylových, grafických či JavaScriptových úprav na webové prezentaci a jejich následné posílání na validaci klientovi by vydalo na samostatný blog, já vám ale dnes ukážu jednoduchý tip, jak těmto situacím co nejvíce předejít. Znáte to: upravíte styl, napíšete, že je hotovo a klient vám obratem odpoví, že není. Tak musíte znovu otevřít mail, napsat mu, aby zmáčknul ctrl+F5 nebo ctrl+R a pak bude to v pořádku. Jenže po jisté době to samozřejmě začne být otravné... Jak tedy donutit prohlížeč aby smazal původní soubor v cache a nahradil ho novým?

Celý článek

CSS hacky pro nejpoužívanější prohlížeče: díl II

_
_

Jak jsem slíbil, přináším pokračování článku CSS hacky pro nejpoužívanější prohlížeče. Oproti prvnímu dílu zde najdete Internet Explorer až po verzi 11 a také poměrně problematické rozlišení Safari a Google Chrome. Většina CSS hacků naštěstí funguje stále dobře - jediné, s čím jsem měl trochu problém byla Opera. Možná i rozlišení některých verzí IE může být trochu složitější, ale neexistuje nic, co bychom nezvládli zapsat.

Celý článek

10 způsobů, jak udělat z Internet Exploreru moderní prohlížeč

_

Kolega mi nedávno doporučil zajímavý článek s tipy, jak přimět Internet Explorer 6, aby se choval jako "pořádný" prohlížeč. Považuji za slušné vychování se s vámi o tyto vyzkoušené triky podělit. Originální text je v angličtině, a tak ho po přeložení také publikuji. Ukážeme si například, jak na stínování písma, průhlednost, kulaté rohy přes CSS nebo zprovoznění HTML 5.

Celý článek

CSS hacky pro nejpoužívanější prohlížeče

_

Odlišené vykreslení různými prohlížeči je věc, která dříve či později potrápí každého kodéra. Ať už se jedná přímo o bugy, nebo pouze o drobný rozdíl při vykreslování konkrétních prvků, je potřeba dosáhnout shody ve všech majoritních prohlížečích. Chyby Internet Exploreru a způsoby, jak je obejít jsou dávno obecně známé, ovšem o umravnění zlobivého Firefoxu nebo Google Chrome se tolik nemluví. I když je v kodérově nejlepším zájmu, psát styly tak, aby hacků použil co nejméně, nastávají situace, kdy se jim vyhnout nemůžeme. Oprava stylů po někom jiném je práce, kterou nikdo nemá rád a nechce dělat, ale také vhodná chvíle, kdy nasadit CSS hacky.

Celý článek

1 |