Los Temas más visitados de CSS

Las variables CSS, técnicamente llamadas "propiedades CSS no estándar", simplifican tus archivos CSS y permiten crear efectos tan interesantes como cambiar dinámicamente los estilos aplicados en una página y mejorar las características de las propiedades CSS estándar.
Google Chrome era el único navegador importante que todavía no soportaba estas variables CSS. Sin embargo, a partir de su versión 49 ya están disponibles, por lo que ya es seguro usar variables CSS si tus usuarios usan navegadores modernos (Firefox 43+, Safari 9.1+, iOS Safari 9.3+, Chrome 49+).

Tradicionalmente, la web era un lugar muy estático. Animace no era posible de ninguna manera cuerda hasta la llegada de JavaScript, los GIFs animados y Flash, momento en el que nos regocijamos y aplaudimos la gran cantidad resultante de 'saltar intro' y horribles animaciones molestas.

Estaba todo muy bien, pero seguía sin haber manera para que los no desarrolladores creasen animaciones con estándares abiertos. Puedes dar salida a todos los argumentos religiosos que desees sobre que la animación que pertenece a la capa de comportamiento, y no a la capa de presentación, pero creo que la animación definitivamente cae en el ámbito del diseño. Y ahora, con las transiciones y animaciones CSS3, se pueden animar los elementos de nuestro sitio web. ¡Diseño web basado en estándares con más diversión! Y más 'saltar intro', si lo prefieres…

Opera tiene soporte para transiciones desde hace mucho tiempo, y ya hemos escrito sobre ellos en CSS3 transitions and 2D transforms. Este artículo se centra en la otra manera de animar las cosas usando hojas de estilo: las animaciones CSS. A continuación daremos una introducción concreta incluyendo el estado de la especificación y el soporte en navegadores, las diferencias entre animaciones y transiciones, la sintaxis básica, y una lista de ejemplos.

Aprenderás como hacer un formulario con el famoso estilo de google conocido como Material Design.

Puedes utilizar este diseño de formulario para cualquier cosa, ya sea un formulario para registrar usuarios o un formulario de contacto, ademas este formulario es adaptable a dispositivos móviles por lo que es una buena alternativa a los formularios tradicionales y aburridos.

Matt Berseth nos enseña una técnica que podemos usar con CSS para crear imagenes Sprite con el tema XP.

Los estilos CSS es lo que nos permite dar la apariencia que deseamos a nuestros desarrollos, por lo que forma parte fundamental de estos. Hoy vamos a ver un listado de 8 técnicas que nos pueden servir a la hora de realizar nuestros desarrollos.
1. Trabajar con medidas relativas
2. Utilizando columnas múltiples
3. Evitando el salto de línea
4. Rotando imágenes
5. Rotando texto
6. Estilizando enlaces según su destino
7. Centrando un elemento
8. Sombra interna

Aprende a maquetar tu site en 3 columnas con CSS.

Vamos a ver como embeber una tipografía en tu página desde Google para que el usuario vea la web tal y como la diseñes, aunque no sea una fuente de uso común.

Guia que detalla los pasos a seguir para la correcta depuración, optimización e instalación de una página web o blog en CSS.

Actualmente tenemos gran variedad de dispositivos desde los que accedemos a internet. Smartphones, tablets, laptops, desktops, televisores, incluso relojes.
Todos ellos tienen un tamaño de pantalla diferente y también una resolución diferente. Una imagen en un smartphone puede verse muy nítida, pero ese mismo archivo en un monitor de alta resolución se verá pixelada.
Lo ideal sería tener la misma imagen pero en varios tamaños y que el navegador eligiese cual presentar en cada momento.
¿Es esto posible?

¿Todavía usando tablas para maquetar? ¿Harto de usar floats? ¿Ni pajolera idea de cómo alinear verticalmente elementos? Pues con flexbox todo se hace más fácil.

Índice de Contenidos:
1.- Historia de la maquetación
2.- Introducción a flexbox
3.- Contenedor
4.- Hijos
5.- Responsividad avanzada
6.- Comparativa
7.- Conclusión

