Predefinição:Gradient/doc
 | Esta é uma subpágina de documentação para a Predefinição:Gradient. Ela contém informações sobre o seu uso, categorias, bem como todo o conteúdo que não faz parte da predefinição original. |
Uso
[editar código-fonte]{{Gradient|#Cor_inicial|#Cor_final|Direção}}
Parâmetros
[editar código-fonte]- 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
[editar código-fonte]<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
[editar código-fonte]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
[editar código-fonte]