Markierten Text mittels CSS3 gestalten

Dienstag: 15. Feb 2011
CSS3 bietet die Möglichkeit mittels Pseudo-Elementen markierten Text zu gestalten:
::selection {
background:#000;
color:#fff;
}
Safari (ab 3.1), Opera (ab 9.5) und Chrome (ab 2.0) verstehen dies bereits. Mozilla kann man dazu bewegen dies auch zu tun indem man den Prefix -moz- voransetzt:
::-moz-selection {
background:#000;
color:#fff;
}
Da dies nicht nur auf auf den Hintergrund und die Textfarbe begrenzt ist, kann man hier sicherlich auch andere Lösungen finden. Wenn man schon CSS3 nutzt, kann man auch folgendes machen:
::selection {
background: transparent;
text-shadow: 0 0 0.25em #000;
}

Demo: http://spielwiese.jooon.de/css3/marked-text/

Mehr zu Pseudo-Elemente: reference.sitepoint.com/css/pseudoelements/

Noch keine Bewertungen vorhanden
Tags:

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <i>
  • Zeilen und Absätze werden automatisch erzeugt.

Weitere Informationen über Formatierungsoptionen

Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.