Novedades CSS3

shape
shape
shape
shape
shape
shape
shape
shape

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 https://www.w3schools.com/cssref/css3_pr_all.asp

One Comment:

  1. 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 =/

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Hablamos de tu proyecto web?

Diseño y desarrollo web, diseño gráfico publicitario, hosting, dominios ,fotografía corporativa, marketing en internet.