2013
1
03

Novedades CSS3

por: David García Carbayo

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

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…

Deja una respuesta

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

  Acepto la política de privacidad

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.