Chuso! » CSS

Sombras y degradados en CSS3

chusete — Thu, 08 Mar 2012 20:51:04 +0000

Esta vez no voy a hablar de nada nuevo. Muchos diseñadores y maquetadores web están ya incluyendo estos efectos a sus trabajos. Sin embargo, para mí son nuevos Los he utilizado con anterioridad pero muy brevemente, y sin tener muy claro qué hacían y por qué exactamente. Si quieres ir directo a los ejemplos, los tienes aquí. ¡Al lío!

Sombras

En CSS todo son cajas; a cada elemento del árbol DOM (salvo a los inline, pero esto no viene a cuento) se le asigna una caja, y mediante CSS definimos su ubicación. Algunos de estos elementos se encuentran sobre otros: imagina un párrafo

sobre el elemento . Con CSS3 podríamos hacer que el

arroje una sombre sobre . Vamos a ver la sintaxis de esta propiedad en su notación EBNF:

none |  [ ,  ]*

Donde:

 = inset? && [ {2,4} && ? ]

Traducido viene a dar estas dos opciones:

none – En cuyo caso, no se muestra ninguna sombra.
[ , ]* – Significa que podemos tener una o más sombras separadas por comas. Cada sombra contiene:

inset – Es un valor opcional. Si se omite, la sombra se arrojará hacia fuera del elemento. En caso de que se especifique ‘inset’, la sombra será arrojada dentro del elemento.
{2,4} – Introduciremos 2, 3 o 4 longitudes:

La primera longitud (obligatoria) establece el desplazamiento horizontal de la sombra. Los valores positivos hacen que la sombra se arroje hacia la derecha, y los negativos hacia la izquierda.
La segunda longitud (obligatoria) establece el desplazamiento vertical de la sombra. Los valores positivos hacen que la sombra se arroje hacia abajo, y los negativos hacia arriba.
La tercera longitud (opcional) especifica el radio blur. Si se introduce cero, la sombra será “afilada”, en caso contrario, contendrá más blur a mayor radio.
La tercera longitud (opcional) establece la difusión de la sombra. Los valores positivos hacen que se expanda, y los negativos que se contraiga.

color – Es el color de la sombra. Este valor es opcional. Si no se ha introducido, se usará el valor de la propiedad ‘color’. Nota: No lo soportan todos los navegadores.

Vamos a ver algunos ejemplos de valores válidos según la notación estándar:

box-shadow: none;
box-shadow: 2px 2px;
box-shadow: inset 2px -2px;
box-shadow: 2px 2px black;
box-shadow: 1em -1em 0.5em #CCCCCC;
box-shadow: 1em -1em 0.5em 1em rgba(118, 118, 118, 0.5);
box-shadow: inset 1em 0 0.5em -1em rgb(0,0,0);
box-shadow: 2px 2px #000, inset -3px 3px gray;

Y ahora, vamos a revisar ejemplos que puedes probar hoy en los navegadores:

Ejemplo 1

box-shadow: 5px 5px #000;

Arroja una sombra negra desplazada 5px a la derecha y 5px hacia abajo. No hemos especificado un blur, por lo que la sombra está afilada

Ejemplo 2

box-shadow: 5px 5px 3px black;

Arroja una sombra negra desplazada 3px a la derecha y 3px hacia abajo, con un desenfoque blur de 3px de radio.

Ejemplo 3

box-shadow: inset 2px -2px 5px #000;

Arroja una sombra interna negra desplazada 2px a la derecha y 2px hacia arriba, con un desenfoque blur de 5px de radio.

Ejemplo 4

box-shadow: 0 0 0.5em 1em rgba(118, 0, 200, 0.5);

Arroja una sombra lila, sin desplazamiento, con 0.5em de radio de blur, y expandida 1em.

Ejemplo 5

box-shadow: 2em 0 0.5em -1em rgb(0,0,0);

Arroja una sombra negra desplazada 2em a la derecha, con un desenfoque blur de 0.5em de radio, y contraída 1em.

Ejemplo 6

box-shadow: 2px 2px 5px #000, -3px -3px 5px red;

