HTML5, degradados, transiciones y efectos dinámicos

Utilizar el tipo de letra que queramos

Hay una nueva regla CSS que permite que todo el mundo pueda ver el tipo de letra que hemos elegido para nuestra página web, aunque no la tengan instalada en su ordenador. Los pasos que debemos seguir son:

  • Subir el tipo de letra que queramos a nuestro servidor
  • Utilizamos la nueva regla CSS cuya sintaxis es la siguiente:
@font-face {
font-family: 'mipropiafuente';
src:url('mifuente.ttf'); // ESTA FUENTE DEBE ESTAR SUBIDA EN EL SERVIDOR
}

Veamoslo en un ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Selectores</title>
<style>
#principal {
width: 500px;
text-align: center;
margin: 25px auto;
padding: 25px;
background-color: red;
border-radius: 10px;
box-shadow: #333 -5px -4px 10px;

@font-face {
font-family: 'mipropiafuente';
url('mifuente.ttf'); // FUENTE QUE TENEMOS QUE SUBIR AL SERVIDOR
}

#titulo {
font: bold 36px 'mipropiafuente';
}
}
</style>
</head>
<body>
<header id="principal">
<span>Prueba CSS</span>
</header>
</body>
</html

Es un requerimiento que la fuente esté en la raíz del servidor.

Aplicar degradados lineales

Para aplicar degradados a un fondo veamos la siguiente sintaxis

background: linear-gradient(top,#00f,#f00);

Al utilizar top en nuestro estilo le decimos a CSS que comience desde la parte superior, si pusiéramos bottom comenzaría desde la parte inferior, si utilizamos left empieza por la izquierda, y si ponemos right, lo ponemos por la derecha.

Para que los efectos funciones en los distintos navegadores, debemos hacer saber a que navegadores deben aplicar, para ello se utilizan las siguientes sintaxis

  • -moz-: es para Firefox
  • -webkit-: es de Chrome
  • -ms-: es de Explorer
  • -o-: es de Opera

Ejemplo

background: -webkit-linear-gradient(left,#00f 50%,#f00 50%);

Si aplicas el 50% en un color y el 50% en otro, el resultado es curioso, ya que la caja queda dividida en 2 colores, con los colores que hayamos puesto. El resultado cambia en cuanto cambias los porcentajes, dando a uno más porcentaje que a otro.

Degradado radial

Para ello vemos la sintaxis

background: -webkit-radial-gradient(center, circle,#00f 30%,#f00 30%);
  • center: comienza desde el centro
  • circle: tiene un degradado circular, puede ser en vez de circle, ellipse.

Transparencia del texto

Desde CSS3 podemos darle transparencia, mediante la propiedad rgba(). Anteriormente existía la propiedad rgb(123,123,123). La propiedad rgba() tiene un cuarto valor que sería 0 o 1, 0 es transparente total y 1 opaco total, de la siguiente manera.

p {
rgba(123,123,123,0.2);
}

Aplicar borde exterior a nuestra caja de texto

Para ello vamos a utilizar una propiedad CSS nueva, denominada outline, de la siguiente manera

p {
outline(2px dashed #f00);
}

Podemos alejar dicho borde mediante un propiedad CSS denominada outline-offset, de la siguiente forma:

p {
outline-offset: 15px; 
}

De esta manera alejamos 15 px nuestro borde exterior.

Escalar el elemento

Con las nuevas propiedades se puede escalar fácilmente un elemento mediante la propiedad scale de la siguiente forma.

p {
transform:scale(0.5); // LE DARÍA LA MITAD DEL TAMAÑO
}

1 sería el tamaño original, y todo lo que supere el 1, se está incrementando el tamaño del elemento.

Invertir el elemento

Se consigue con la siguiente sintaxis con la propiedad scale.

p {
transform:scale(3, -1);
}

Girar un elemento

Existe una nueva propiedad denominada rotate. Veamos un ejemplo de su uso.

p {
transform:rotate(30deg)
}

30deg indica los grados que quieres rotar el elemento. Si le ponemos 180 le damos la vuelta completa al elemento. Si le damos 360 le hemos dado la vuelta por completo.

Aplicar o cambiar la perspectiva de un elemento

Se hace de la siguiente manera

p {
transfor:skew(30deg);
}

De esta manera cambiamos la perspectiva.

Transiciones

Con CSS3 podemos hacer transiciones de la siguiente manera.

p {
transition:transform 1s (el tiempo que dura) ease (el efecto) 0.5s (retardo)
}