Individuelle Textmarkierungen mit CSS

Mit CSS3 habt ihr die Möglichkeit die Textmarkierungen eines Besuchers zu gestalten. Insbesondere wenn ihr davon ausgeht, dass Seitenbesucher auf eurer Website häufig Text markieren und kopieren werden – beispielsweise weil ihr regelmäßig Code-Snippets zur Verfügung stellt – lohnt es sich die Markierungen individuell hervorzuheben. Und natürlich lässt sich so auch das allgemeine Design einer Website positiv beeinflussen.

Der folgende CSS-Code wird benötigt um die Textmarkierung zu gestalten. Erwähnenswert ist hier vor allem die Eigenschaft text-shadow: none;. Solltet ihr in euer Website nämlich bereits Schatten- oder Letterpress-Effekte mit CSS3 umgesetzt haben, so könnte dieser Effekt bei einer Textmarkierung zu Fehldarstellungen führen. Um das zu vermeiden wird der text-shadow innerhalb der Markierung deaktiviert.
Für Mozilla Firefox muss ein Prefix verwendet werden.

::-moz-selection { 
   color:#000; 
   background:#ff9600; 
   text-shadow: none; 
}

::selection { 
   color:#000; 
   background:#ff9600; 
   text-shadow: none; 
}

Geschrieben von Jonas

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing