CSS3 provee nuevas propiedades para crear efectos visuales y dinámicos que son parte esencial de la web en estos días.

  • border-radius: esta propiedad genera esquinas redondeadas para la caja formada por elelemento. Posee dos parámetros diferentes que dan forma a la esquina. El primer parámetro determina la curvatura horizontal y el segundo la vertical, otorgando la posibilidad de crear una elipsis. Para declarar ambos parámetros de la curva, los valores deben ser separados por una barra (por ejemplo, border-radius: 15px / 20px). Usando solo un valor determinaremos la misma forma para todas las esquinas (por ejemplo, border-radius: 20px). Un valor para cada esquina puede ser declarado en un orden que sigue las agujas del reloj, comenzando por la esquina superior izquierda.
  • box-shadow: esta propiedad crea sombras para la caja formada por el elemento. Puede tomar cinco parámetros: el color, el desplazamiento horizontal, el desplazamiento vertical, el valor de difuminación, y la palabra clave inset para generar una sombra interna. Los desplazamientos pueden ser negativos, y el valor de difuminación y el valor inset son opcionales (por ejemplo, box-shadow: #000000 5px 5px 10px inset).
  • text-shadow: esta propiedad es similar a box-shadow pero específica para textos. Toma cuatro parámetros: el color, el desplazamiento horizontal, el desplazamiento vertical, y  el valor de difuminación (por ejemplo, text-shadow: #000000 5px 5px 10px).
  • @font-face: esta regla nos permite cargar y usar cualquier fuente que necesitemos. Primero, debemos declarar la fuente, proveer un nombre con la propiedad font-family y especificar el archivo con src (por ejemplo, @font-face{ font-family:Mifuente; src: url(‘font.ttf’) }). Luego de esto, podremos asignar la fuente (en el ejemplo Mifuente) a cualquier elemento del documento.
  • linear-gradient(posición inicio, color inicial, color final): esta función puede ser aplicada a las propiedades background o background-image para generar un gradiente lineal. Los atributos indican el punto inicial y los colores usados para crear el gradiente. El primer valor puede ser especificado en pixeles, en porcentaje o usando las palabras clave top, bottom, left y right. El punto de inicio puede ser reemplazado por un ángulo para proveer una dirección específica para el gradiente (por ejemplo, lineargradient(top, #FFFFFF 50%, #006699 90%);).
  • radial-gradient(posición inicio, forma, color inicial, color final): esta función puede ser aplicada a las propiedades background o background-image para generar un gradiente radial. La posición de inicio es el origen y puede ser declarado en pixeles, porcentaje o como una combinación de las palabras clave center, top, bottom, left y right. Existen dos valores para la forma: circle y ellipse, y puntos de terminación pueden ser declarados para cada color indicando la posición donde la transición comienza (por ejemplo, radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);).
  • rgba(): esta función es una mejora de rgb(). Toma cuatro valores: el color rojo (0-255), el color verde (0-255), el color azul (0-255), y la opacidad (un valor entre 0 y 1).
  • hsla(): esta función es una mejora de hsl(). Puede tomar cuatro valores: el tono (un valor entre 0 y 360), la saturación (un porcentaje), la luminosidad (un porcentaje), y la opacidad (un valor entre 0 y 1).
  • outline: esta propiedad fue mejorada con la incorporación de otra propiedad llamada outline-offset. Ambas propiedades combinadas generan un segundo borde alejado del borde original del elemento (por ejemplo, outline: 1px solid
    #000000; outline-offset: 10px;).
  • border-image: esta propiedad crea un borde con una imagen personalizada. Necesita que el borde sea declarado previamente con las propiedades border o border-with, y toma al menos tres parámetros: la URL de la imagen, el tamaño de las piezas que serán tomadas de la imagen para construir el borde, y una palabra clave que especifica cómo esas piezas serán ubicadas alrededor del elemento (por ejemplo, border-image: url(“file.png”) 15 stretch;).
  • transform: esta propiedad modifica la forma de un elemento. Utiliza cuatro funciones básicas: scale (escalar), rotate (rotar), skew (inclinar), y translate (trasladar o mover). La función scale recibe solo un parámetro. Un valor negativo invierte el elemento, valores entre 0 y 1 reducen el elemento y valores mayores que 1 expanden el elemento (por ejemplo, transform: scale(1.5);). La función rotate usa solo un parámetro expresado en grados para rotar el elemento (por ejemplo, transform: rotate(20deg);). La función skew recibe dos valores, también en grados, para la transformación horizontal y vertical (por ejemplo, transform: skew(20deg, 20deg);). La función translate mueve el objeto tantos pixeles como sean especificados por sus parámetros (por ejemplo, transform: translate(20px);).
  • transition: esta propiedad puede ser aplicada para crear una transición entre dos estados de un elemento. Recibe hasta cuatro parámetros: la propiedad afectada, el tiempo que le tomará a la transición desde el comienzo hasta el final, una palabra clave para especificar cómo la transición será realizada (ease, linear, ease-in, ease-out, ease-in-out) y un valor de retardo que determina el tiempo que la transición tardará en comenzar (por ejemplo, transition: color 2s linear 1s;).

 

 

105