Preskočiť na obsah

Šablóna:Gradient/Dokumentácia

z Wikipédie, slobodnej encyklopédie

Táto šablóna vytvára pozadie s gradientom/prechodom. Momentálne pracuje správne vo Firefoxe (3.6 a vyššia), Opera (11.10 a vyššia), Safari (4.0 a vyššia) a Google Chrome. V iných prehliadačoch sa zobrazuje iba začiatočná farba.

Použitie

[upraviť zdroj]

Používa sa v CSS tagu "style". Šablóna využíva nastavenia background-color a background-image, takže najlepšie je ju dať za akékoľvek background nastavenie.

<div style="{{gradient | #začiatočná farba | #konečná farba | [orientácia] | [prechodová farba [| pozícia prechodu]]}}">Lorem ipsum...</div>

  1. začiatočná farba - Povinné.
  2. konečná farba - Povinné.
  3. orientácia - Nepovinné. horizontal (prednastavené) alebo vertical.
  4. prechodová farba - Nepovinné. Stredná farba medzi začiatočnou a konečnou.
  5. pozícia prechodu - Nepovinné. Pozícia prechodovej farby v rozmedzí 0% a 100%. Prednastavené je 50%.

Každý parameter musí byť umiestnený na svojej príslušnej pozícii.

Príklady

[upraviť zdroj]
  • <div style="{{gradient|#ffdddd|#ddddff|horizontal}}">Lorem ipsum...</div> vyrobí
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="{{gradient|#ffdddd|#ddddff|horizontal|#ddffdd|50%}}">Lorem ipsum...</div> vyrobí
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="{{gradient|#ffdddd|#ddddff|vertical}}">Lorem ipsum...</div> vyrobí
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.

Tiež aj

[upraviť zdroj]