kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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; 
}

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

1 Kommentar

  1. Eduard Seifert

    Verfasst am 17. Mai 2012 um 12:53 Uhr.

    Danke für den Hinweis mit text-shadow: none.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.