¿Cómo hacer gradientes o rotar una página con CSS?

Date

Algunos se preguntan cómo hacer el gradiente de un sitio web (el degradado o transición de un color a otro) sin necesidad de utilizar una imagen, sino sólamente utilizando atributos CSS. Otra pregunta que es común encontrar es cómo rotar o inclinar un texto utilizando sólamente CSS.

Actualmente estas características CSS no están totalmente implementadas, sin embargo, existen iniciativas interesantes que nos dejan ver que estas características podrían ser parte de Internet dentro de un tiempo.

WebKit:

Todos los navegadores tienen un sistema para interpretar el código HTML y CSS para así mostrar una página web dada, WebKit es este sistema para el navegador Safari, y ya se empieza a utilizar en otros dispositivos como algunos teléfonos celulares Nokia. Puede descargar la versión más reciente de WebKit

Con Webkit, ya es posible implementar algunas de estas características, por ejemplo, para utilizar gradientes podríamos utilizar el siguiente código:

background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

Para rotar una página podríamos utilizar lo siguiente:

body {
-webkit-transform: rotate(-2deg);
}

En general, podríamos decir que estas características aún no deberían ser utilizadas en cualquier sitio web, debido a que la mayoría de los navegadores no tienen instalado WebKit, sin embargo, es una iniciativa interesante que parece indicar que, si en el futuro todos los navegadores empiezan a incorporar la facilidad para interpretar estos atributos CSS, pronto podemos empezar a utilizarlos. Por ahora, a los diseñadores web se les recomienda descargar WebKit para ir probando algunas de estas funciones y prepararse para el futuro cercano de CSS.

Conocer más
noticias

Skip to content