Pri teknikaj detaloj de gradientoj

Gradientoj

Ekde la 10-a de aprilo 2016 ni uzas gradienton per CSS3, kiu troviĝas en stila paĝo kaj aspektas jene:

Fontoteksto 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 */

La enplekto en HTML-a paĝo aspektas jene en la kaplinio:

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

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

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

Fontoteksto 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 */

La 14-an de aprilo 2016 RP denove ŝanĝis la kodon por la gradientoj, sed nur tre malmulte al la jeno:

Fontoteksto 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 */

Samtempe la sekva kodopeco en la <head>-linio de la artikoloj fariĝis superflua:

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

Sed al la <span>-etikedo devis esti aldonata plia atributo:

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

La 20-an de majo 2016 okazis plia aldoneto jene:

Fontoteksto 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 */

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.

Fontoteksto 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 */

La 19-an de Junio 2016 RP ankoraŭ aldonis substrekon de la kolortransiro, se ĝi aperas en ligilo.

Fontoteksto 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 */

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:

Fontoteksto 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 */

Se nun musmontrilo estas sur la kolortransiro, ĝiaj koloroj interŝanĝiĝas.