Método sencillo para convertir cualquier foto/imagen en blanco y negro (escala de grises) usando la propiedad «filter» de css sin tener que usar photoshop u otro programa similar: img{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } Con este filtro se fuerza al […]
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: input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px #fff […]
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 […]
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 […]
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: .triangulo-redondeado, .triangulo-redondeado:before, .triangulo-redondeado:after { position: relative; […]
Un ejemplo de como voltear horizontalmente una foto o otro elemento con css usando scaleX(-1) con la propiedad transform. .rota-horizontal{ transform: scaleX(-1); } Un ejemplo: See the Pen CSS: rotar horizontalmente una imagen by Jorge Maiden (@jorgemaiden) on CodePen.
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: […]
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 […]
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 […]
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 […]