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

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 (border-radius):

ESQUINAS IGUALMENTE REDONDEADAS:

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

Ejemplo:

Así se ve si están 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:

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

Así se ve si están 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:

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:

Así se ve si están 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] [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:

Así se ve si están 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:

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);

Scroll to top