Algo que es muy útil y recurrente dentro de mis proyectos es el menú desplegable, este elemento le da un toque moderno a nuestras webs, además de ahorrar espacio sobre todo cuando se trata de diseños para dispositivos móviles. Hacemos clic sobre un botón y que despliega el contenido que queremos ver en lugar de llenar la página de texto y tener que hacer scroll hasta encontrar lo que se busca. Por lo que también estamos aportando usabilidad a nuestra página web.

Este artículo muestra como crear un menú, pero podría ser simplemente un botón que despliega un contenido como las características de un producto por ejemplo y la acción podría dispararse al pasar el ratón por encima.

Al crear un sitio web, gran parte del trabajo consiste en disponer correctamente los distintos elementos que la componen. El diseño debe ser atractivo, pero claro al mismo tiempo, y se debe comprender de forma intuitiva. Las hojas de estilo en cascada (CSS) constituyen una herramienta para diseñar sitios web con esas características. Mientras que HTML muestra el contenido de forma rudimentaria, CSS es apto para diseños complejos. La tecnología de la web está en constante desarrollo y ahora, con CSS3, han aparecido técnicas nuevas que permiten aplicar el lenguaje en el Internet móvil y utilizar el diseño responsivo.

Índice de contenidos:
1.- ¿Por qué se usa CSS grid layout?
2.- CSS grid: tutorial con ejemplos
2.1.- Crear contenedores y elementos
2.2.- Rejilla, columnas y filas
2.3.- Disposición de los elementos
2.4.- Asignación de áreas
2.5.- Ajustar la alineación
2.6.- Ajustes automáticos para usar diseño responsivo

Muchos gurus de los estándares hacen parecer el uso de tablas como cosa del demonio. Mientras que lo mejor es separar la estructura del contenido y utilizar CSS exclusivamente, para muchos diseñadores los layouts con tablas son una realidad y una necesidad práctica. Podemos aprovechar la versatilidad de CSS para nuestras páginas aun cuando usemos tablas.

Este artículo explica como hacer una hoja de estilo CSS distinta para la visualización de la página en el navegador y otra para la impresión en una impresora.

Guía de referencia rápida de CSS3 en formato pdf. Contiene 5 páginas.

Imprimir de manera organizada. En este taller conocerá cómo controlar saltos de página en la impresión de un documento HTML.

La utilización del estándar de marcado CSS (en español Hojas de Estilo en Cascada) definido por el World Wide Web Consortium (W3C) permite a diseñadores y programadores definir estilos coherentes para páginas web y aplicar la plantilla a varias páginas. Un aspecto especialmente relevante de CSS es el Modelo de Caja. Este artículo brinda una primera aproximación a su arquitectura y a las distintas posibilidades que ofrece.

Tarde o temprano, todo libro o taller práctico de CSS queda bajo la influencia del Modelo de Caja. Es uno de los elementos básicos de las Hojas de Estilo en Cascada y por lo tanto su correcta interpretación resulta fundamental a la hora de lograr los resultados deseados en un diseño, por más simple que éste resulte.

Una breve introducción en formato diapositivas al HTML y a las páginas de estilos CSS.

Si tu sitio o aplicación web utiliza fuentes web, controlar cómo se cargan puede ser muy importante para mejorar el rendimiento percibido por tus usuarios. La nueva propiedad font-display disponible para @font-face permite a los diseñadores controlar cómo se muestra el sitio web en función de cuánto tardan en descargarse las fuentes web.

Una de las cuestiones que más me preguntan sobre el diseño de mi sitio personal es la siguiente: ¿Cómo consigues que el fondo de color de la columna derecha se extienda hasta abajo del todo en la página?. Es un concepto sencillo, realmente es uno que muchos ya conocerán. Pero para aquellos que todavía no lo conocen, esta técnica puede ser un truco útil.

Este es un artículo que te servirá de guía para crear formularios totalmente accesibles usando XHTML y hojas de estilo en cascada (css) para darle formato.