Arroja una sombra negra desplazada 2px a la derecha y 2px hacia abajo con un desenfoque blur de 5px. Además, arroja otra sombra roja desplazada 3px a la izquierda, 3px hacia arriba, y un desenfoque blur de 5px.

Ejemplo 7

box-shadow: 5px 5px 5px gold;
border-radius: 15px;

Arroja una sombra dorada desplazada 5px a la derecha, 5px hacia abajo y con 5px de radio blur. Además, vemos que la sombra se comporta sigue correctamente el recorrido del borde redondeado.

Ejemplo 8

box-shadow: 0 8px 5px -5px red;
border-radius: 15px;

Arroja una sombra roja desplazada 8px hacia abajo, con 5px de radio blur, y contraída 5px.

Degradados

Ya hemos visto las sombras, y como has podido comprobar son muy sencillas. Me gustaría decirte que los degradados son igual o más fáciles, pero lamentablemente no es así: se trata de una herramienta muy potente y versátil, por lo que nos ofrece muchas opciones.

Tenemos dos tipos de degradados: lineares y radiales. Los lineales, como su nombre indican, siguen una trayectoria lineal. Por contra, los radiales siguen una trayectoria circular o elíptica.

Degradados lineales

Su uso todavía está sujeto a modificaciones, y cada navegador lo implementa precedido de su propio prefijo y sin cumplir necesariamente la notación estándar:

-moz-linear-gradient() para Firefox.
-webkit-linear-gradient() para Safari y Google Chrome.
-o-linear-gradient() para Opera
-ms-linear-gradient() para Internet Explorer 10.

Esta es su notación estándar:

 = linear-gradient(
    [ [  | to  ] ,]?
    [, ]+
)

 = [left | right] || [top | bottom]

Que significa esto:

Contiene un ángulo opcional especificado en ‘deg’. Por ejemplo, 90deg. Nota: No está todavía soportado por todos los navegadores.
Un punto de origen opcional precedido por “to”, que podría ser left, right, top, bottom, left top, left bottom, right top o right-bottom. Por defecto la trayectoria se traza hacia el lado o vértice opuesto al especificado. Nota: los navegadores que implementan esta propiedad solo funcionan si no se precede por “to”.
Dos o más colores, donde cada uno de ellos indica:

El código del color, por ejemplo #FF00FF.
La posición del color. Por ejemplo, 0%, 30px, 100%. Si no se indica posición, se distribuyen a lo largo del recorrido uniformemente.

Al igual que con las sombras, vamos a ver algunos valores válidos de acuerdo a la notación estándar:

