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!

• CSS hacky – přehled
• Pracovní režimy prohlížečů