robsite

In css

What the Heck is Shadow DOM?

Versteckte DOM-Unterbäume, mit denen browser die Implementierung komplexerer Elemente verbergen (<video>, <input>, ...). Mit einigen Tricks kann man auf sie zugreifen. Eigene Shadow-Trees kann man im Moment nicht erstellen, was aber vor allem für Frameworks praktisch wäre.

· css, html, javascript, webdev ·

Sasha (Select All)

Per CSS3 ::selection-Pseudoelement-Selektor:

p::selection {
  color: #fff;
  background: #fff;
  text-shadow: #000 0px 0px 4px;
}
p::-moz-selection {
  color: #fff;
  background: #fff;
}

Pseudoelement-Selektoren beginnen in CSS3 mit zwei Doppelpunkten um sie leichter von Pseudoklassen-Selektoren unterscheiden zu können.

Pseudoklassen sind Eigenschaften, die sich nicht direkt aus dem HTML ergeben. Elemente, die den gleichen Namen, Inhalt und die gleichen Attribute enthalten, können trotzdem unterschiedliche Pseudoklassen haben, wie z.B. :hover und :first-child.
Pseudoelemente sind Elemente, die so nicht einzeln und auswählbar im HTML stehen, wie ::selection, ::first-letter, ::before und ::after.

Firefox/Gecko und Opera verstehen bei ::selection nur background und color, während WebKit auch noch text-shadow, -webkit-text-stroke und -webkit-text-fill-color unterstützt.

MobileSafari ignoriert ::selection allerdings komplett.
· css, nsfw ·

FontSquirrel: Free fonts for graphic designers

Mit @font-face können Fonts eingebunden werden, die nicht auf dem Rechner des Benutzers liegen. Schöne Designs sind damit möglich, nur müssen die meisten Fonts teuer lizensiert werden, um sie auf der eigenen Website zu benutzen.

Fontsquirrel hat über 600 freie Fonts, die auch kommerziell genutzt werden können. Mehr:

FontSquirrel hat auch einen schicken @font-face generator, der einem die Fonts konvertiert und das passende CSS auswirft.

Edit: Google hat grad sein Font Directory vorgestellt. Viele freie Fonts, die mit der passenden API sehr leicht eingebunden werden können.

· css, font ·

CSS3 Tools

CSS3 bietet viele feine Funktionen für runde Ecken, Schatten, Gradients oder Web-Fonts. Noch machen dabei alle Browser ihr eigenes Ding, weswegen der Standard noch nicht finalisiert ist. Hier ein paar Tools, die einem das Bauen von browserunabhängigem CSS3 erleichtern:

CSS3, Please!

hat live veränderbare Snippets für border-radius, box-shadow, lineare Gradients, Rotationen und WebFonts. Mehr soll bald kommen.

Der

CSS3 Gradient Generator

generiert lineare Gradients für Webkit und Firefox, während die

ein schickes Interface bieten, mit dem man sich lineare und radiale Gradients, Schatten, Text-Strokes und diverse 2D- und 3D-Transformationen zusammenklicken kann. Chris Casciano erklärt dann noch, wie man box-shadow-ähnliche Schatten im IE hinbekommt.

Ich hab auch mal meine paar CSS3- und HTML-TextMate-Snippets zusammengepackt: Textmate HTML- und CSS3-Snippets - 5 KB

Die Beipiele sehen am besten aus in Safari und Chrome.

· css, tool ·
Mastodon