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