Textmarker-Farben als background-color

Auch in Website kann man, wie im echten Leben, wichtige Passagen markieren bzw. hervorheben.

Für diesen Fall gibt es das HTML Mark Text-Element (<mark>).
Es gibt per Browser-Default eine Farbe welche den Hintergrund farbig hinterlegt.

Diesen Farbwert kann man global per CSS einmalig für die Website definieren:

::-moz-selection{
background: #______;
}
::selection{
background: #______;
}

Mit entsprechender CSS-Klasse kann man auch individuell Farben einsetzen.

Warum nicht LifeLike-Farben von STABILO BOSS® im Webdesign verwenden?

Textmarker ORIGINAL-Farben

.markYellow{
background: #f1e740; background: rgb(241, 231, 64); background: hsl(57, 86%, 60%);
}
.markBlue{
background: #3aafdc; background: rgb(58, 175, 220); background: hsl(197, 70%, 55%);
}
.markGreen{
background: #2ba727; background: rgb(43, 167, 39); background: hsl(118, 62%, 40%);
}
.markRed{
background: #e94f58; background: rgb(233, 79, 88); background: hsl(356, 78%, 61%);
}
.markTurquoise{
background: #009e6c; background: rgb(0, 158, 108); background: hsl(161, 100%, 31%);
}
.markOrange{
background: #f39539; background: rgb(243, 149, 57); background: hsl(30, 89%, 59%);
}
.markLavender{
background: #85569c; background: rgb(133, 86, 156); background: hsl(280, 29%, 47%);
}
.markPink{
background: #ea5a79; background: rgb(234, 90, 121); background: hsl(347, 77%, 64%);
}
.markLilac{
background: #d72e83; background: rgb(215, 46, 131); background: hsl(330, 68%, 51%);
}
markYellow markBlue markGreen markRed markTurquoise markOrange markLavender markPink markLilac

Textmarker ORIGINAL-Pastel-Farben

.markTouchOfTurquoise{
background: #a1d4cf; background: rgb(161, 212, 207); background: hsl(174, 37%, 73%);
}
.markHintOfMint{
background: #90cbaa; background: rgb(144, 203, 170); background: hsl(146, 36%, 68%);
}
.markCreamyPeach{
background: #f4a384; background: rgb(244, 163, 132); background: hsl(17, 84%, 74%);
}
.markPinkBlush{
background: #f4acb6; background: rgb(244, 172, 182); background: hsl(352, 77%, 82%);
}
.markMilkyYellow{
background: #f8dd74; background: rgb(248, 221, 116); background: hsl(48, 90%, 71%);
}
.markLilacHaze{
background: #d5b6d4; background: rgb(213, 182, 212); background: hsl(302, 27%, 77%);
}
.markCloudyBlue{
background: #b5c9df; background: rgb(181, 201, 223); background: hsl(211, 40%, 79%);
}
.markDashOfLime{
background: #dff18f; background: rgb(223, 241, 143); background: hsl(71, 78%, 75%);
}
.markMellowCoralRed{
background: #fa7656; background: rgb(250, 118, 86); background: hsl(12, 94%, 66%);
}
.markCherryBlossomPink{
background: #fe7d8f; background: rgb(254, 125, 143); background: hsl(352, 98%, 74%);
}
markTouchOfTurquoise markHintOfMint markCreamyPeach markPinkBlush markMilkyYellow markLilacHaze markCloudyBlue markDashOfLime markMellowCoralRed markCherryBlossomPink


source:

Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.