Plantilla:Degradado/uso

Esta plantilla permite crear un fondo degradado. Los fondos generados por esta plantilla funcionan en Firefox (3.6 o superior), Opera (11.10 o superior), Safari (4.0 o superior) Google Chrome/Chromium (todas las versiones) e Internet Explorer (10.0). En los navegadores no compatibles, la plantilla muestra el primer color del degradado como fondo.

Uso

Utiliza esta plantilla dentro de definiciones CSS. La plantilla usa las propiedades background-color y background-image, así que la mejor práctica es usarla antes de cualquier otra propiedad background.

<div style="{{degradado | #color inicial | #color final | [orientación] | [detención de color [| posición de la detención]]}}">El veloz murciélago hindú...</div>

1. color inicial - Obligatorio. El color inicial del degradado en notación CSS (hexadecimal o RGBA).
2. color final - Obligatorio. El color final del degradado en notación CSS (hexadecimal o RGBA).
3. orientación - Opcional. horizontal (predeterminado) or vertical, o especifica el punto inicial: left (izquierda), top (arriba), right (derecha) o bottom (abajo).
4. detención de color - Opcional. Color intermedio entre los colores inicial y final.
5. posición de la detención - Opcional. La posición de la detención de color entre 0% y 100%. La predeterminada es 50%.

Cada parámetro debe colocarse en su posición respectiva, de lo contrario la plantilla no funcionará.

Ejemplos

• <div style="{{degradado|#ffdddd|#ddddff|horizontal}}">Lorem ipsum...</div> producirá

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="{{degradado|#ffdddd|#ddddff|horizontal|#ddffdd|50%}}">Lorem ipsum...</div> producirá

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="{{degradado|#ffdddd|#ddddff|vertical}}">Lorem ipsum...</div> producirá

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.

Consideraciones

Los ejemplos anteriores usan colores contrastantes para que el efecto se note más claramente. Sin embargo, es mejor utilizar colores similares para crear diferencias sutiles que mejoran la apariencia del degradado y ayudan a disimular el efecto en navegadores no compatibles.