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