Pro CSS
Kategorie „Hotová řešení: pro CSS“ obsahuje něco málo přes stovku užitečných rad a postupů, které vám mohou pomoci při vaší webdesignerské praxi. Pokud jste autorem nějakého zajímavého řešení v CSS, o kterém si myslíte, že by mohlo být užitečné i ostatním čtenářům (nebo na něj narazíte někde na internetu), neváhejte nás kontaktovat.
Pro pozicování
Pozicování znamená umísťování obsahu na dané místo ve stránce.
- Patička vždy dole
- Min-height pro MSIE
- Vertikální zarovnání stránky o plovoucí šířce na střed
- Fixní pozicování stránky
- Horizontální zarovnání stránky o plovoucí šířce na střed
- Horizontální zarovnání stránky o pevné šířce na střed
- Min-width bez JavaScriptu či Expressions i pro MSIE
Layouty
Layout je základní rozvržení prvků v celku, elementů ve stránce.
- Třísloupcový layout – svatý grál
- Čtyřsloupcový layout s position: absolute;
- Simulace rámců 2
- Třísloupcový fixní layout se stejnou délkou panelů
- Dvousloupcový layout s pevnou šířkou
- Vychytaný třísloupcový fluidní layout se stejnou délkou panelů
- Dvousloupcový layout s plovoucí šířkou pravého panelu
- Dvousloupcový layout s plovoucí šířkou obou panelů
- Třísloupcový layout se stejnou délkou všech panelů
- Třísloupcový fluidní layout
- Simulace rámců
Menu
Menu je základním nástrojem pro pohyb mezi stránkami.
- Drobečková navigace v CSS
- Vertikální menu s komentáři
- Horizontální menu s vertikálním písmem
- Horizontální menu s náhledem stránky
- Horizontální obrázkové blokové menu s popisem
- Horizontální průhledné hover menu
- Vertikální dvouúrovňové obrázkové menu 2
- Horizontální dvouúrovňové obrázkové menu
- Horizontální obrázkové menu
- Onclick menu bez reloadu i JS
- Vertikální dvouúrovňové obrázkové menu
- Horizontální záložkové obrázkové menu
- Horizontální menu s šířkou nadřazeného bloku
- Odrážkové horizontální menu
- Horizontalní menu se zvětšením
- Vysouvací menu – rozcestník
- Horizontalní stínované menu
- Menu s náhledy
- Menu v obrazové mapě
- Vertikální vysouvací menu
- Kartičkové hover menu
- Vertikální hover menu
- Vertikální menu s podnabídkami
- Vertikální 3D menu
- Záložkové menu vysouvající se nahoru
- Záložkové menu vysouvající se dolů
- Horizontální vysouvací menu
- Horizontální ZDnet menu
- Vertikální obrázkové menu
- Hover menu
- Horizontální dvouúrovňové menu
- Experimentální vysouvací hover menu bez skriptování
Finty, triky, návody
Finty, aneb jak donutit prohlížeč kouzlit.
- Stránkování
- Stínování textu
- Zoom obrázku
- Kulaté rohy
- Průhledné pozadí ve všech prohlížečích
- Obrázky reagující na velikost viewportu
- Spouštění animovaných obrázků
- Prohlížeč panoramatických obrázků
- Alternativa ke clear:both 2
- Pozadí s opakováním
- Obrázkové podtržení odkazu
- Tabulka se skrolováním
- Odkaz Více
- Prevence zalamování řádku
- Kulatý roh stránky
- Alternativa ke clear:both
- Hover nápověda
- Nahrazení tečkovaného okraje při onfocus
- Tečkovaný rámeček i pro IE
- Obsah dokumentu
- Náhled obrázku
- Banner jako pozadí
- SEO obrázky
- Stínování objektů
- Scrollbar vlevo
- CSS font
- CSS grafy
- Hover popis fotky pro IE5+
- Skrytí e-mailu před harvestery e-mailových adres (antispam)
- Simulace animace v CSS
- Zakulacené rámečky
- Změna barvy odstavce
- Hover galerie
- Zvýraznění odkazů
- Alternativní styly
- CSS zvlášť pro MSIE a ostatní prohlížeče
- Hodnocení hvězdičkami
- Načítání obrázků
Formátování
Poznámky ke speciálním případům formátování textu a obsahových elementů.
- Hover efekt pro seznam odkazů
- Tabulka s posuvníkem a pružnou šířkou
- Obrázkové popisné seznamy
- Objekt mezi odstavci
- Fotogalerie se stejnou výškou řádku
- Fotogalerie se zmenšenými obrázky a popisky
- HR – vodorovná čára
- Kalendář v CSS
- Inline tlačítka
- Styly formulářů
- Rámování tabulek
- Mapa webu
- Formátování tabulek
- Hrátky s okrajem textu
- Obrázek na pozadí odstavce
- Nadpis s obrázkem jako odrážkou a podtržením
- CSS úprava pro tisk
- Seznam s obrázky jako odrážkami
- Akordy – formátování pomocí CSS
- Dvousloupcový seznam
- Diagramy v CSS bez použití obrázků
- Iniciálka v úvodu odstavce
- Formuláře v CSS
- Galerie pomocí vlastnosti float
- Odsazení textu od okraje divu
- Typografie na webu – velikost a odsazení jednotlivých elementů
- Obtékání obrázku
- Netabulková data naformátovaná jako tabulka
Pomůcky a nástroje
Zde se snažíme shromažďovat různé pomůcky a užitečné nástroje pro práci s kaskádovými styly. Pokud víte o nějakém vhodném doplňku nebo jste autorem zajímavého nástroje, neváhejte nás kontaktovat!
