Základy CSS

Jiná barva podtržení odkazu

Bez využití CSS3 nelze napsat odkaz modrým fontem, ale podtržení po "hover" mít červeně. CSS3 nám tuto možnost dává skrze vlastnost "text-decoration-color".

Alternativní řešení by bylo, že odkaz nebude mít podtržení a po "hover" budeme přidávat "border-bottom".

Jak stylovat <select> ?

aneb stylování roletky, selectu, ...

Stylování roletky je potřebné velmi často a není nikterak jednoduché. Mnohdy je tedy nutné použít alternativu roletky za pomoci javascriptu atd.. Samotný prvek, ale má několik vlastností, které lze editovat a mohou postačit.

Zajímavé CSS3 efekty

V tomto článku předkládám několik základních, ale přesto zajímavých CSS3 efektů. Samotná volba těchto efektů byla volena z několikati důvodů:

1. Aby se efeket dal jednoduše napojit na nějaký prvek (třeba tlačítko) pouze doplněním třídy s daným CSS3 efektem
2. Aby daný efekt po přidání z danému prvku neměnil například barevnost tohoto prvku => aby jej šlo přidat všude a nebyl problém že nám efekt přebarví co nechceme (u některých jsem tento bod upozadil, protože jso u tak specifické že je škoda o ně přijít a navíc třeba u tlačítek Vám nevadí tuto třídu poupravit pro celý web).

Jak vyřešit mezeru mezi inline-block elementy?

Pokud máte 4 bloky, které jsou 25% široké a jsou "display: inline-block;", tak se Vám vedle sebe nevejdou. Určitě se ptáte proč, vždyť 4*25 = 100, což sedí. Pokud by byly prvky "float: left;", tak to funguje. Co je tedy tak jiné na "display: inline-block;"?

Jak na vlastní vzhled odrážek seznamů?

Základní vzhled seznamů/listů je ve většině webů příliš strohý a je dobré si dané "odrážky" dostylovat ať již barevností, či dokonce vlastním vzhledem odrážky. Několik způsobů jak toho docílit se dočtete v článku.

Responsivní design webu přez CSS

optimalizace stránky pro mobilní zařízení

V dnešní době je již nutné, aby všechny weby byly takzvaně responsivní. Pojem responsivní znamená, že dané weby dokážete zobrazit na mobilním zařízení (mobilní telefon, tablet, atd..) a pohybovat se v nich aniž by jste musely web různě "zoomovat" a snažit se trefit do miniaturních odkazů atd...
Navíc Google již začíná responsivitu vyžadovat, kdy má již web pro kontrolu, zda je daný web responsivní. Je tedy otázkou času než začne za "ne-responsivní design" trestat nejspíše formou snížením vyhledávacího ratingu stránek (formu trestu odhaduji).

CSS selektory 1.část

Jak volit elementy stránky?

Pro správné nastylování stránky je nutné dokázat přesně specifikovat jaký element má dostat jaké styly. V článku je souhrn jak dané prvky specifikovat. Není zde pouze id/třída/tag, ale i velmi zajímavé obraty které ušetří řádky v PHP či Javascriptu a je tedy dobré je znát.

CSS selektory 2.část

Jak volit elementy stránky?

Pro správné nastylování stránky je nutné dokázat přesně specifikovat jaký element má dostat jaké styly. V tomto článku zmíním zajímavou selekci za pomoci více selektorů jednoho prvku zároveň.

Jak vytvořit vlastní vzhled file inputu.

Stylování formulářových prvků je většinou problematické, což platí i o "file inputu". Ten se mění napříč prohlížeči mnohdy je těžké vědět i jeho šířku/výšku natož mu měnt vzhled. Tento článek poradí jak takový file input vytvořit.

Jak vytvářet grafické filtry prvků na stránce?

CSS filter

Grafické filtry přez CSS se hodí, když potřebujete nějaký prvek stránky (jakýkoliv blok, obrázek prostě cokoliv) upravit bez zásahu grafika. Upravovat lze různé vlastnosti jako: rozmazání, světlost, kontrast, stín prvku, přechod do černobílé barevnosti, "otočení barev", inverze barev, sytost, "stará fotografie" .
Velkou nevýhodou filtrů je skutečnost, že nejsou podporovány v prohlížeči Internet Explorer. S ohledem na ústup tohoto prohlížeče a všeobecnou preferenci Chrome/Firefox to komplikace je menší, ale musí se s touto skutečností počítat.