Guymon

3D Text mit CSS

Und noch mal CSS3: 3D Text mit text-shadow.

Use multiple text-shadows to create 3D text on any HTML element.
No extra HTML, no extra headaches, just awesomesauce.

Und so sieht der CSS Zaubertrick aus:

h1 {
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
}

Text Overflow mit CSS

Da schau an text-overflow: ellipsis; wird relativ breit unterstützt.

Sometimes through the web design process we may have to clip some dynamic text before it’s being wrapped to the next line of a fixed width box. At the same time we want to provide a visual hint to the user that some text-clipping has been occurred and the text which is being displayed is not complete. The text clipping is usually represented with the ellipsis character (…)

Nur dem Firefox muss man dieses Verhalten erst noch beibringen. Das entsprechende -moz-binding gibt es in dem Posting.

Mit CSS3 wird alles einfacher

net.tutsplus vergleicht 11 “old-school” CSS/JavaScript Techniken und wie sie mit CSS3 umzusetzen sind.

Here are the 11 techniques that I’ll be showing you how to recreate with CSS3. I’ll show you how to create them using CSS2 (or JavaScript), and then with CSS3 properties.

Und hier die Demos:

1. Rounded Corners
2. Box Shadow
3. Text Shadow
4. Fancy Font
5. Opacity
6. RGBA
7. Background Size
8. Multiple Backgrounds
9. Columns
10. Border Image
11. Animations

text-shadow Beispiele

Eine Beispiele was man mit der CSS Angabe text-shadow erreichen kann zeigt webdemar.

zen-coding

Das Textemate Plugin zen-coding erlaubt es z.B. CSS Selectoren zu schreiben und expandiert die dann in HTML Code, z.B.

table>tr>td wird:

<table>
<tr>
 <td></td>
</tr>
</table>

Noch etwas kürzer geht es so: table+

<table>
<tr>
 <td></td>
</tr>
</table>

Mit der erweiterten Syntax kann man dann sowas machen: select>option#item-$*3

<select>
 <option id="item-1"></option>
 <option id="item-2"></option>
 <option id="item-3"></option>
</select>

Sehr cool!