Stunning CSS3
Zoe Mickley Gillenwater
- Editorial
- New Riders
- Año
- 2010
- Páginas
- ~320
- Nivel
- Intermedio
De qué trata
Guía de New Riders, basada en proyectos, en la que Zoe Mickley Gillenwater (autora de Flexible Web Design) presenta las novedades de CSS3 tal como se podían usar a finales de 2010. Está dirigida a diseñadores y desarrolladores web que ya dominan CSS2 y HTML y quieren incorporar CSS3 a su trabajo de forma progresiva, sin esperar a que todos los navegadores lo soporten.
Tras un capítulo inicial sobre el estado de CSS3 y cómo usarlo de forma responsable, cada capítulo se dedica a una técnica concreta que luego se puede trasladar a otros proyectos. Se trabajan border-radius, colores semitransparentes HSLA/RGBA, text-shadow, word-wrap, contenido generado, @font-face, background-clip y fondos múltiples, selectores de atributo y pseudoclases para estilizar enlaces e imágenes según su tipo, transformaciones y transiciones para pequeñas animaciones, media queries para adaptar el diseño a distintos tamaños de pantalla y el módulo de varias columnas. La revisión técnica del código estuvo a cargo de Chris Mills.
Su valor está en el enfoque práctico y en la idea de mejora progresiva: cada efecto se aplica de modo que la página siga funcionando en navegadores antiguos. Los capítulos sobre diseño adaptado a la pantalla y maquetación por columnas son de los más destacados. Hoy buena parte del contenido sobre prefijos de navegador y compatibilidad está desactualizada, y el libro es anterior a Flexbox y Grid tal como existen hoy, así que interesa sobre todo como introducción histórica o para entender los fundamentos de estas propiedades.
- CSS3
- border-radius
- RGBA/HSLA
- text-shadow
- @font-face
- Contenido generado
- Pseudoclases
- Selectores de atributo
- Transformaciones y transiciones
- Media queries
- Multicolumna
- Mejora progresiva
¿Cómo enseña?
Con proyectos
- ✗ Sin ejercicios
- ✓ Incluye proyectos
Proyectos
Speech Bubbles (bocadillos de diálogo)
Comentarios con forma de bocadillo creados sin imágenes, usando border-radius, contenido generado, word-wrap y fondos semitransparentes con HSLA/RGBA.
Notebook Paper (papel de cuaderno)
Recreación del aspecto de una hoja de cuaderno rayada con fondos, fuentes web mediante @font-face, sombras y otros efectos de CSS3.
Imágenes y enlaces según su tipo
Uso de selectores de atributo para añadir iconos y estilos automáticos a enlaces e imágenes en función del tipo de archivo o destino.
Mejora de la eficiencia con pseudoclases
Aplicación de pseudoclases estructurales de CSS3 para estilizar tablas y listas sin añadir clases extra al HTML.
Distinto tamaño de pantalla, distinto diseño
Adaptación de un diseño a pantallas grandes y móviles mediante media queries.
Maquetación con varias columnas
Distribución del contenido en columnas con el módulo multicolumna de CSS3 como parte de un layout flexible.
