Farbverläufe
Seit dem 10. April 2016 nutzen wir einen Farbverlauf per CSS3, der sich auf einer Stilseite befindet und so aussieht:
/* Farbverläufe per CSS3 */
/* inspiriert von http://codepen.io/giana/pen/RPdLaQ */
#enhavo h1 span {
position:relative;
margin: 0;
opacity: 0.9;
background: white;
color: black;
text-shadow: 1px 1px 0px #E8FFE8, 1px -1px 0px #E8FFE8, -1px -1px 0px #E8FFE8, -1px 1px 0px #E8FFE8;
}
#enhavo h1 span:after,
#enhavo h1 span:before {
display: inline-block;
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
/*padding:0.2em 0;*/
}
/* @supports nötig, weil sowohl IE als auch Edge mix-blend-mode nicht unterstützen */
@supports (mix-blend-mode:screen) {
#enhavo h1 span:before {
background: -webkit-linear-gradient(left, #00CC00, #CC0000);
background: linear-gradient(to right, #00CC00, #CC0000);
content: '';
display: block;
mix-blend-mode: screen;
}
} /* Ende vom @supports */
@supports (mix-blend-mode:multiply) {
#enhavo h1 span:after {
content: "Tests";
background: #E8FFE8;
color: white;
mix-blend-mode: multiply;
}
} /* Ende vom @supports */
Die Einbindung in die HTML-Seite in der Kopfzeile sieht so aus:
<link rel="stylesheet" href="../stiloj/gradiento.css" type="text/css" media="all" />
<style>
#enhavo h1 span:after {
content: "technische";
}
</style>
Wenn der Standardfarbverlauf nich genutzt werden soll, muß der Farbverlauf wie folgt festgelegt werden:
<style>
#enhavo h1 span:before {
background: -webkit-linear-gradient(left, #00CC00, #CCCC00, #FFCC00);
background: linear-gradient(to right, #00CC00, #CCCC00, #FFCC00);
}
</style>
Der Aufruf erfolgt bei der ersten Überschrift des Artikels wobei <span> in <h1> stehen muß:
<h1>Über <span>technische</span> Details</h1>
Am 11. April 2016 hat RP mehrwortige Farbverläufe in einwortige verkürzt, weil Zeilenumbrüche das Aussehen verpfuschen können.
Außerdem korigierte er etwas die CSS-Seite für Farbverläufe wie folgt, um die Farbverläufe in den Kopfzeilen der Grünen Boten zu vermeiden, weil dort <span> mehrfach verwendet wird:
/* Farbverläufe per CSS3 */
/* :not(#leterkapo) ist nötig, um den Farbverlauf in den Grünen Boten zu vermeiden, denn dort steht <span></span> mehrfach in der Kopfzeile */
/* inspiriert von http://codepen.io/giana/pen/RPdLaQ */
#enhavo h1:not(#leterkapo) span {
position:relative;
margin: 0;
opacity: 0.9;
background: white;
color: black;
text-shadow: 1px 1px 0px #E8FFE8, 1px -1px 0px #E8FFE8, -1px -1px 0px #E8FFE8, -1px 1px 0px #E8FFE8;
}
#enhavo h1:not(#leterkapo) span:after,
#enhavo h1:not(#leterkapo) span:before {
display: inline-block;
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
/*padding:0.2em 0;*/
}
/* @supports nötig, weil sowohl IE als auch Edge mix-blend-mode nicht unterstützen */
@supports (mix-blend-mode:screen) {
#enhavo h1:not(#leterkapo) span:before {
background: -webkit-linear-gradient(left, #00CC00, #CC0000);
background: linear-gradient(to right, #00CC00, #CC0000);
content: '';
display: block;
mix-blend-mode: screen;
}
} /* Ende vom @supports */
@supports (mix-blend-mode:multiply) {
#enhavo h1:not(#leterkapo) span:after {
content: "Tests";
background: #E8FFE8;
color: white;
mix-blend-mode: multiply;
}
} /* Ende vom @supports */
Am 14. April 2016 hat RP erneut den Kode für die Farbverläufe geändert, aber nur sehr wenig, und zwar so:
/* Farbverläufe per CSS3 */
/* :not(#leterkapo) ist nötig, um den Farbverlauf in den Grünen Boten zu vermeiden, denn dort steht <span></span> mehrfach in der Kopfzeile */
/* inspiriert von http://codepen.io/giana/pen/RPdLaQ */
/* @supports nötig, weil sowohl IE, Edge und alter Safari mix-blend-mode nicht unterstützen und diese Formate ohne "mix-blend-mode" sinnlos sind */
@supports (mix-blend-mode:screen) {
#enhavo h1:not(#leterkapo) span {
position:relative;
margin: 0;
opacity: 0.9;
background: white;
color: black;
text-shadow: 1px 1px 0px #E8FFE8, 1px -1px 0px #E8FFE8, -1px -1px 0px #E8FFE8, -1px 1px 0px #E8FFE8;
}
#enhavo h1:not(#leterkapo) span:after,
#enhavo h1:not(#leterkapo) span:before {
display: inline-block;
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
/*padding:0.2em 0;*/
}
#enhavo h1:not(#leterkapo) span:before {
background: -webkit-linear-gradient(left, #00CC00, #CC0000);
background: linear-gradient(to right, #00CC00, #CC0000);
content: '';
display: block;
mix-blend-mode: screen;
}
#enhavo h1:not(#leterkapo) span:after {
content: attr(data-text);/*"Tests";*/
background: #E8FFE8;
color: white;
mix-blend-mode: multiply;
}
} /* Ende vom @supports */
Gleichzeitig wurde der folgende Kodeschnipsel in der <head>-Zeile der Artikel überflüssig:
<style>
#enhavo h1 span:after {
content: "Esperanto";
}
</style>
Allerdings mußte das <span>-Tag um ein weiteres Attribut ergänzt werden:
<span data-text="Esperanto">Esperanto>/span>
Am 20. Mai 2016 erfolgte folgende Ergänzung:
/* Farbverlaeufe per CSS3
:not(#leterkapo) ist noetig, um den Farbverlauf in den Gruenen Boten zu vermeiden, denn dort steht span mehrfach in der Kopfzeile
inspiriert von http://codepen.io/giana/pen/RPdLaQ
@supports noetig, weil sowohl IE, Edge und alter Safari mix-blend-mode nicht unterstuetzen und diese Formate ohne "mix-blend-mode" sinnlos sind */
@supports (mix-blend-mode:screen) {
#enhavo h1:not(#leterkapo):not(#invitilkapo) span {
position:relative;
margin: 0;
opacity: 0.9;
background: white;
color: black;
text-shadow: 1px 1px 0px #E8FFE8, 1px -1px 0px #E8FFE8, -1px -1px 0px #E8FFE8, -1px 1px 0px #E8FFE8;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:after,
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:before {
display: inline-block;
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
/*padding:0.2em 0;*/
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:before {
background: -webkit-linear-gradient(left, #00CC00, #CC0000);
background: linear-gradient(to right, #00CC00, #CC0000);
content: '';
display: block;
mix-blend-mode: screen;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:after {
content: attr(data-text);/*"Tests";*/
background: #E8FFE8;
color: white;
mix-blend-mode: multiply;
}
} /* Ende vom @supports */
Am 9. Juni 2016 hat RP einen Fehler im Farbverlauf korrigiert, dank eines Hinweises von Harry Boeck. :-) Bei einem Zeilenumbruch vor dem <span>-Tag war er nämlich kaputt.
/* Farbverlaeufe per CSS3
:not(#leterkapo) ist noetig, um den Farbverlauf in den Gruenen Boten zu vermeiden, denn dort steht span mehrfach in der Kopfzeile
inspiriert von http://codepen.io/giana/pen/RPdLaQ
@supports noetig, weil sowohl IE, Edge und alter Safari mix-blend-mode nicht unterstuetzen und diese Formate ohne "mix-blend-mode" sinnlos sind */
@supports (mix-blend-mode:screen) {
#enhavo h1:not(#leterkapo):not(#invitilkapo) span {
position:relative;
margin: 0;
opacity: 0.9;
background: white;
color: black;
text-shadow: 1px 1px 0px #E8FFE8, 1px -1px 0px #E8FFE8, -1px -1px 0px #E8FFE8, -1px 1px 0px #E8FFE8;
display:inline-block;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:after,
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:before {
display: inline-block;
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
/*padding:0.2em 0;*/
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:before {
background: -webkit-linear-gradient(left, #00CC00, #CC0000);
background: linear-gradient(to right, #00CC00, #CC0000);
content: '';
display: block;
mix-blend-mode: screen;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:after {
content: attr(data-text);/*"Tests";*/
background: #E8FFE8;
color: white;
mix-blend-mode: multiply;
}
} /* Ende vom @supports */
Am 19. Juni 2016 hat RP noch die Unterstreichung des Farbverlaufs ergänzt, falls dieser in einem Link erscheint.
/* Farbverlaeufe per CSS3
:not(#leterkapo) ist noetig, um den Farbverlauf in den Gruenen Boten zu vermeiden, denn dort steht span mehrfach in der Kopfzeile
inspiriert von http://codepen.io/giana/pen/RPdLaQ
@supports noetig, weil sowohl IE, Edge und alter Safari mix-blend-mode nicht unterstuetzen und diese Formate ohne "mix-blend-mode" sinnlos sind */
@supports (mix-blend-mode:screen) {
#enhavo h1:not(#leterkapo):not(#invitilkapo) span {
position:relative;
margin: 0;
opacity: 0.9;
background: white;
color: black;
text-shadow: 1px 1px 0px #E8FFE8, 1px -1px 0px #E8FFE8, -1px -1px 0px #E8FFE8, -1px 1px 0px #E8FFE8;
display:inline-block;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) a span {
text-decoration:underline;
-webkit-text-decoration-style: wavy;
-moz-text-decoration-style: wavy;
text-decoration-style: wavy;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:after,
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:before {
display: inline-block;
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
/*padding:0.2em 0;*/
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:before {
background: -webkit-linear-gradient(left, #00CC00, #CC0000);
background: linear-gradient(to right, #00CC00, #CC0000);
content: '';
display: block;
mix-blend-mode: screen;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:after {
content: attr(data-text);/*"Tests";*/
background: #E8FFE8;
color: white;
mix-blend-mode: multiply;
}
} /* Ende vom @supports */
Am 7. Juli 2016 hat RP eine weitere Eigenschaft wie folgt ergänzt, nachdem er schon die zweite Farbe des Farbverlaufs für leichtere Tests einer neuen Seitenfunktionalität geändert hatte:
/* Farbverlaeufe per CSS3
:not(#leterkapo) ist noetig, um den Farbverlauf in den Gruenen Boten zu vermeiden, denn dort steht span mehrfach in der Kopfzeile
inspiriert von http://codepen.io/giana/pen/RPdLaQ
@supports noetig, weil sowohl IE, Edge und alter Safari mix-blend-mode nicht unterstuetzen und diese Formate ohne "mix-blend-mode" sinnlos sind */
@supports (mix-blend-mode:screen) {
#enhavo h1:not(#leterkapo):not(#invitilkapo) span {
position:relative;
margin: 0;
opacity: 0.9;
background: white;
color: black;
text-shadow: 1px 1px 0px #E8FFE8, 1px -1px 0px #E8FFE8, -1px -1px 0px #E8FFE8, -1px 1px 0px #E8FFE8;
display:inline-block;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) a span {
text-decoration:underline;
-webkit-text-decoration-style: wavy;
-moz-text-decoration-style: wavy;
text-decoration-style: wavy;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:after,
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:before {
display: inline-block;
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
/*padding:0.2em 0;*/
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:before {
background: -webkit-linear-gradient(left, #00CC00, #0000CC);
background: linear-gradient(to right, #00CC00, #0000CC);
content: '';
display: block;
mix-blend-mode: screen;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:hover:before {
background: -webkit-linear-gradient(left, #0000CC, #00CC00);
background: linear-gradient(to right, #0000CC, #00CC00);
content: '';
display: block;
mix-blend-mode: screen;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:after {
content: attr(data-text);/*"Tests";*/
background: #E8FFE8;
color: white;
mix-blend-mode: multiply;
}
} /* Ende vom @supports */
Wenn jetzt der Mauszeiger auf dem Farbverlauf steht, werden seine Farben vertauscht.
Am 25: Februar 2018 hat RP ein bißchen den Code wie folgt verkleinert:
/* Farbverlaeufe per CSS3 // PHP-Version
:not(#leterkapo) ist nötig, um den Farbverlauf in den Grünen Boten zu vermeiden, denn dort steht span mehrfach in der Kopfzeile
inspiriert von http://codepen.io/giana/pen/RPdLaQ
geändert am 20180225
@supports nötig, weil sowohl IE, Edge als auch alter Safari mix-blend-mode nicht unterstützen und diese Formate ohne "mix-blend-mode" sinnlos sind */
@supports (mix-blend-mode:screen) {
#enhavo h1:not(#leterkapo):not(#invitilkapo) span {
position:relative;
margin: 0;
opacity: 0.9;
background: white;
color: black;
display:inline-block;
font-size:100%; /* sonst Murx beim Tablett, aber nur im dortigen Chrome */
mix-blend-mode: multiply;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) a span {
text-decoration:underline;
-webkit-text-decoration-style: wavy;
-moz-text-decoration-style: wavy;
text-decoration-style: wavy;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) a:hover span {
mix-blend-mode:normal;
}
/* Wechsel des Farbverlaufs klappt nicht, aber die Vordergrundfarbe ist nun eine andere. */
#enhavo h1:not(#leterkapo):not(#invitilkapo) a:visited span {
color:grey;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:before {
content:"";
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
/*padding:0.2em 0;*/
background: -webkit-linear-gradient(left, #00CC00, #0000CC);
background: linear-gradient(to right, #00CC00, #0000CC);
display: block;
mix-blend-mode: screen;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) a:hover span:before,
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:hover:before {
background: -webkit-linear-gradient(left, #0000CC, #00CC00);
background: linear-gradient(to right, #0000CC, #00CC00);
content: '';
display: block;
}
} /* Ende vom @supports */
Am 27. Februar 2018 hat er ein weiteren Codeschnipsel ergänzt, und zwar:
/*
inspiriert von https://www.mediaevent.de/css-text-mit-verlauf-fuellen/
@supports auf https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
*/
@supports (not (mix-blend-mode:screen)) and (-webkit-background-clip:text) and (-webkit-text-fill-color:blue) {
#enhavo h1:not(#leterkapo):not(#invitilkapo) span {
background-image: -webkit-linear-gradient(left, #00CC00, #0000CC);
background-image: linear-gradient(to right, #00CC00, #0000CC);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#enhavo h1:not(#leterkapo):not(#invitilkapo) a:hover span,
#enhavo h1:not(#leterkapo):not(#invitilkapo) span:hover {
background-image: -webkit-linear-gradient(left, #0000CC, #00CC00);
background-image: linear-gradient(to right, #0000CC, #00CC00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
Variante
RP hat zwei Versionen getestet, bei der statt eines Farbverlaufs eine Grafik verwendet wird. Außerdem ist auch noch eine Hintergrundgrafik um das Ganze herum zu sehen.
Interessenten können eine zip-Datei mit "mix-blend-mode" hier herunterladen. Allerdings gibt es auch eine Version mit SVG.