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.
Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen
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;
}
Feedback & Ergänzungen – 5 Kommentare
Kommentar zu dieser Seite
Website-Projekte mit kulturbanause
Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.
Übersicht Kompetenzen →Schulungen von kulturbanause
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Übersicht Schulungsthemen →
Kann ich das auch für eine bestimmte Klasse machen?
Ja –
.class::selection { … }
warum geht das in Chrome nicht :/
Bei uns funktioniert es.
Danke für den Hinweis mit text-shadow: none.