Articulo en formato pdf de las referencias CSS más importantes. Esquematizado en tres columnas: Propiedad, descripción y valores.

En la siguiente tabla se encuentran las equivalencias entre las distintas unidades de medida que podemos encontrar en CSS (la equivalencia es aproximada, no exacta, en última estancia depende de la fuente, el navegador y el sistema operativo).

Esta propiedad de css3 nos va a permitir extender el contenido de un elemento html en múltiples columnas, igual como se utilizan en los periódicos y revistas. Esto sirve para no hacer ver una columna de texto muy larga y tediosa a la vista, si no que al insertar múltiples columnas vamos a poder ver un solo artículo en un tamaño determinado en un solo pantallazo del navegador, y así no evitamos el hacer scroll, que a mucha gente aburre.
Con CSS3 Columns el navegador determina cuando pone fin a una columna y comienza la siguiente columna, sin necesidad de algún código extra vamos a conservar la flexibilidad para cambiar el número de columnas así como sus anchuras.

En este artículo os mostraré como maquetar una web para que se adapte a diferentes resoluciones de pantallas, smartphones y tablets. Tendencia que en inglés se llama Responsive Design.

Sencilla guía de introducción a CSS nivel básico.
Contiene:
1. Aprender CSS es fácil si te lo planteas bien
2. ¿Cómo funcionan las hojas de estilo en cascada?
3. Los conceptos clave en las hojas de estilo CSS
3.1. Reglas, selectores y propiedades
3.2. La cascada: herencia, sobreescritura y conflictos de estilos
4. Un ejemplo práctico
5. Propiedades básicas que deberías conocer
5.1. Maquetación básica
5.2. Fuentes y texto
5.3. Color y fondos
5.4. Listas
5.5. Bordes
6. Vincular los estilos CSS a páginas HTML
6.1. Hojas de estilo CSS inline
6.2. Hojas de estilo CSS internas
6.3. Hojas de estilo CSS externas
7 Personalizar CSS en blogs: WordPress y Blogger
7.1. CSS en Blogger
7.2. CSS en WordPress.org
7.3. CSS en WordPress.com
8. Referencias para profundizar más

En la versión 4 del popular framework para Frontends existen clases CSS que te pueden facilitar la maquetación de tu proyecto, solo es cuestión que las pongas en práctica y las uses hasta que las hagas parte de tu trabajo en maquetación y veras lo rápido que avanzarás, estas clases te ahorran muchas líneas de código CSS que sueles escribir para darle cierto aspecto a un elemento del proyecto. Veamos las clases en el siguiente tutorial.

Es muy fácil maquetar una página que tenga un mapa de Google, simplemente debemos utilizar maquetación y posicionamiento CSS.

Una de las recomendaciones fundamentales para una buena usabilidad es no modificar en exceso el diseño de los elementos que forman parte de la interfaz de usuario del sistema operativo, tales como botones, elementos select, las barras de scroll, etc. Hacerlo complica el uso de tu sitio o aplicación web porque el usuario tiene que aprender a reconocerlos.

No obstante, como toda norma tiene sus excepciones, a veces puede ser necesario modificar estos elementos en algunos diseños muy especiales. Firefox 64, publicado en diciembre de 2018, añade entre sus nuevas funcionalidades la posibilidad de cambiar el diseño de las barras de scroll.

En concreto, lo hace a través del estándar CSS Scrollbars Module Level 1, que todavía se encuentra en fase de borrador y no es un estándar oficial. Los tres escenarios para los que se ha pensado este estándar son:

1.- Cambiar el color de las barras de scroll para adaptarlas al diseño de la aplicación o sitio web.
2.- Mostrar barras de scroll más finas de lo normal cuando un elemento lo requiera.
3.- Diseñar barras de scroll totalmente personalizadas si el diseño así lo requiere.

Para ello se han definido dos nuevas propiedades CSS (scrollbar-color y scrollbar-width) que se pueden aplicar a la página entera y también a cualquier elemento que soporte la propiedad overflow de CSS.