Predefinição:Gradient

Documentação da predefinição[ver] [editar] [histórico] [purgar]

Uso

{{Gradient|#Cor_inicial|#Cor_final|Direção}}

Parâmetros

• Cor inicial (obrigatório): A cor inicial do gradiente.
• Cor final (obrigatório): A cor final do gradiente.
• Direção (opcional): Horizontal por padrão. Se for definido como "horizontal", o gradiente será vertical.

Exemplos

<div style="{{Gradient|#ffdddd|#ddddff}}">Lorem ipsum ... est laborum.</div>

Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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.

Notas

Nos exemplos acima, cores contrastantes são utilizadas para destacar o efeito com mais clareza. No entanto, na prática, é recomendável utilizar cores com pequenas diferenças para aprimorar a aparência, em vez de alterá-la drasticamente. Essa abordagem também minimiza as discrepâncias entre páginas abertas em diferentes navegadores.

Ver também

• Predefinição:Border-radius
• Predefinição:Box-shadow