Změna obrázku se setměním Spojením jednoduchého javascriptu a moderního CSS3 můžeme vytvořit efektní stmívací přechod:   Kód: <img src=“starý obrázek“ id=“obrazek“ style=“transition:opacity 1s;-webkit-transition:opacity 1s“> <span onclick=“document.getElementById(‚obrazek‘).style.opacity=0;setTimeout(function() { document.getElementById(‚obrazek‘).src=‘nový obrázek‚; document.getElementById(‚obrazek‘).style.opacity=1;  },1000)“>změnit obrázek</span> Ukázka: změnit obrázek

Svislý text Toto se může hodit třeba, když je potřeba ušetřit místo, ale text přesto zobrazit. Využívá CSS3.   Kód: <div style=“transform: rotate(270deg);-webkit-transform: rotate(270deg);display: inline-block“>text</div> Ukázka: nakloňte se prosím o 90°

Velké mezery mezi písmeny Aby text (nejspíše nadpis) vypadal efektně, můžeme použít tento kód a zvětšit tak mezery mezi písmeny:   Kód: <div style=“letter-spacing:1em“>Velké mezery mezi písmeny</div> Ukázka: Velké mezery mezi písmeny

Více textu na sobě Tento kód umístí několik různých textů na sebe, pomocí čistého CSS:   Kód: <div style=“position:relative“> <div style=“position:absolute;top:0″>První text</div> <div style=“position:absolute;top:0″>Druhý text</div> <div style=“position:absolute;top:0″>Třetí text</div> </div> Ukázka: První text Druhý text Třetí text

Text, který se nezalomí Tento odstavec textu se nazalomí, ani když přesáhne stránku:   Kód: <div style=“white-space: nowrap“>Tato dlouhá věta se nezalomí, přestože je tak moc dlouhá. Dosahuje totiž až na okraj stránky – ale pořád se nezalomila.</div> Ukázka: Tato dlouhá věta se nezalomí, přestože je tak moc dlouhá. Dosahuje totiž až na okraj stránky…

Ustřihnutý nápis Tento kód se hodí zejména, pokud se nápis mění, například uživatelské jméno z databáze, a obsahuje řádek textu, který pokud je text moc dlouhý, text ustřihne:   Kód: <div style=“width: 300px;overflow-x:hidden;white-space:nowrap“>Nějaký dlouhý text</div> Ukázka: Nějaký text, který se sem vejde Nějaký delší text, který se pořád vejde Nějaký ještě delší text, který se…

Vertikální seznam obrázků Přestože to vypadá normálně, není to normální. Tento seznam se dá rolovat bez potřeby rolování celou stránkou, což zvyšuje uživatelskou přívětivost:   Kód: <div style=“width:300px;overflow-y:scroll;“> <img src=“url„> <img src=“url„> <img src=“url„> <img src=“url„> </div> Samozřejmě je možno vložit více obrázků, nebo třeba více seznamů vedle sebe. Ukázka:

Horizontální seznam obrázků Pro dostatek místa se určitě může hodit i seznam obrázků, který je zarovnaný horizontálně s posuvnou lištou, k čemuž nám pomůže tento kód:   Kód: <div style=“width:300px;overflow-x:scroll;white-space:nowrap“> <img src=“url„> <img src=“url„> <img src=“url„> <img src=“url„> </div> Samozřejmě je možno vložit více obrázků. Ukázka:

Oblast s čekacím kurzorem Toto může být užitečné třeba při JavaScriptovém načítání, pokud uživatel najede myší do tohoto pole, kurzor se změní na načítání:   Kód: <div style=“width:100px;height:100px;background-color:blue;cursor:wait“></div> Ukázka:

Zvětšitelný obrázek Tento obrázek se zobrazuje nejprve malý jako ikona a po kliknutí na odkaz se zvětší na svou plnou velikost.   Kód: <img src=“adresa obrázku“ id=“obrazek“ style=“width: 20px“> <a href=“#“ onclick=“document.getElementById(‚obrazek‘).style.width=’auto’“>zvětšit</a> Ukázka: zvětšit