Código de CSS - Ejemplo de asignar un degradado a un elemento con CSS3 y HTML5

Imágen de perfil

Ejemplo de asignar un degradado a un elemento con CSS3 y HTML5gráfica de visualizaciones


CSS

Publicado el 29 de Mayo del 2013 por Xavi
7.982 visualizaciones desde el 29 de Mayo del 2013. Una media de 49 por semana
Código que muestra como asignar un degradado de fondo a una capa y a un botón.

Versión 1

Publicado el 29 de Mayo del 2013gráfica de visualizaciones de la versión: Versión 1
7.983 visualizaciones desde el 29 de Mayo del 2013. Una media de 49 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puede ver el ejemplo de dicho código en: css_degradado.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        div{
            height:200px;
            width:600px;
            padding:10px;
        }
        input[type=button]{
            padding:10px;
        }
        .degradado{
            background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#808080));
            background: -moz-linear-gradient(center top , #cccccc, #808080);
            background: -o-linear-gradient(center top , #cccccc, #808080);
            background: -ms-linear-gradient(center top , #cccccc, #808080);
            background: linear-gradient(center top , #cccccc, #808080);
        }
    </style>
</head>
 
<body>
 
<div class='degradado'>
    El fonde de este div tiene un degradado
    <p>
        <strong>linear-gradient (origen del degradado, color origen, color destino)</strong>
        <p>
            origen del degradado: tiene que indicar donde empieza el degradado (center top, top left, ...)
            <br>color origen: determina el color inicial (#cccccc)
            <br>color destino: determina el color final del degradado (#808080)
        </p>
    </p>
</div>
 
<p>
    <input type="button" class='degradado' value="Ejemplo de botón">
</p>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2386