Zu technischen Details über Farbverläufe

Farbverläufe

Seit dem 10. April 2016 nutzen wir einen Farbverlauf per CSS3, der sich auf einer Stilseite befindet und so aussieht:

Quelltext CSS
/* 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:

Quelltext HTML
<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:

Quelltext HTML
<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ß:

Quelltext HTML
<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:

Quelltext CSS
/* 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:

Quelltext CSS
/* 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:

Quelltext CSS
<style>
#enhavo h1 span:after {
                content: "Esperanto";
                }
</style>

Allerdings mußte das <span>-Tag um ein weiteres Attribut ergänzt werden:

Quelltext HTML
<span data-text="Esperanto">Esperanto>/span>

Am 20. Mai 2016 erfolgte folgende Ergänzung:

Quelltext CSS
/* 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.

Quelltext CSS
/* 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.

Quelltext CSS
/* 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:

Quelltext CSS
/* 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:

Quelltext CSS
/* 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:

Quelltext CSS
/*
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.