background-image: linear-gradient(90deg, yellow, blue);
background-image: linear-gradient(to bottom, red, white);
background-image: linear-gradient(to bottom left, red, black);
background-image: linear-gradient(0deg, #FF0000 10%, #000);
background-image: linear-gradient(to top, red 0%, rgb(129, 5, 205) 50%, #CCC 100%);

Y ahora, algunos ejemplos reales:

Ejemplo 1

background-image: -webkit-linear-gradient(top, black, white);
background-image: -moz-linear-gradient(top, black, white);
background-image: -ms-linear-gradient(top, black, white);
background-image: -o-linear-gradient(top, black, white);

Degradado, de arriba a abajo, comenzando en negro y finalizando en blanco.

Ejemplo 2

background-image: -webkit-linear-gradient(top left, black, white);
background-image: -moz-linear-gradient(top left, black, white);
background-image: -ms-linear-gradient(top left, black, white);
background-image: -o-linear-gradient(top left, black, white);

Desgradado, de la esquina superior izquierda a la esquina inferior derecha, comenzando en negro y finalizando en blanco.

Ejemplo 3

background-image: -webkit-linear-gradient(bottom, red, white, black);
background-image: -moz-linear-gradient(bottom, red, white, black);
background-image: -ms-linear-gradient(bottom, red, white, black);
background-image: -o-linear-gradient(bottom, red, white, black);

Degradado de abajo hacia arriba, comenzando en rojo, después en blanco, y finalmente en negro.

Ejemplo 4

background-image: -webkit-linear-gradient(top, red 70%, black);
background-image: -moz-linear-gradient(top, red 70%, black);
background-image: -ms-linear-gradient(top, red 70%, black);
background-image: -o-linear-gradient(top, red 70%, black);

Degradado de arriba hacia abajo, de rojo hasta el 70% del recorrido y, desde ahí, hacia negro.

Ejemplo 5

background-image: -webkit-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -moz-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -ms-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -o-linear-gradient(top, red 50%, black 80%, yellow 100%);

Degradado de arriba hacia abajo, de rojo hasta el 50%, negro en el 80% del recorrido, y finalmente a amarillo.

Ejemplo 6

background-image: -webkit-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -moz-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -ms-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -o-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-size: 100% 50px;

Igual que el ejemplo 5, pero estableciendo un tamaño de imagen de fondo de 50px de alto, con lo que el degradado se repite.

Ejemplo 7

background-image: -webkit-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -moz-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -ms-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -o-linear-gradient(top, red 50%, black 80%, yellow 100%);
border-radius: 15px;

Igual que el ejemplo 5, pero con bordes redondeados.

Degradados radiales

Al igual que con los degradados lineales, su uso todavía está sujeto a modificaciones, y cada navegador lo implementa precedido de su propio prefijo y sin cumplir necesariamente la notación estándar:

-moz-radial-gradient() para Firefox.
-webkit-radial-gradient() para Safari y Google Chrome.
-o-radial-gradient() para Opera
-ms-radial-gradient() para Internet Explorer 10.

Esta es su notación estándar:

 = radial-gradient(
    [ [  ||  ] [ at  ]? , |
        at ,
    ]?
     [ ,  ]+
)

Que significa esto:

shape – Opcional. Forma del degradado, que puede ser o bien ‘circle’ o bien ‘ellipse’.
size – Opcional. Tamaño. Puede ser:

Un único valor absoluto, indicando un círculo. Nota: No soportado por los principales navegadores.
Dos valores absolutos o relativos, indicando una elipse. Nota: No soportado por los principales navegadores.
closest-side – El degradado se expande hasta que el último color alcanza el lado más cercano del punto de origen. Nota: No soportado por los principales navegadores.
farthest-side – El degradado se expande hasta que el último color alcanza el lado más lejano del punto de origen.
closest-corner – El degradado se expande hasta que el último color alcanza la esquina más cerca al punto de origen. Nota: No soportado por los principales navegadores.
farthest-corner – El degradado se expande hasta que el último color alcanza la esquina más lejana al punto de origen.

position – Opcional. Posición de origen, precedida por “at”. Por omisión, ‘center’. Se especifica la posición horizontal (left, center, right, valor absoluto, o relativo) y vertical (top, center, bottom, valor absoluto, o relativo). Nota: Los navegadores que implementan esta propiedad solamente funcionan si no se precede por “at”.
Dos o más colores, separados por comas, y opcionalmente acompañados de una posición (por ejemplo, 50% o 3em). Si no se introduce una posición, se distribuyen uniformemente.

Algunos ejemplos válidos según la notación estándar:

background-image: radial-gradient(circle, black, white);
background-image: radial-gradient(circle, black 50%, white 100%);
background-image: radial-gradient(ellipse, black, white);
background-image: radial-gradient(circle at top left, black, white);
background-image: radial-gradient(circle at 50px 100px, black, white);
background-image: radial-gradient(50px at bottom left, black, white);
background-image: radial-gradient(closest-side at top, black, white);
background-image: radial-gradient(farthest-corner, black, white);
background-image: radial-gradient(circle, black, white, red);

Sin embargo estos ejemplos no funcionan en los navegadores, pues como hemos visto su notación es ligeramente diferente. Vamos a ver algunos ejemplos que podemos usar hoy:

Ejemplo 1

background-image: -webkit-radial-gradient(red, black);
background-image: -moz-radial-gradient(red, black);
background-image: -ms-radial-gradient(red, black);
background-image: -o-radial-gradient(red, black);

Degradado radial por defecto, de rojo a negro. Como vemos, comienza ubicado en el centro, se distribuye de forma circular, y se expande hasta que el negro alcanza las esquinas.

Ejemplo 2

background-image: -webkit-radial-gradient(top center, red, black);
background-image: -moz-radial-gradient(top center, red, black);
background-image: -ms-radial-gradient(top center, red, black);
background-image: -o-radial-gradient(top center, red, black);

Degradado radial comenzando en el centro superior (top center), de rojo a negro. De nuevo, se expande hasta que el color final (negro) alcanza alguna de las esquinas, adquiriendo por tanto una distribución elíptica.

Ejemplo 3

background-image: -webkit-radial-gradient(top center, circle, red, black);
background-image: -moz-radial-gradient(top center, circle, red, black);
background-image: -ms-radial-gradient(top center, circle, red, black);
background-image: -o-radial-gradient(top center, circle, red, black);

Degradado radial, de rojo a negro, comenzando en el centro superior (top center). En este caso hemos especificado que su distribución sea circular.

Ejemplo 4

background-image: -webkit-radial-gradient(top left, red, black);
background-image: -moz-radial-gradient(top left, red, black);
background-image: -ms-radial-gradient(top left, red, black);
background-image: -o-radial-gradient(top left, red, black);

Degradado de rojo a negro comenzando en la esquina superior izquierda. Desde esa posición todos los extremos quedan a la misma distancia, por lo que la distribución se hace de forma circular.

Ejemplo 5

background-image: -webkit-radial-gradient(top left, red, black, white);
background-image: -moz-radial-gradient(top left, red, black, white);
background-image: -ms-radial-gradient(top left, red, black, white);
background-image: -o-radial-gradient(top left, red, black, white);

Degradado radial, de rojo a blanco, pasando por el negro, desde la esquina superior izquierda.

Ejemplo 6

background-image: -webkit-radial-gradient(top left, red 10%, black 30%, white);
background-image: -moz-radial-gradient(top left, red 10%, black 30%, white);
background-image: -ms-radial-gradient(top left, red 10%, black 30%, white);
background-image: -o-radial-gradient(top left, red 10%, black 30%, white);

Degradado radial, de rojo a blanco, pasando por el negro, desde la esquina superior izquierda. El color rojo se prolonga hasta el 10% del recorrido, el negro se alcanza al 30% del recorrido, y el blanco al final (100%, por ser el último). El degradado se expande hasta la esquina más lejana (farthest-corner).

Ejemplo 7

background-image: -webkit-radial-gradient(top left, farthest-side, red 10%, black 30%, white);
background-image: -moz-radial-gradient(top left, farthest-side, red 10%, black 30%, white);
background-image: -ms-radial-gradient(top left, farthest-side, red 10%, black 30%, white);
background-image: -o-radial-gradient(top left, farthest-side, red 10%, black 30%, white);

Ejemplo igual que el anterior, pero en lugar de expandirse hasta la esquina más lejana (farthest-corner) se expande hasta el lateral más lejano (farthest-side).

Ejemplo 8

background-image: -webkit-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -moz-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -ms-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -o-radial-gradient(top center, ellipse farthest-side, black, white);

Degradado radial, de blanco a negro, comenzando en el centro superior (top center), con distribución elíptica expandiéndose hasta el lateral más lejano (farthest-side).

Ejemplo 9

background-image: -webkit-radial-gradient(top center, ellipse farthest-corner, black, white);
background-image: -moz-radial-gradient(top center, ellipse farthest-corner, black, white);
background-image: -ms-radial-gradient(top center, ellipse farthest-corner, black, white);
background-image: -o-radial-gradient(top center, ellipse farthest-corner, black, white);

Degradado radial, de blanco a negro, comenzando en el centro superior (top center), con distribución elíptica expandiéndose hasta la esquina más lejana (farthest-corner).

Ejemplo 10

background-image: -webkit-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -moz-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -ms-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -o-radial-gradient(top center, ellipse farthest-side, black, white);

Igual que el ejemplo anterior, pero en un contenedor de 15px de altura. Vemos que se produce un efecto de “destello sombra” que no podíamos obtener mediante box-shadow.

Ejemplo 11

background-image:
    -webkit-radial-gradient(top center, ellipse farthest-side, rgba(255,255,255,1), rgba(255, 255, 255, 0) 50%),
    -webkit-radial-gradient(top center, ellipse farthest-side, gray, white);
background-image:
    -moz-radial-gradient(top center, ellipse farthest-side, rgba(255,255,255,1), rgba(255, 255, 255, 0) 50%),
    -moz-radial-gradient(top center, ellipse farthest-side, gray, white);
background-image:
    -ms-radial-gradient(top center, ellipse farthest-side, rgba(255,255,255,1), rgba(255, 255, 255, 0) 50%),
    -ms-radial-gradient(top center, ellipse farthest-side, gray, white);
background-image:
    -o-radial-gradient(top center, ellipse farthest-side, rgba(255,255,255,1), rgba(255, 255, 255, 0) 50%),
    -o-radial-gradient(top center, ellipse farthest-side, gray, white);
background-size: 100% 40%, 100% 100%;
background-repeat: no-repeat;

En este caso tenemos un degradado radial elíptico, de blanco (rgba(255,255,255,1)) a blanco transparente (rgba(255,255,255,0)) , comenzando en el centro superior, y alcanzando el lateral más lejano. Además, hemos añadido un segundo degradado igual, pero de gris a blanco. A cada fondo le asignamos un tamaño: El primero ocupará todo el ancho y el 40% de la altura. El segundo, todo el ancho y todo el alto disponible. Para evitar que el primer degradado se repita, añadimos “background-repeat: no-repeat”. Con este ejemplo, logramos un efecto sombreado muy llamativo. Hemos añadido sobre él un contenedor para que se aprecie el efecto.

¡Y esto es todo por hoy! Espero que te haya sido de utilidad. Por mi parte, me ha venido de maravilla volcar todo esto en el blog como guía para futuras consultas.

Puedes ver todos los ejemplos en vivo aquí.

10 errores comunes de programadores web novatos

chusete — Thu, 22 Jul 2010 21:53:33 +0000

Hace poco comentaba que en SitePoint habían publicado una lista de los 10 errores comunes de diseñadores web novatos. Pues recientemente publicaron un nuevo artículo, pero esta vez sobre los programadores web. Aquí el resumen:

Ignorar los estándares web. Destacan el uso incorrecto del DOCTYPE, uso de etiquetas antiguas de HTML, o no validar el código.
Delegar en software WYSIWYG. Muy acertadamente indican que, con este tipo de software uno se centra en la visualización, y no en la estructura.
Descuidar aspectos semánticos. El ejemplo que ponen es impagable: El programador novato, si quiere escribir un titular, lo pondrá encerrado en la etiqueta
. Pero posteriormente es posible que “involucione”, y lo diseñe con divs anidados y estilos CSS.
Nombres de clases de estilos. ¿Qué tal una clase como “columna-izquierda-50px”? ¿Y si en un futuro el ancho cambia?
Prueba de navegadores tardía. Invitan al programador novato a revisar su página en varios navegadores desde el primer momento, y no dejarlo para el final. Personalmente, en este punto no estoy de acuerdo; Siempre he preferido desarrollar para una plataforma, y al final, corregir errores de las demás.
Ignorar la portabilidad. Destacan enlaces a rutas absolutas, conexiones a bases de datos sin centralizar, o realizar suposiciones sobre el entorno de ejecución.
Descuidar el ancho de banda. Poco más que añadir… En local un fichero de unos megas es irrelevante, no así en Internet.
Pésima accesibilidad. No consiste sólo en seguir unas reglas mecánicas de código, sino en tener en cuenta aspectos funcionales como poder consultar la web sin javascript, sin flash, en un móvil, o sin ratón.
Despreciar al SEO. Me encanta la definición que hacen del SEO: Es una mezcla de psicoanálisis, complejidad técnica, y misteriosas artes oscuras. En cualquier caso, indican que el desarrollador novato, dejará el SEO para el departamento de marketing una vez lanzada la página. Para entonces, ya será demasiado tarde.
Actualizaciones erróneas. Destacan la práctica de muchos programadores web de tener durante horas una página web en mantenimiento, cuando suele ser una tarea que no debería llevar más de unos minutos. En este punto tampoco estoy de acuerdo. Muchas actualizaciones tan sólo consisten en añadir documentos html, imágenes, y actualizar hojas de estilo y javascript. Sin embargo, hay aplicaciones web que requieren mucho más que eso a la hora de actualizar, por ejemplo cuando cambiamos la estructura de una base de datos, y se deben reestablecer todos los índices.
Como bonus, dejan una lista de otros 20 errores.

En general, este artículo me ha parecido bastante más pobre que el anterior. Sobre todo, por lo mucho que se centra en la capa de presentación HTML, que dista mucho de ser coto exclusivo de los programadores web. En ningún punto se ha mencionado ni una sola práctica o error relacionada con la programación (Salvo el punto 6, donde sugieren no incluir hard coded la conexión a base de datos).

Facturas en CSS

chusete — Tue, 08 Dec 2009 15:51:58 +0000

Vía css-tricks veo un sencillo método para crear facturas sólo con CSS. ¿Y por qué usar este método en lugar de un software específico? Bueno, gracias a esto sólo necesitas el navegador para poder crear tus facturas. Y qué demonios, es muy ilustrativo el ejemplo. ¡Qué de cosas se pueden hacer con textarea! Además, es fácil de imprimir, y pasarlo a PDF es algo trivial.

Ver demo

Botones súper increíbles con CSS3 y RGBA

chusete — Tue, 08 Dec 2009 04:08:16 +0000

CSS3 ya está aquí, y ha llegado para quedarse. Gracias a él, podemos crear increíbles efectos en navegadores modernos (Teniendo en cuenta un enfoque de graceful degradation). En éste artículo voy a mostrar cómo, desde ZURB, han creado unos botones CSS que realmente son súper increíbles. Accede a la página del artículo para ver demostraciones en vivo.

Botón en ancla »

Botón en ancla 2 »

La magia está en el CSS:

.button{
   background:#222 url(/wp-content/uploads/2009/12/alert-overlay.png) repeat-x 0 0;
   display:inline-block;
   padding:5px 15px 6px;
   color:#fff !important;
   font-size:13px;
   font-weight:bold;
   line-height:1;
   text-decoration:none;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   -moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);
   -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);
   text-shadow:0 -1px 1px rgba(0,0,0,0.25);
   border-bottom:1px solid rgba(0,0,0,0.25);
   position:relative;
   cursor:pointer;
   overflow:visible;
   width:auto
}

