Шаблон:Gradient/doc

Материал из Абсурдопедии
Перейти к навигацииПерейти к поиску


Даёт CSS-стиль для создания градиента (использовать внутри атрибута style, после background-опций).

<div style="{{gradient | #начальный_цвет | #конечный_цвет | [направление] | [какой-то_средний_цвет [| положение_среднего_цвета]]}}">Lorem ipsum...</div>

Первые два параметра — обязательные.

Третий параметр может принимать значения horizontal (по умолчанию) или vertical. Также тут можно указать точку начала градиента: left, top, right or bottom.

Указание четвёртого параметра («какой-то_средний_цвет») позволяет немного изменить градиент. По умолчанию его положение (пятый параметр, указываемый в процентах) — на 50 %.

Примеры[править]

  • <div style="{{gradient|#ffdddd|#ddddff|horizontal}}">Lorem ipsum...</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...</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...</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.