CSS

En chrome si tienes el “auto-completado” activado te añade unos estilos diferentes cambiando los input a un background amarillo (#F9FFBD) y texto negro. A.1. Para cambiar el color del background:

A.2. Para cambiar el color de texto:

B. […]

Leer más...

Código css para crear un background con líneas diagonales sin utilizar imágenes usando la función repeating-linear-gradient. Puedes editar el código css a tu gusto y conseguir ese efecto cebra que desees para crear las líneas de más o menos grosor […]

Leer más...

Es posible dar estilos css a elementos HTML que tienen unos determinados atributos o valores de atributos. La sintaxis css de uso basicamente es: [atributo operador “valor”] A continuación unos ejemplos de uso con los diferentes operadores para comprender mejor […]

Leer más...

Todo un clásico de css. Quien no ha maquetado algún triángulo y ha querido aplicarle el efecto “redondeado” a los bordes. A continuación una forma de hacerlo jugando con rotate, skewX, scale y translate:

Ejemplo: See the Pen Triángulo […]

Leer más...

Un ejemplo de como voltear horizontalmente una foto o otro elemento con css3 usando scaleX.

Para IE aplicamos el filtro FlipH. Un ejemplo: See the Pen CSS: rotar horizontalmente una imagen by Jorge Maiden (@jorgemaiden) on CodePen.

Leer más...

A continuación un ejemplo de animación para conseguir en CSS3 un efecto de bola o circulo girando de forma circular indefinidamente:

Resultado:

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...