CSS

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 […]

Leer más...

Es muy común que queramos hacer en css una transición de un determinado height a “auto“. Por ejemplo, en función del alto que ocupe un elemento que tenga unos textos. En el siguiente ejemplo vemos lo que pasa, y podemos […]

Leer más...

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: pd: el porcentaje de 56.25% sale […]

Leer más...

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 […]

Leer más...

CSS3: Texto vertical

3 formas diferentes de mostrar un texto de “forma vertical” utilizando CSS, utilizando las propiedades writing-mode y word-wrap. 1. Usando vertical-lr: 2. Usando vertical-lr + rotate: 3. Usando break-word: Demo: See the Pen WQayvJ by Jorge Maiden (@jorgemaiden) on CodePen.

Leer más...

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 […]

Leer más...

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: Síntaxis […]

Leer más...

CSS: borde interior

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 […]

Leer más...