> Manuales > Manual de CSS 3

Nuevas características de las especificaciones de Hojas de Estilo en Cascada nivel 3, CSS3, para definir el aspecto de las páginas web.

Las CSS han recibido una actualización importante que incluye características avanzadas tanto para aplicar aspecto avanzado en elementos de una página como para ayudarnos a realizar una maquetación más precisa.

En este manual vamos conociendo diversas características de las CSS aparecidas recientemente, con artículos cortos en los que podrás encontrar explicaciones y ejemplos de cada una por separado.

Artículos
  • Artículos del manual

  • 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.

  • 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.

  • 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.

  • 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.

  • 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.

  • 6 Word-wrap y overflow-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. Atributos word-wrap y overflow-wrap.

  • 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.

  • 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.

  • 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.

  • 10 Resplandor exterior con CSS3

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

  • 11 Cómo hacer con CSS3 un bocadillo de cómic o globo de historieta

    Por medio de formas CSS podemos implementar simplemente con una capa y estilos CSS3, los típicos globos de historietas o bocadillos de cómic.

  • 12 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.

  • 13 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.

  • 14 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.

  • 15 CSS 3. Nuevas funcionalidades de fuentes. Ligaduras

    Analizamos las nuevas funcionalidades de fuentes disponibles en CSS 3 y mediante el formato de fuente OpenType.

  • 16 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.

  • 17 CSS Media Queries

    Las Media Queries, incorporadas en CSS3, son las primeras construcciones del lenguaje CSS que nos permiten definir estilos condicionales, aplicables únicamente en determinadas situaciones.

  • 18 Selectores de CSS que quizás no conozcas y debes revisar

    Presentamos un listado de selectores de las CSS que puede que no conozcas y que resultan muy prácticos.

  • Degradados CSS3

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

  • 19 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.

  • 20 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.

  • 21 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.

  • 22 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.

  • 23 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.

  • 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.

  • 24 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.

  • 25 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.

  • 26 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.

  • 27 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.

  • 28 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.

  • 29 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.

  • 30 Á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.

  • 31 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.

  • 32 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.

  • 33 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.

  • 34 Transiciones CSS3

    Aplicaciones atractivas con transiciones CSS3.

  • 35 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.

  • 36 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.

  • Más posibilidades de CSS3

    En este bloque del Manual de CSS 3 continuamos ofreciendo artículos que explican otras de las novedades importantes del estándar, que resultarán útiles para el diseño y maquetación de webs.

  • 37 Propiedad text-overflow CSS3

    En qué consiste la propiedad text-overflow de CSS3, casos en los que la podemos usar y compatibilidad con navegadores.

  • 38 Qué es CSS Grid Layout

    Conoce CSS Grid Layout, el sistema de rejilla para la maquetación web, estándar y compatible en todos los navegadores. Esta nueva especificación de CSS3 te permitirá llegar a donde habías pensado que era imposible.