CSS3 | códigos que debemos conocer para hacer paginas con CSS3

Por: Nicolas Seijas | Categoría: HTML & CSS

CSS3 (Cascade Style Sheet 3) es el nuevo estilo de CSS que se esta utilizando en las webs, por ahora lo podremos visualizar correctamente en Firefox, Safari, Google Chrome, Opera, etc (Internet explorer 8 o inferior no lo soporta). En este articulo mostrare los nuevos códigos CSS3 y como podremos aplicarlo en nuestra página.

Como verán en el artículo, deberemos escribir 3 códigos diferentes, 2 para los exploradores (Mozilla y Safari) y el normal, por ejemplo:

Mozilla Firefox: -moz-border-radius:
Safari, Google Chrome: -webkit-border-radius:
Normal: border-radius:

Esquinas Redondeadas:

Esquinas igualmente redondeadas:

-webkit-border-radius:  Webkit
-moz-border-radius:     Firefox
border-radius:              Estándar

Ejemplo:

.redondeadas {width: 300px; height: 30px; display:block; background-color: #b40001;
border-radius:  5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}

Asi se ve si estan usando un explorador compatible con CSS3:

(La DIV se encuentra hecha con una imagen a modo de ejemplo para aquellos usuarios que estén usando Internet Explorer puedan visualizarlo)

Esquinas individualmente redondeadas:

WEBKIT:

-webkit-border-top-left-radius:
-webkit-border-top-right-radius:
-webkit-border-bottom-left-radius:
-webkit-border-bottom-right-radius:

FIREFOX:

-moz-border-radius-topleft:
-moz-border-radius-topright:
-moz-border-radius-bottomleft:
-moz-border-radius-bottomright:

ESTANDAR:

border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:

Ejemplo:

.redondeadas {width: 300px; height: 30px; display:block; background-color: #b40001;
-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px;}

En este ejemplo quisimos que nuestra DIV solamente tuviera esquinas redondeadas en la parte superior.

Asi se ve si estan usando un explorador compatible con CSS3:

(La DIV se encuentra hecha con una imagen a modo de ejemplo para aquellos usuarios que estén usando Internet Explorer puedan visualizarlo)

Box-Shadow:

-webkit-box-shadow:  Webkit
-moz-box-shadow:     Firefox
box-shadow:             Estándar

¿Cómo escribirlo?

Ejemplo:

.sombra {width: 300px; height: 30px; display:block; background-color: #cc3366;
-webkit-box-shadow: 3px 3px 10px #121212; -moz-box-shadow: 3px 3px 10px #121212;
box-shadow: 3px 3px 10px #121212;}

Asi se ve si estan usando un explorador compatible con CSS3:

(La DIV se encuentra hecha con una imagen a modo de ejemplo para aquellos usuarios que estén usando Internet Explorer puedan visualizarlo)

¿Qué Significa?

box-shadow: 3px [x-offset] 3px [y-offset] 10px [Blur (Difuminado)] #121212 (Color de la sombra)

Si queremos hacer una Sombra Interna debemos agregar la palabra inset:

Ejemplo:

.sombra_interior {width: 300px; height: 30px; display:block; background-color:
#cc3366;-moz-box-shadow: inset 0 0 16px #666;}

Asi se ve si estan usando un explorador compatible con CSS3:

(La DIV se encuentra hecha con una imagen a modo de ejemplo para aquellos usuarios que estén usando Internet Explorer puedan visualizarlo)

Como podrán ver, lo único que tuvimos que agregarle fue la propiedad inset y ya con esto tendremos nuestra sombra interna.

¿Qué Significa?

box-shadow: inset (orienta la sombra hacia el interior de la div) 0 [x-offset] 0 [y-offset] 16px [Blur (Difuminado)] #666 (Color de la sombra)

Texto en Columnas:

WEBKIT:

-webkit-column-count:
-webkit-column-gap:
-webkit-column-width:
-webkit-column-height:

FIREFOX:

-moz-column-count:
-moz-column-gap:
-moz-column-width:
-moz-column-height:

ESTANDAR:

column-count:
column-gap:
column-width:
column-height;

¿Como escribirlo?

Ejemplo:

.columnas {font-family: Tahoma; font-size: 11px; column-count: 3; column-gap: 30px;
column-width: 50px; column-height: 250px; -moz-column-count: 3; -moz-column-gap: 30px;
-moz-column-width: 50px; -moz-column-height: 250px; -webkit-column-count: 3;
-webkit-column-gap: 30px; -webkit-column-width: 50px; webkit-column-height: 250px;
width:500px;}

Asi se ve si estan usando un explorador compatible con CSS3:

(La DIV se encuentra hecha con una imagen a modo de ejemplo para aquellos usuarios que estén usando Internet Explorer puedan visualizarlo)

¿Qué significa?

column-count: 3 (Cantidad de columnas);
column-gap: 30px (Separación entre columnas);
column-width: 250px (Ancho de la columna);
column-height: 500px (Alto de la columna);

Sombra en el Texto (Text-Shadow):

¿Como escribirlo?

Ejemplo:

text-shadow: 2px 2px 5px #333;

Asi se ve si estan usando un explorador compatible con CSS3:

(La DIV se encuentra hecha con una imagen a modo de ejemplo para aquellos usuarios que estén usando Internet Explorer puedan visualizarlo)

¿Qué significa?

text-shadow: 2px (x-offset) 2px (y-offset) 5px [blur (difuminado)] #333 (color);

¿Te gustó el artículo?

Recomiendalo a través de las redes sociales

Tal vez te interese...

Comentarios

Si deseas agregar un código a tu comentario por favor usa el siguiente formato: <pre name="code" class="php">Tu código</pre>. Puedes reemplazar la clase con "js", "css", "sql", o "html". Si el código tiene algún "<" o ">" en tu código reemplazalo con: &lt; y &gt; respectivamente.

Este artículo tiene 2 comentarios

  • Cristhian Diaz, comento el 31 de agosto del 2010:

    Muy buen aporte, y es excelente las nuevas ventajas que ofrece HTLM5 y CSS3, de verdad que no hay que temer al probar el avance y desarrollo de este lenguaje. Gracias por la información.

  • Roy, comento el 23 de junio del 2011:

    Cuando será que podamos ver estos efectos en todos los navegadores? “maldito explorer”