Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-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.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Tobi
    schrieb am 04.09.2020 um 16:40 Uhr:

    Kann ich das auch für eine bestimmte Klasse machen?

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 10.09.2020 um 13:56 Uhr:

      Ja – .class::selection { … }

      Antworten
  2. Alfred
    schrieb am 04.07.2019 um 13:10 Uhr:

    warum geht das in Chrome nicht :/

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 22.07.2019 um 14:44 Uhr:

      Bei uns funktioniert es.

      Antworten
  3. Eduard Seifert
    schrieb am 17.05.2012 um 12:53 Uhr:

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

    Antworten

Schreibe einen Kommentar zu Alfred Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

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 →