Gradientoj
Ekde la 10-a de aprilo 2016 ni uzas gradienton per CSS3, kiu troviĝas en stila paĝo kaj aspektas jene:
/* 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 */
La enplekto en HTML-a paĝo aspektas jene en la kaplinio:
<link rel="stylesheet" href="../stiloj/gradiento.css" type="text/css" media="all" />
<style>
#enhavo h1 span:after {
content: "teknikaj";
}
</style>
Se la defaŭlta gradiento ne estu uzata, ĝi estu difinata jene:
<style>
#enhavo h1 span:before {
background: -webkit-linear-gradient(left, #00CC00, #CCCC00, #FFCC00);
background: linear-gradient(to right, #00CC00, #CCCC00, #FFCC00);
}
</style>
La elvoko okazas ĉe la unua titolo de la artikoloj jene uzante <span> en <h1>:
<h1>Pri <span>teknikaj</span> detaloj</h1>
La 11-an de aprilo 2016 RP mallongigis plurvortajn gradientojn al unuvortaj, ĉar linisaltoj povas fuŝi la aspekton.
Li krome iomete korektis la CSS-paĝon por gradientoj al la jena, por eviti aperon de gradiento en la kaplinioj de la Verda Informiloj, ĉar tie <span> plurfoje estas uzata:
/* 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 */
La 14-an de aprilo 2016 RP denove ŝanĝis la kodon por la gradientoj, sed nur tre malmulte al la jeno:
/* 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 */
Samtempe la sekva kodopeco en la <head>-linio de la artikoloj fariĝis superflua:
<style>
#enhavo h1 span:after {
content: "Esperanto";
}
</style>
Sed al la <span>-etikedo devis esti aldonata plia atributo:
<span data-text="Esperanto">Esperanto>/span>
La 20-an de majo 2016 okazis plia aldoneto jene:
/* 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 */
La 9-an de Junio 2016 RP korektis eraron en la kolortransiro, danke al atentigo de Harry Boeck. :-) Ĉe linisalto antaŭ la <span>-etikedo ĝi ja estis difekta.
/* 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 */
La 19-an de Junio 2016 RP ankoraŭ aldonis substrekon de la kolortransiro, se ĝi aperas en ligilo.
/* 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 */
La 7-an de julio 2016 RP aldonis plian trajton jene, jam ŝanĝinte la duan koloron de la kolortransiro por pli facila testado de nova trajto de la paĝaro:
/* 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 */
Se nun musmontrilo estas sur la kolortransiro, ĝiaj koloroj interŝanĝiĝas.
La 25-an de februaro 2018 RP iomete plimalgrandigis la kodon al la jeno:
/* 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 */
La 27-an de februaro 2018 li aldonis plian kodopecon, nome:
/*
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;
}
}