En esta sección recopilamos nuestros escritos sobre CSS. Encontrarás recursos con enlaces muy interesantes con ejemplos para inspirarte, tutoriales para los que están empezando y quieran aprender a manejar CSS, las nuevas propiedades de CSS3 y por supuesto todo lo referente a media queries fundamentales para diseño web responsive. Empieza a controlas las hojas de estilo de tu web desde cero!
Gracias a CSS Grid, el diseño editorial y diseño web están más cerca que nunca, sirviendo los diseños de magazines y publicaciones como inspiración para proyectos web, como algunos de estos ejemplos.
Seguimos con nuestro homenaje-web al lanzamiento del Apollo 8. Y en esta segunda parte, nos centraremos en todas las herramientas que nos ofrece CSS Grid para poder crear nuestra landing page.
Si te gusta usar las nuevas herramientas CSS, pero te inquietan los posibles problemas de compatibilidad con los diferentes navegadores web, no te preocupes. Con Feature Query puedes usar todas ellas, asegurándote de que van a funcionar sea cual sea el navegador desde donde entren tus usuarios.
Este año se cumple el 30 aniversario de un acontecimiento histórico: la primera vez que una misión tripulada orbitó la Luna. Y para celebrarlo, vamos a hacer una web-homenaje siguiendo los preceptos de CSS Grid, otro acontecimiento histórico, esta vez en el mundo del diseño web.
Estas últimas semanas hemos estado trabajando en un Side Project llamado Gridexamples.com, un showcase con ejemplos de webs en producción que usan CSS Grid. Repasamos lo que hemos aprendido durante su desarrollo.
Ya llaga la Navidad! Y con ella nuestra felicitación navideña, este año en forma de juego diseñado con HTML, CSS y JS. ¿Puedes ayudar a Santa a decorar su árbol correctamente? Feliz Navidad!
En este artículo vamos a experimentar con un nuevo valor para la propiedad position de CSS para crear una barra de progreso de lectura de los artículos sin necesidad de PHP ni JavaScript. Solo HTML y CSS.
En los últimos meses, Visual Code Studio se ha convertido en uno de los editores de código favoritos por muchos programadores y diseñadores web. Te mostramos a que se debe esto, y algunas de sus claves que lo convierten en una herramienta tan atractiva.
En esta demo vamos a ver como crear una barra social horizontal para compartir nuestros artículos. La maquetaremos para que se mantenga fija y flotante en la parte inferior de la pantalla. Todo con HTML y CSS3.
Las páginas de error 404 son una de las secciones más descuidadas en el diseño web. Con estos diseños y animaciones CSS ya no hay escusas para no tener un diseño creativo y divertido.
Una muestra de diseños en CSS y HTML de formularios de suscripción de boletines de correo y newsletter, perfectos para encontrar un poco de inspiración. Son fácilmente aplicables a cualquier formulario, especialmente al widget de suscripción de WordPress
Los banners tienen que adaptarse al diseño web responsive, ya que las imágenes con unas dimensiones fijas ya no tienen sentido en las estructuras fluidas actuales. Repasamos las alternativas y diseñamos varios banners responsive con HTML y CSS.
Una nueva demo para solucionar un problema sencillo, conseguir un zoom de una imagen al pasar el cursor por encima (hover) solo con CSS. No necesitaremos JS ni librerías externas para poder ampliar una imagen y verla con mas detalle, solo HTML y CSS.
Animamos el icono hamburguesa, que da acceso al menú responsive utilizando transformaciones y pseudoelementos CSS junto con HTML, convirtiendo el elemento en un nuevo icono de cierre del menú, mejorando así la UX del usuario en caso de querer volver a la vista anterior.