El filtro invert (invertir) en CSS y alguno de sus posibles usos
- Andrés Cruz
Como ya hemos visto en múltiples entradas, CSS nos sirve para prácticamente todo a lo que se refiera con estilos y podemos crear estilos bastantes curiosos con unas pocas líneas de código CSS y también podemos personalizar mediante filtros nuestros elementos HTML bastantes complejos sin la necesidad de utilizar Photoshop o Gimp o algo que se le parezca; este filtro llamado invert perteneciente a la familia de CSS, permite invertir los colores de una imagen, asi de simple, invierte el canal RGB (o cualquier otro empleado) con apenas una regla CSS; si tenemos una imagen en donde uno de sus colores es negro; es decir:
rgb(0, 0, 0);
Entonces lo que vamos a obtener será un color blanco:
rgb(255, 255, 255);
Por supuesto, lo mismo ocurre con otras escalas de color; por ejemplo, si tenemos un gris suave:
rgb(232, 230, 232);
Entonces lo que conseguimos será un color oscuro:
rgb(23, 25, 23);
En pocas palabras, este filtro lo que hace es restar a 255 el valor de un canal por vez; por ejemplo:
255 - 232 = 23
Recordemos que aparte de este filtro invert o de inversión existen varios filtros que ya tocamos en una anterior entrada:
¿Cómo funciona el filtro invert en CSS?
Recordando su funcionamiento; el filtro consiste en emplear la propiedad invert sobre nuestra imagen:
img {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
filter: invert(100%);
}
Aquí vemos que empleamos el valor de 100%, podemos indicar en qué proporción queremos que se invierten los colores, si dando la vuelta completa, como especificamos anteriormente o en un porcentaje menor.
Por supuesto, existen muchos otros filtro: grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, y invert; pero; en este artículo el filtro de interés es el de inversión.
En esta sección vamos a emplear el filtro en algunos ejemplos para hacernos mejor a la idea como funciona este simple, pero atractivo filtro.
Invirtiendo los colores de nuestras imágenes con el filtro invert
El más simple de todos, consiste en aplicarle la inversión total de todos los colores de nuestra imagen:
img {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
filter: invert(100%);
}
Aunque podemos emplear menos: por ejemplo un 66%:
O un 50%:
O un 25%:
En general, cualquier valor que nosotros consideremos que esté comprendido entre 0 a 100%.
Otro posible uso podría ser activar el filtro de inversión o invert al pasar el cursor por encima de la imagen; y esto lo logramos utilizando el selector :hover.
img:hover {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
filter: invert(100%);
}
Y podemos potenciarlo con las transiciones en CSS que también ya lo hemos tocado antes:
En este ejemplo hemos empleado un filtro invert al 100%, pero ya es cuestión tuya en qué proporción desee emplearlo.
Resaltando ciertos elementos con el efecto invert en CSS
Este tercer ejemplo es un poco más interesante; les mostraremos como crear un simple efecto para invertir los colores sobre cajas de texto (elementos div con algún contenido; textos e imágenes para este ejemplo), o mejor dicho, sus imágenes; estas cajas las llamaremos 'ítems'; básicamente los ítems serán escalados un poquito y se les aplicará el filtro de invert (a las imágenes) para invertir los colores ya visto en los ejemplos anteriores; además usaremos transiciones para 'suavizar' el pasar de un estado a otro y un código jQuery para aplicar la respectiva clase de desenfoque (blur) a ciertos ítems.
La idea es que al colocar el cursor sobre una item (hover), entonces este ítem se escalará a un tamaño un poco mayor; y luego aplicamos el filtro invert mediante una transición a los items no seleccionados; por lo tanto da la sensación de que el ítem está saliendo de su cuadrícula y se eleva encima de los demás con un característico efecto logrado en el que la imagen pase de tener los colores invertidos a tenerlos completamente normales.
Este es el resultado final:
¡Empecemos!
Cuerpo del documento (El HTML)
Un HTML tradicional; tenemos un tag main o principal; dentro de este tag, tendremos nuestros ítems o cajas de texto con algún contenido interesante.
<main class="content">
<article class="item">
<a href="">
<h6>Título</h6>
<p>Texto.</p>
</a>
</article>
<article class="item">
<!-- Mas articulos -->
</article>
</main>
El estilo (El CSS) del contenedor y items
En esta sección explicaremos lo que sería el corazón de nuestro experimento; el CSS en donde definimos el modelos básico y reglas para que luzca como queramos al posicionarnos (hover) encima de los elementos y de aplicar el estilo correspondiente a los elementos no seleccionados que lo enlazamos un poco más adelante con JavaScript.
Contenedor de los items
Con esto, crearemos un contenedor de nos mas de 500px de ancho y centrado; además agregaremos más estilos aunque puedes personalizarlo como quieras; este contenedor tendrá una colección de items a los cuales se les aplicará el filtro invert de CSS:
.content{
max-width:500px;
width:80%;
height:auto;
padding:20px;
background:#CCC;
margin: 0 auto;
}
Cómo estamos empleando contenido flotante, para que sea tomado por su contenedor debemos aplicar un pequeño truco empleando los selectores before y after:
.content:before,
.content:after {
content: "";
display: block;
clear: both;
}
Cajas de texto (Ítems)
Los ítems son sencillas cajas rectangulares con separaciones entre ellas, que se ven disminuidas a raíz de la selección del ítem:
article.item{
padding:5px;
background:#FFF;
width:150px;
height:220px;
margin:0 5px 5px 0;
float: left;
box-shadow: 1px 1px 10px rgba(0,0,0,0.4);
transition:box-shadow 2s, transform 500ms, filter 500ms ease-in-out;
}
En esta parte aplicamos las transiciones (para que todos los efectos incluido los de invert sean progresivos), escalando el contenido un poco mediante el scale(1.05) y le agregamos un poco de sombra al ítem; todo esto mediante el evento hover.
article.item:hover{
transform: scale(1.05);
box-shadow: 3px 3px 10px rgba(0,0,0,0.6);
}
Como mencionamos antes, hay otra transición y cambio de estados en los elementos que no han sido seleccionados, a estos son los que le aplicamos un poco de Blur y el filtro invert o para invertir los colores al 100%; además de que escalamos para hacerlos un poco más pequeños como mostramos a continuación:
article.blur{
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
filter: invert(100%);
transform: scale(0.95);
}
Los demás estilos son de fácil compresión y por lo tanto obviamos su explicación; ahora, el JavaScript.
El JavaScript de los Items para invertir los colores de los items de-seleccionados
var item = $(".item");
// agrego la clase blur a todos los 'ítem' que NO sea al que le se le esta aplicando el evento 'hover'
item.hover(function() {
item.not($(this)).addClass('blur');
// al perder el foco, retiro la clase a todos los 'item'
}, function() {
item.removeClass('blur');
});
El JavaScript anterior solo se encarga de buscar el resto de los elementos que no han sido seleccionados y aplicamos un estilo, aquí es un buen ejemplo de que hay cosas que con CSS son imposibles o muy difíciles de hacer; es decir, como creo que es difícil de aplicar lo anterior mediante un selector, entonces lo hacemos con JavaScript; aplicamos una clase que llamamos "blur" a los ítems que no fueron seleccionados y también aplicamos el filtro invert y se la quitamos cuando no exista elemento seleccionado.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter