Eingestellt unter Webdesign.

Textmarker-Farben als background-color

Verfasst von Michael S. Ritzenhoff am .

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

Für diesen Fall gibt es das HTML Mark Text-Element:

<mark>content...</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

Colorname CSS-Colorcode
markYellow .markYellow{
background: #fce900;
background: rgb(252 233 0 / 1);
background: hsl(55.48 100% 49%);
background: color(display-p3 0.9755 0.9163 0.3049);
background: oklch(92.02% 0.1939 103.54);
}
markBlue .markBlue{
background: #3ec0f0;
background: rgb(62 192 240 / 1);
background: hsl(196.18 86% 59%);
background: color(display-p3 0.4004 0.7427 0.9224);
background: oklch(75.81% 0.1291 227.4);
}
markGreen .markGreen{
background: #85bd3f;
background: rgb(133 189 63 / 1);
background: hsl(86.67 50% 49%);
background: color(display-p3 0.5688 0.7353 0.3249);
background: oklch(73.45% 0.1661 130.23);
}
markRed .markRed{
background: #f18794;
background: rgb(241 135 148 / 1);
background: hsl(352.64 79% 74%);
background: color(display-p3 0.8894 0.5502 0.5858);
background: oklch(74.15% 0.1296 12.91);
}
markTurquoise .markTurquoise{
background: #009bb4;
background: rgb(0 155 180 / 1);
background: hsl(188.35 99% 35%);
background: color(display-p3 0.2678 0.5986 0.6938);
background: oklch(63.43% 0.1117 214.49);
}
markOrange .markOrange{
background: #ea5725;
background: rgb(234 87 37 / 1);
background: hsl(15.23 82% 53%);
background: color(display-p3 0.8509 0.3803 0.2145);
background: oklch(64.6% 0.1917 37.76);
}
markLavender .markLavender{
background: #9d74b1;
background: rgb(157 116 177 / 1);
background: hsl(280.32 28.000000000000004% 56.99999999999999%);
background: color(display-p3 0.5911 0.4613 0.6791);
background: oklch(62.21% 0.1004 314.24);
}
markPink .markPink{
background: #ed6ea7;
background: rgb(237,110,167);
background: hsl(333.08 78% 68%);
background: color(display-p3 0.8673 0.46 0.6481);
background: oklch(70.55% 0.1674 354.11);
}
markLilac .markLilac{
background: #9a35b5;
background: rgb(154,53,181);
background: hsl(287.34 55.00000000000001% 46%);
background: color(display-p3 0.5583 0.2352 0.6864);
background: oklch(52.95% 0.2035 318.28);
}

Textmarker ORIGINAL-Pastel-Farben

Colorname CSS-Colorcode
markCreamyPeach .markCreamyPeach{
background: #f49e84;
background: rgb(244,158,132);
background: hsl(13.9,83.6%,73.7%);
}
markPinkBlush .markPinkBlush{
background: #f5aebb;
background: rgb(245,174,187);
background: hsl(349,78%,82.2%);
}
markMilkyYellow .markMilkyYellow{
background: #f5efa1;
background: rgb(245,239,161);
background: hsl(55.7,80.8%,79.6%);
}
markFrozenFuchsia .markFrozenFuchsia{
background: #e5a0dc;
background: rgb(229,160,220);
background: hsl(307.8,57%,76.3%);
}
markBreezyBlue .markBreezyBlue{
background: #a1d3ea;
background: rgb(161,211,234);
background: hsl(198.9,63.5%,77.5%);
}
markCloudyBlue .markCloudyBlue{
background: #b2e0f7;
background: rgb(178,224,247);
background: hsl(200,81.2%,83.3%);
}
markDashOfLime .markDashOfLime{
background: #ccff99;
background: rgb(204,255,153);
background: hsl(90,100%,80%);
}
markMellowCoralRed .markMellowCoralRed{
background: #ff6666;
background: rgb(255,102,102);
background: hsl(0,100%,70%);
}
markCherryBlossomPink .markCherryBlossomPink{
background: #ff9999;
background: rgb(255,153,153);
background: hsl(0,100%,80%);
}
markPastelDustyGrey .markPastelDustyGrey{
background: #bcc6c7;
background: rgb(188,198,199);
background: hsl(185.5,8.9%,75.9%);
}

source:

Tagged

Das könnte Sie auch interessieren

    WEBMANAGEMENT.online
    Layout, Konfiguration, Mentoring & Support.

    © WEBMANAGEMENT.online