Ŝablono:Laŭlinia kolorŝanĝo/dokumentado
Ĉi tiu ŝablono kreas laŭlinian kolorŝanĝon (angle linear gradient) en la fono. Tio nuntempe funkcias en Fajrovulpo (3.6 kaj pli novaj), Opera (11.10 kaj pli novaj), Safari (5.1 kaj pli novaj), Google Chrome (10 kaj pli novaj) kaj Internet Explorer 10 kaj 11.
Uzado
[redakti fonton]Uzu ene CSS stilan etikedon. La ŝablono uzas la background-image
trajton.
<div style="{{laŭlinia kolorŝanĝo | starta pozicio | #koloro [stop], #koloro [stop][, #koloro [stop], ...] }}">Lorem ipsum...</div>
starta pozicio
estas deviga. Difinu startan punkton:left
,top
,right
aŭbottom
, aŭ kombinon de du el ĉiuj, ekz.top left
. Tio disponigas ok startajn punktojn.koloro
– La unuaj du koloroj estas devigaj. Vi povas difini iun ajn nombron de aldonaj koloroj, disigataj per komoj.stop
estas nedeviga. Vi povas difini stopan pozicion por ĉiu koloro uzante procentojn (ekz. 45%) aŭ pikselojn (ekz. 60px).
Teĥnikaj notoj
[redakti fonton]La ŝablono ne difinas defaŭltan background-color, kaj tial ne disponigas aŭtomatan "refalan meĥanismon" por foliumiloj kiuj ne subtenas kolorŝanĝojn. Por disponigi "refalan meĥanismon", ĉiam difinu fonan koloron antaŭ la ŝablono.
La ŝablono uzas la novan CSS3 trajton por laŭliniaj kolorŝanĝoj: -moz-linear-gradient
, -ms-linear-gradient
, -o-linear-gradient
, -webkit-linear-gradient
kaj linear-gradient
Ĝi ne uzas la hereditan -webkit-gradient
trajton pro ĝia malsama parametra formato. Tio signifas, ke ĉi tiu ŝablono ne funkcias en Safari versioj sub 5.1 kaj Google Chrome versioj sub 10.
Ekzemploj
[redakti fonton]<div style="{{laŭlinia kolorŝanĝo|left|#ffdddd, #ddddff}}">Lorem ipsum...</div>
kreas
<div style="{{laŭlinia kolorŝanĝo|left|#ffdddd, #ddffdd 50%, #ddddff}}">Lorem ipsum...</div>
kreas
<div style="{{laŭlinia kolorŝanĝo|top|#ffdddd, #ddddff}}">Lorem ipsum...</div>
kreas
Konsideroj
[redakti fonton]La supraj ekzemploj uzas kontrastajn kolorojn por montri la efikon pli klare. Estas plej bone uzi fajnajn diferencojn ĉe la koloro por plibeligi la aspekton, anstataŭ radikale ŝanĝi ĝin. Tio ankaŭ reduktas la efektojn inter foliumiloj kiuj subtenas kaj ne subtenas kolorŝanĝojn.
Vidu ankaŭ
[redakti fonton]- {{Bordera radiuso}}
- {{Kesta ombro}}