Шаблон:Gradient — различия между версиями
Материал из Клавопедии
| [досмотренная версия] | [досмотренная версия] |
(взято из http://wikifocus.org/wiki/Шаблон:Градиент) |
|||
| Строка 1: | Строка 1: | ||
| − | <includeonly>background-color: {{{1}}}; background-image: -moz-linear-gradient({{#ifeq:{{{3}}}|vertical|top|left}}, {{{1}}}{{#if:{{{4|}}}|, {{{4}}} {{{5|50%}}}}}, {{{2}}}); background-image: -o-linear-gradient({{#ifeq:{{{3}}}|vertical|top|left}}, {{{1}}}{{#if:{{{4|}}}|, {{{4}}} {{{5|50%}}}}}, {{{2}}}); background-image: -webkit-gradient(linear, left top, {{#ifeq:{{{3}}}|vertical|left bottom|right top}}, from({{{1}}}), to({{{2}}}){{#if:{{{4|}}}|, color-stop({{{5|50%}}}, {{{4}}})}});</includeonly> | + | <includeonly>background-color: {{{1}}}; background-image: -moz-linear-gradient({{#ifeq:{{{3}}}|vertical|top|left}}, {{{1}}}{{#if:{{{4|}}}|, {{{4}}} {{{5|50%}}}}}, {{{2}}}); background-image: -o-linear-gradient({{#ifeq:{{{3}}}|vertical|top|left}}, {{{1}}}{{#if:{{{4|}}}|, {{{4}}} {{{5|50%}}}}}, {{{2}}}); background-image: -webkit-gradient(linear, left top, {{#ifeq:{{{3}}}|vertical|left bottom|right top}}, from({{{1}}}), to({{{2}}}){{#if:{{{4|}}}|, color-stop({{{5|50%}}}, {{{4}}})}});</includeonly><noinclude> |
| − | <noinclude>{{ | + | |
| + | {{doc}} | ||
| + | </noinclude> | ||
Версия 18:48, 20 января 2012
Документация
Этот шаблон создает градиент фона. В настоящее время работает в Firefox (3,6 и выше), Opera(11.10 и выше), Safari (4,0 и выше) и Google Chrome.
Internet Explorer его не поддерживает.
Использование
{{gradient|#начальный цвет|#конечный цвет|направление}}
- Начальный цвет (обязательно) - Начальный цвет градиента.
- Конечный цвет (обязательно) - Конечный цвет градиента.
- Направление (необязательно) - Горизонтальная(по умолчанию) (horizontal) или вертикальная (vertical).
Примеры
<div style="{{gradient|#ffdddd|#ddddff|horizontal}}">Lorem ipsum...*...est laborum.</div>
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...*...est laborum.</div>
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...*...est laborum.</div>
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.
Примечание: В приведенных выше примерах используются контрастные цвета, чтобы показать эффект более четко. Но на деле лучше использовать цвета с небольшими различиями, чтобы улучшить внешний вид, а не радикально изменить его. Это также сводит к минимуму различия между страницами, открытыми в разных браузерах.
Во избежание поломок страниц, использующих данный шаблон, желательно экспериментировать в своём личном пространстве.
