Cómo aplicar bordes a los elementos HTML
Ya sabemos que todos los elementos HTML son interpretados por el navegador como una caja. Dicha caja está compuesta por 4 bordes no visibles por defecto. Para que un borde…
Crear un efecto Flip card con CSS3
Hoy veremos comon crear un efecto “Flip card”, que consite en colocar contenido en la parte frontal y trasera de un elemento. Por ejemplo, imagina que tenemos un contenedor cuya…
Cómo crear un botón con ícono de carga animado
En este tutorial te mostraré como crear un “loading button” o botón con ícono animado utilizando CSS3. Voy a asumir que sabes agregar un ícono dentro de un elemento HTML,…
Crear un ícono de menú de barras con CSS3 y JavaScript
En este post te voy a mostrar como crear un ícono de menú de barras para dispositivos móviles, utilizando CSS3 y JavaScript. Normalmente, cuando deseamos añadir este tipo de icono…
Cómo crear un buscador animado con CSS3
En este tutorial veremos como crear una caja de búsqueda con efecto de animación, utilizando CSS3. Básicamente, lo que vamos a hacer es crear un buscador que aumentará de tamaño…
Aplicar márgenes y relleno en CSS
En este artículo vamos a conocer como aplicar márgenes y espaciado interno mediante las propiedades margin y padding que junto con las propiedades width y border determinan la anchura y…
Cómo crear un spinner loader con CSS3
Un spinner loader es un elemento animado que se utiliza mucho en el diseño web actual y sirve para indicar a los usuarios de un sitio web que que un…
Cómo crear bordes redondeados con CSS
En este artículo vamos a conoce como crear bordes con esquinas redondeadas, una característica que se introduce a partir de CSS3 y que en pasado sólo era posible de lograr…
Cómo centrar un elemento horizontal y verticalmente con Flexbox
En este post te voy a mostrar como puedes centrar cualquier elemento en los ejes X y Y mediante algunas propiedades de Flexbox. Para este ejemplo vamos a crear un…
Curso de Diseño Web: HTML y CSS desde cero hasta avanzado
Aprende paso a paso las técnicas para diseñar páginas web profesionales. Crea 3 proyectos del mundo real.