Ŝablono:Laŭlinia kolorŝanĝo


Dokumentado 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

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>

  1. starta pozicio estas deviga. Difinu startan punkton: left, top, rightbottom, aŭ kombinon de du el ĉiuj, ekz. top left. Tio disponigas ok startajn punktojn.
  2. koloro – La unuaj du koloroj estas devigaj. Vi povas difini iun ajn nombron de aldonaj koloroj, disigataj per komoj.
  3. stop estas nedeviga. Vi povas difini stopan pozicion por ĉiu koloro uzante procentojn (ekz. 45%) aŭ pikselojn (ekz. 60px).

Teĥnikaj notoj

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

  • <div style="{{laŭlinia kolorŝanĝo|left|#ffdddd, #ddddff}}">Lorem ipsum...</div> kreas
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • <div style="{{laŭlinia kolorŝanĝo|left|#ffdddd, #ddffdd 50%, #ddddff}}">Lorem ipsum...</div> kreas
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • <div style="{{laŭlinia kolorŝanĝo|top|#ffdddd, #ddddff}}">Lorem ipsum...</div> kreas
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Konsideroj

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ŭ


Se vi havas demandon pri ĉi tiu ŝablono, tiam vi povas demandi en la ŝablonprojekta diskutejo. La Intervikiaj ligiloj estu metataj al Vikidatumoj. (Vidu Helpopaĝon pri tio.)