button::-moz-focus-inner{
   border:0;
   padding:0
}

.button:hover{
   background-color: #111111;
   color: white
}

.button:active{
   top:1px
}

Una sombra a la caja, otra al texto, un borde redondeado, y de fondo una imagen png que realiza el degradado (Se puede realizar también con CSS en Webkit). Una pasada hacer todo esto sólo con CSS, ¿no?

¡Pero espera! ¡Ahí no queda la cosa! ¿Qué ocurriría si cambiásemos el color de fondo sobre el que está el botón? La sombra se vería “rara”, al igual que el color del borde.

Y lo mismo ocurriría con la sombra del texto si cambiásemos el color de relleno del propio botón. ¿Cómo se soluciona? Ahora es cuando llega al rescate la A de RGBA Por ejemplo, en la sombra de la caja, lo hemos definido como:

rgba(0,0,0,0.25)

Es decir, color negro al 25% de transparencia. De ese modo, la sombra siempre “lucirá” del mismo modo usemos el color que usemos.

Espero que os haya gustado tanto como a mí.

Vía Smashin Magazine,

Chuso! » CSS

Sombras y degradados en CSS3

Sombras

Ejemplo 1

Ejemplo 2

Ejemplo 3

Ejemplo 4

Ejemplo 5

Ejemplo 6

Ejemplo 7

Ejemplo 8

Degradados

Degradados lineales

Ejemplo 1

Ejemplo 2

Ejemplo 3

Ejemplo 4

Ejemplo 5

Ejemplo 6

Ejemplo 7

Degradados radiales

Ejemplo 1

Ejemplo 2

Ejemplo 3

Ejemplo 4

Ejemplo 5

Ejemplo 6

Ejemplo 7

Ejemplo 8

Ejemplo 9

Ejemplo 10

Ejemplo 11

10 errores comunes de programadores web novatos

. Pero posteriormente es posible que “involucione”, y lo diseñe con divs anidados y estilos CSS.

Facturas en CSS

Botones súper increíbles con CSS3 y RGBA