CSS

A continuación un ejemplo de animación para conseguir en CSS3 un efecto de bola o circulo girando de forma circular indefinidamente: .contenedor-circulo{ width:250px; height: 250px; margin:0 auto; text-align:center; background: #E5E5E5; border-radius:50%; } .circulo { display:inline-block; width: 50px; height: 50px; margin-top: […]

Leer más...

Algo muy sencillo que me ha preguntado más de un compañero. Si necesitas seleccionar los últimos «n» elementos puedes usar los selectores nth-last-child() y nth-last-of-type() de CSS3. Un ejemplo muy simple para que veais el funcionamiento. Vamos a seleccionar los […]

Leer más...

Para conseguir el efecto de invertir colores a un elemento o imagen usamos la propiedad «filter» con el valor «invert» aplicando el % de fuerza que queramos. Funciona tanto con elementos con estilos de color sólidos, imágenes y svg. Estos […]

Leer más...

Supongamos que haces una animación en CSS3 y quieres que al finalizar se mantenga en el último fotograma o keyframe de la animación. Por defecto en las animaciones css una vez finaliza la animación, el elemento es restaurado de nuevo […]

Leer más...

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: .video-responsive { position: relative; margin-bottom: 20px; […]

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: .texto-vertical-1 { writing-mode: vertical-lr; } 2. Usando vertical-lr + rotate: .texto-vertical-2 { writing-mode: vertical-lr; transform: rotate(180deg); } 3. Usando […]

Leer más...