Manual de CSS 3

CSS 3 qué ¿hay de nuevo?

La especificaciónde CSS3 viene con interesantes novedades que permitirán hacer webs más elaboradas y más dinámicas, con mayor separación entre estilos y contenidos. Dará soporte a muchas necesidades de las webs actuales, sin tener que recurrir a trucos de diseñadores o lenguajes de programación.

1.- Introducción a CSS 3
CSS 3 trae grandes novedades para el diseño de webs y algunos navegadores comienzan a implementar CSS 3. Entrar

Explicaciones y test de nuevas características CSS 3

Artículos prácticos con explicaciones de las nuevas características de la especificación CSS 3, útiles para hacer todo tipo de efectos gráficos de las webs modernas.

2.- Atributo gradiente de colores en borde con CSS y Firefox
Posibilidad de definir el un gradiente de color en el borde de los elementos con CSS, en un atributo no estándar de Firefox. Entrar

3.- Bordes redondeados en CSS 3
Las características de CSS 3 incluyen bordes redondeados, a través del atributo border-radius, que define la curvatura que debe tener el borde del elemento. Entrar

4.- Múltiples imágenes de fondo con CSS
Cómo conseguir que un elemento de la página tenga varias imágenes de fondo a la vez, con CSS básico y con características de CSS 3. Entrar

5.- Colores RGBA en CSS 3
Veremos qué son los colores RGBA y su notación, que se incluyen en la especificación de Hojas de Estilo en Cascada CSS 3. Entrar

6.- Word-wrap en CSS 3
Una propiedad de CSS 3 que sirve para romper las palabras que son demasiado largas y no caben enteras por la anchura de una caja. Entrar

7.- Textos multi-columna con CSS 3
CSS 3 incorpora nuevos atributos para que el navegador se encargue de producir texto multicolumna, es decir, que maquete directamente el texto en varias columnas sin tener que hacer nosotros nada. Entrar

8.- Bordes con imágenes en CSS 3
El atributo border-image y varios otros de CSS 3 harán posible la utilización de imágenes como bordes de los elementos de la página, sin código HTML especial, simplemente con hojas de estilo. Entrar

9.- Sombras en CSS 3 con box-shadow
Crear sombras en CSS3 con el atributo box-shadow. Por fin podremos aplicar sombras a los elementos de la página, sin usar imágenes, Javascript ni nada extra, simplemente con un atributo de CSS 3. Entrar

10.- Resplandor exterior con CSS3
Cómo realizar un elemento que tenga un resplandor exterior con CSS3 y la propiedad box-shadow. Entrar

11.- Propiedad background-origin de CSS 3
La propiedad de CSS 3 background-origin permite decidir la posición de la imagen de fondo con respecto al borde, padding o el contenido del elemento. Entrar

12.- Atributos CSS3 overflow-x y overflow-y
Descripción de los atributos de CSS3 overflow-x y overflow-y, que sirven para definir cómo renderizar un contenido cuando sobrepasa los límites de un contenedor en la horizontal o vertical. Entrar

13.- Introducción a @font-face de CSS
Fuentes en CSS 3. Sintaxis y principales características de la regla CSS @font-face, que nos permite utilizar cualquier tipografía en una página web. Entrar

14.- Sombras en el texto con text-shadow de CSS
Cómo aplicar sombras y otros efectos en los textos con CSS y el atributo text-shadow. Entrar

Degradados CSS3

Los degradados CSS3 tienen muchas posibilidades que debemos ver a lo largo de varios artículos.

15.- Degradados con CSS 3
Presentación de las características de los degradados con CSS3, que permiten hacer todo tipo de gradientes sin necesidad de usar imágenes. Entrar

16.- Degradado lineal, linear-gradient de CSS3
Explicación detallada de los degradados lineales de CSS3 que conseguimos con la propiedad linear-gradient. Crear degradados de colores, que se distribuyen en un gradiente lineal. Entrar

17.- Degradados lineales con repetición con CSS3
Estudiaremos el atributo repeating-linear-gradient de CSS3, que permite realizar degradados lineales con múltiples repeticiones del mismo gradiente de color. Entrar

18.- Degradados radiales con CSS3
Veremos ahora cómo conseguir degradados CSS3 en un gradiente de color que se distribuirá de forma radial, creando tanto círculos como elipses. Entrar

19.- Degradados CSS 3 radiales de repetición
Los degradados CSS 3 radiales, en su versión con repeticiones, que nos permiten definir fondos con gradientes de color que serían muy difíciles de implementar con imágenes. Entrar

Animaciones CSS

Una de las características más impresionantes de CSS 3 es la posibilidad de crear animaciones de los elementos de la página. Todo ello nos abre infinitas posibilidades que antes solo estaban disponibles para los programadores Javascript o diseñadores con Flash. Explora las animaciones CSS que seguro te sorprenderás.

20.- Introducción a las animaciones CSS
Las animaciones CSS nos permiten realizar efectos que hasta ahora estaban sólo disponibles con otros tipos de tecnologías. Veremos los principales aspectos a conocer sobre las animaciones CSS 3. Entrar

21.- Conceptos básicos para la animación CSS
Seguimos con el tema de las animaciones CSS y repasamos los conceptos y propiedades más básicas para poder crear una animación simple con CSS 3. Entrar

22.- Animación de un texto con CSS 3
Realizamos un ejemplo básico de animación CSS 3 sobre una capa con un simple texto. Veremos cómo hacer funcionar este primer ejemplo de animación CSS en navegadores basados en Webkit. Entrar

23.- Fondo animado con CSS 3
Práctica sobre Animaciones CSS3, en la que construimos un fondo animado al estilo de la película Matrix, utilizando únicamente código CSS 3. Entrar

24.- Fondo nevando con CSS 3
Taller de animación CSS 3, en el que creamos un fondo donde simulamos que están cayendo copos de nieve, utilizando tan sólo con CSS 3. Entrar

25.- Dibujo animado con CSS 3
Práctica general sobre diferentes técnicas de animación CSS, en el que realizamos un dibujo animado por varios elementos que tienen diferentes particualidades. Entrar

26.- Álbum con efectos en CSS 3
Creamos un álbum de fotos con estilos impactantes de CSS 3 y animación, sin utilizar Javascript o jQuery. Entrar

27.- Segundo ejemplo de álbum fotográfico animado con CSS 3
Realizamos otro ejemplo de animaciones para tu galería de fotos solamente con CSS 3. Entrar

28.- Menú animado con CSS 3
Nuevo ejemplo de animaciones CSS 3, en el que construimos un menú animado con HTML y CSS, sin necesidad de Javascript ni jQuery. Entrar

29.- Botones con efectos CSS 3
Creamos una serie de botones con colores y efectos al pasar el ratón sobre ellos, únicamente con CSS 3. Entrar

30.- Transiciones CSS3
Aplicaciones atractivas con transiciones CSS3. Entrar

31.- Ejemplos de animaciones CSS3
Ejercicios sobre animaciones CSS3 realizados en un evento en directo emitido en DesarrolloWeb.com con distintas demostraciones de las posibilidades de esta técnica del HTML5. Entrar

32.- Animaciones CSS3 vs Animaciones jQuery
Comprobaremos in situ cómo una simple animación afecta al rendimiento del navegador en cuanto al uso de la memoria se refiere. Una vez acabado el artículo extraeremos una conclusión con un ganador. Entrar