Ja no cal ser un expert en Photoshop o altres programes d'edició per afegir filtres i efectes a les vostres imatges, ja que ja és possible modificar-les utilitzant codis HTML.
Aquestes modificacions han de realitzar amb cura, és a dir, no cal carregar les imatges d'efectes perquè aquests siguin útils i no siguin incòmodes a la vista. De moment aquests efectes només funcionen a la perfecció a Google Chrome, però s'espera que en els propers mesos també funcioni a la resta de navegadors.
Aplicar filtres a les imatges amb CSS
La primera (segona en realitat, després de les transicions) propietat que et vull mostrar és Filtrar, que ens permet aplicar diferents filtres a les imatges sense necessitat de passar per Instagram 😉
Aquí hi ha alguns (hi ha més) amb el corresponent codi, vés passant el ratolí per sobre per apreciar-los:
desenfocament
| | .imagen:hover {filter: blur(5px);} |
Escala de grisos
| | .imagen:hover {filter: grayscale(80%);} |
el valor .grayscale pot prendre qualsevol quantitat entre 0 i 100%, establint diferents nivells de color.
Sèpia
| | .imagen:hover {filter: sepia(60%);} |
Igual que amb el filtre anterior, li pots donar més o menys intensitat ajustant el percentatge.
saturació
| | .imagen:hover {filter: saturate(180%);} |
Aquest cop és diferent: 100% és la saturació original de la imatge. Els valors per sobre aconseguiran una imatge sobresaturada, i per sota aquest valor la imatge mostra menys saturació de l'habitual.
Transparència
| | .imagen:hover {filter: opacity(.5);} |
Tot i que he posat transparència és en realitat al revés, ja que el que s'especifica és l'opacitat: 1 és totalment opac (valor per defecte) i 0 totalment transparent.
Transformacions i animacions
Hi ha molts més filtres, però passarem a alguna cosa amb més… animació. 🙂
CSS3 proveeix també una sèrie d'efectes que imprimeixen moviment a les imatges, transformant-les i animant-les. Combinant-les, a més, es poden aconseguir efectes espectaculars. Alguns impliquen utilitzar un contenidor, un div que conté la imatge, i que definiré amb la classe .contenidor.
Zoom i canvis de mida
| | .contenedor:hover .imagen {-webkit-transform:scale(1.3);transform:scale(1.3);} .contenedor {overflow:hidden;} |
En realitat, com veus, és escalar la imatge a una mida més gran (multiplicar-ho per 1.3 en aquest exemple) però establint un contenidor que oculta tot el que surt de la mida original (gràcies al overflow:hidden). Amb un escalat d'aquest tipus sense contenidor aconseguim una imatge que s'engrandeix:
i, si fem servir un valor per escala menor que 1, una imatge que es contrau:
Girs i rotacions
Aquest és força cridaner:
Com veus, he fet servir aquesta vegada una imatge quadrada. És important quan aquest tipus defecte es dispara amb un surar, ja que si poses el punter a la vora i en girar la imatge surt de sota el punter, tornarà al seu lloc, trobant-hi de nou el punter i… en fi, entra en un bucle molt poc agradable visualment.
| | .imagen:hover {-webkit-transform: rotate(360deg);transform: rotate(360deg);} |
Ja imaginaràs que pots utilitzar qualsevol valor que vulguis en graus per girar, entre 0 i infinit. Valors per sobre de 360 faran més d'una volta com a resultat. Però no et passis, si poses per exemple 3600 la imatge donarà deu voltes completes cada vegada que li posin el ratolí a sobre. Quin mareig!
I, per acabar amb els girs, a veure què et sembla aquest:
| | .imagen:hover { -webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform: rotateY(180deg); transform-style: preserve-3d;} |
