Diez atributos CSS3 imprescindibles (Primera parte 5/10)

El CSS3 es la nueva versión del lenguaje de estilos para sitios web, aunque debería ser el estándar nos encontramos muchas veces con que debemos utilizar prefijos para hacer funcionar las ultimas adiciones al lenguaje. Hoy trigo diez atributos CSS que son de mucha utilidad al hacer un sitio web moderno.

1 – Border-radius:

El atributo border-radius nos permite añadir bordes redondeados a nuestra Div, así como a otros elementos HTML (ej: inputs). La sintaxis del atributo es la siguiente:

1
2
3
4
.caja{
     border:2px solid;
     border-radius:25px;
}
.caja{
     border:2px solid;
     border-radius:25px;
}

Donde el valor da la curvatura a todos los bordes, cuanto más grande el valor mayor es la curvatura. En el caso que queramos definir la curvatura de cada uno de los bordes lo podemos hacer de la siguiente manera:

1
2
3
4
.caja{
     border:2px solid;
     border-radius:5px 10px 15px 20px;
}
.caja{
     border:2px solid;
     border-radius:5px 10px 15px 20px;
}

La curvatura de los bordes se determina en el siguiente orden: borde superior izquierdo, borde superior derecho, borde inferior derecho y por último borde inferior izquierdo. La manera fácil de recordarlo es que se mueve en la dirección del reloj desde el borde superior izquierdo, además esto se cumple en otras propiedades

2 – Box-shadow:

El atributo box-shadow: añade una sombra del color que deseemos por debajo de una Div o elemento. Una de las ventajas de la box-shadow es que siguen los contornos redondeados creados con el border-radius, sin embargo no siguen otro objeto dentro de la Div. Así que si por ejemplo colocamos una imagen con forma de triangulo y le aplicamos un box-shadow el resultado será una sombra cuadrada al rededor de la misma siguiendo la forma real de la imagen. El código para aplicar una box-shadow es el siguiente:

1
2
3
.caja{
     box-shadow: 10px 10px 5px #888888;
}
.caja{
     box-shadow: 10px 10px 5px #888888;
}

Donde los valores del atributo son los siguientes:  el primer número representa la desviación horizontal de la sombra, el segundo la desviación vertical, el tercero el radio de blur del color de la sombra y por último el color de la misma.

3 – Text-shadow:

Como lo indica el nombre este atributo añade una sombra al texto. El funcionamiento es muy similar al box-shadow, el código es el siguiente:

1
2
3
h1{
   text-shadow: 2px 2px 3px #ff0000;
}
h1{
   text-shadow: 2px 2px 3px #ff0000;
}

Como en el box shadow el primer número representa la desviación horizontal de la sombra, el segundo la desviación vertical, el tercero el radio de blur del color de la sombra y por último el color de la misma.

4 – Background: linear-gradient

Este atributo CSS permite la creación de una gradiente en un elemento, como el código lo muestra no es una función muy soportada ya que precisa prefijos para los tres navegados mas modernos. Eso implica que en navegadores antiguos probablemente no funcione o deba implementarse de otro modo.

1
2
3
4
.caja{
      background: -moz-linear-gradient(top, #281772, #1f1549);
      background: -o-linear-gradient(top, #281772, #1f1549);
      background: -webkit-linear-gradient(top, #281772, #1f1549);   }
.caja{
      background: -moz-linear-gradient(top, #281772, #1f1549);
      background: -o-linear-gradient(top, #281772, #1f1549);
      background: -webkit-linear-gradient(top, #281772, #1f1549);   }

Los valores del atributo tienen el siguiente significado: el primero, en este caso top, indica la dirección y el comienzo de la gradiente, los valores que se le pueden dar son, aparte de top, bottom, left y right. En cuanto a los dos siguientes valores, determinan el color de inicio y del final del gradiente respectivamente.

5 – Background-size:

Como el nombre lo indica este atributo nos permite ajustar el tamaño de el fondo. El código es el siguiente:

1
2
3
4
5
.caja{
    background:url(ejemplo.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}
.caja{
    background:url(ejemplo.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

Los valores de el atributo representan el ancho y la altura respectivamente. Los valores permitidos aparte de los numéricos son “cover” y “contain”, el primero escala la imagen para que llene el fondo lo mayor posible pudiendo quedar partes de la imagen sin visualizarse y el segundo escala la imagen para que el ancho y el alto sean igual a la del elemento contenedor.

Author: gp2

Desarrollador Web, Programador PHP y MySQL, conocedor de HTML5, CSS3 y Javascript. Del culto JQuery, gran coleccionador de funciones ajenas y especialista en hacer código redundante. Últimamente programador Java.

2 comentarios en “Diez atributos CSS3 imprescindibles (Primera parte 5/10)

Deja un comentario