Hace años era muy típico usar imágenes (gifs) en las pre-cargas de las webs, etc.. para crear ese efecto de «cargando…» A continuación un ejemplo para realizar un efecto loading circular usando solo CSS. En este caso a un solo […]
Es muy común que queramos hacer en css una transición de un determinado height a «auto«. Aclaro que el título del post no es muy apropiado, ya que realmente no se consigue una transición con valor auto en la altura […]
La forma más sencilla de hacer responsive los vídeos de youtube o vimeo en nuestras webs con CSS. Basta con insertar el iframe dentro de un elemento contenedor con las siguientes 2 clases css: .video-responsive { position: relative; margin-bottom: 20px; […]
Vamos a ver con un ejemplo sencillo para conocer bien las diferencias entre estas 2 pseudo-clases de css, y saber utilizarlas correctamente. Antes una corta definición: :nth-child selecciona el elemento que es el secundario de su elemento primario. :nth-of-type selecciona […]
3 formas diferentes de mostrar un texto de «forma vertical» utilizando CSS, utilizando las propiedades writing-mode y word-wrap. 1. Usando vertical-lr: .texto-vertical-1 { writing-mode: vertical-lr; } 2. Usando vertical-lr + rotate: .texto-vertical-2 { writing-mode: vertical-lr; transform: rotate(180deg); } 3. Usando […]
Método para añadir al final del texto 3 puntos suspensivos cuando no hay más espacio en el elemento contenedor, sin utilizar html, php, javascript… solo con CSS. Usando especialmente las propiedades text-overflow:ellipsis (para recortar la cadena con puntos suspensivos) y […]
Formas para cambiar el color (u otro estilo que le queramos dar) al atributo «placeholder» de los input o textarea de nuestros formularios. Por defecto observamos que es de un gris claro. Para cambiar los estilos generales de «todos» los […]
Para crear más de 2 bordes a un objeto la forma más sencilla es la de utilizar la propiedad «box-shadow» de CSS3. Ejemplo de un elemento con 6 bordes (simulando los colores del arco iris) de 5px de grosor: .box{ […]
Para poder entender y diferenciar entre estos 6 tipos (ease, linear, ease-in, ease-out, ease-in-out
Dos formas diferentes de crear un borde interno a un div u otro elemento en CSS. A continuación 2 ejemplos diferentes de borde interior y exterior: A. Usando la propiedad «border» para crear el borde interior, y «outline» para el […]