2013
1
Mar

Novedades CSS3

Por:

La tercera versión de las hojas de estilo para páginas web presenta muchas novedades que nos ofrecen múltiples posibilidades para dar un aspecto moderno y atractivo a nuestros diseños webs.

El problema quizás sea la compatibilidad. A continuación, detallaremos alguna de las nuevas opciones que nos da CSS3 que son compatibles con todos los navegadores, a excepción de las versiones de Internet Explorer inferiores a la 9.

Textos y sus fuentes:

La propiedad text-shadow nos permite añadir sombra a cualquier texto de nuestra web. Podemos indicarle la posición horizontal, la posición vertical, el desenfocado y el color de la sombra. Para sombrear ESTE TEXTO hemos añadido la siguiente línea en el css: text-shadow: 5px 5px 5px red;

CSS3 también nos permite indicar el funcionamiento de las palabras o textos cuando éstas no entran en un div o elemento contenedor. Mediante word-wrap, las palabras se dividirán (break-word) y text-overflow ofrece la misma posibilidad para textos largos, dándonos la opción de ocultar el texto sobrante (clip) y de advertir de que hay más contenido añadiendo unos sutiles puntos suspensivos (ellipsis)

Contenedores con sombra y bordes especiales:

De nuevo hay que decir que con CSS3, añadir sombras, bordes (con imágenes, redondeados, …) es muy fácil.

La propiedad border-radius le da un aspecto redondeado al borde de cualquier elemento HTML. En el ejemplo se utiliza un border-radius: 10px; pero funciona como el padding o el margin, pudiendo indicar a cada esquina como mostrarse.

Box-shadow se configura fácilmente con 5 parámetros: posición horizontal, vertical, desenfocado, inicio del desenfocado, color y, de forma opcional, indicarle que la sombra sea interior (inset)

 

min-height: 100px;
box-shadow: 5px 5px 20px 5px rgb(124, 123, 123) inset;
background: white;
border-radius: 10px 5px;
text-align: center;
display: inline-block;
padding: 5px

box-shadow: 5px 5px 17px 3px #4e4747;
background: gray;
border-radius: 20px;
text-align: center;
margin-right: 0px;
padding: 5px;
color: white;
transform: rotate(5deg);
-ms-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);

 

Para aprender más sobre CSS3 y ver las compatibilidades de cada una de las nuevas propiedades, podéis entrar en http://www.w3schools.com/css3/

GD Star Rating
loading...
Novedades CSS3, 3.5 de 5 basado en 4 calificaciones.

Tags: , ,


2 Respuestas a “Novedades CSS3”

  1. chris dice:

    La putada es cuando vas a explorer y no ves nada de eso.
    Suerte que cada vez la gente usa más el Chrome, pero yo me cansé hace tiempo de tener que estar pendiente de todos los navegadores =/

  2. mktfan.com dice:

    Novedades de CSS3…

    Novedades del CSS3 para nuestras páginas web…