0

Transforma fotografías en tu web sin necesitar Photoshop

NORMAL

Para hacer que las imágenes de tu web aparezcan con ciertos efectos de color, no es necesario que seas un experto en programas de edición de fotografías porque hoy en día es posible modificar tus fotografías fácilmente por medio de HTML o de CSS3. En este post, te vamos a enseñar a modificar fotografías sin PhotoShop. ¿Te animas?

.

El uso de efectos fotográficos debe realizarse con cautela. Es decir, sin abusar para que sean efectivos y útiles a la hora de mejorar la experiencia de navegación del usuario..

.

Por el momento los siguientes efectos solo funcionan al 100% en el navegador Google Chrome, pero a lo largo del tiempo, se irán implementando en los demás navegadores. Para que te vayas haciendo una idea, los prefijos según el navegador son los siguientes.

Código:

webkit-filter —> Chrome y Safari
moz-filter —> Mozilla
ms-filter —> Internet Explorer
o-filter —> Opera

.

Efecto Escala de Grises

Código HTML:

<figure id=“escala_grises”>    

<img src=“imagen.jpg” class=“grayscale” alt=“”>

</figure>

Código CSS3:

figure .grayscale{  

-webkit-filter: grayscale(70%);

}

GRIS-1
.

Efecto Sepia

Código HTML:

<figure id=“sepia”>    

<img src=“imagen.jpg” class=“sepia” alt=“”>

</figure>

Código CSS3:

figure .sepia{  

-webkit-filter: sepia(80%);

}

SEPIA
.

 

 

Efecto Desenfoque

Código HTML:

<figure id=“desenfoque”>  

<img src=“imagen.jpg” class=“blur” alt=“”>

</figure>

Código CSS3:

figure .blur{  

-webkit-filter: blur(1.3px);

}

DESENFOCADA
.

 

 

Efecto Contraste

Código HTML:

<figure id=“contraste”>  

<img src=“imagen.jpg” class=“contrast” alt=“”>

</figure>

Código CSS3:

figure .contrast{  

-webkit-filter: contrast(1.3);

}

CONTRASTE
.

 

 

Efecto Brillo

Código HTML:

<figure id=“brillo”>  

<img src=“imagen.jpg” class=“brightness” alt=“”>

</figure>

Código CSS3:

figure .brightness{  

-webkit-filter: brightness(1.5);

}

BRILLO
.

Efecto Opacidad

Código HTML:

<figure id=“opacidad”>    

<img src=“imagen.jpg” class=“opacity” alt=“”>

</figure>

Código CSS3:

figure .opacity{  

-webkit-filter: opacity(30%);

}

Los porcentajes significan que un 0% sería totalmente transparente y un 100% no tendría ninguna transparencia.

.

OPACIDAD
.

 

 

Efecto Saturación

Código HTML:

<figure id=“saturacion”>    

<img src=“imagen.jpg” class=“saturate” alt=“”>

</figure>

Código CSS3:

figure .saturate{  

-webkit-filter: saturate(7);

}

SATURACIÓN
.

Efecto Inversión de color

Código HTML:

<figure id=“inversion”>    

<img src=“imagen.jpg” class=“invert” alt=“”>

</figure>

Código CSS3:

figure .invert{  

-webkit-filter: invert(80%);

}

INVERSIÓN
.

Cómo combinar más de un efecto en CCS3

Todos los efectos pueden combinarse entre sí, pero para ello dicha combinación tiene que realizarse en una sola línea de código y de forma consecutiva.

.

Por ejemplo, para que una imagen esté desenfocada y también esté en la escala de grises debes escribir:

Código:
figure .combinacion{  

-webkit-filter: grayscale(80%)  blur(2px);

}

COMBINACION
.

Para que el cógido sea correcto, debes poner todos los valores consecutivamente (no es necesario separarlos por comas).

.

Efectos de color en vídeos

¿Sabías que también puedes añadir efectos de color a tus vídeos? Además, también es posible combinar entre ellos los efectos vistos anteriormente. Por último, un ejemplo para aumentar la saturación y el brillo de tus vídeos:

Código HTML:

<video controls width=“570” height=“321” class=“video-filter” id=“video”>    

<source src=“video.mp4” video/mp4; codecs=“avc.h264,avc.42E01E,mp4a.40.2”/>

</video>

 

Código CSS3:

.video-filter{      

-webkit-filter: saturate(6) brightness(0.5);

}

.

Y tú, ¿cómo retocas las imágenes de tu web? Puedes dejar un comentario o decírnoslo en Twitter o en Facebook.

Host Europe

Host Europe

Host Europe es más que un proveedor de hosting y dominios. Nos ganamos tu confianza día a día gracias a años de experiencia y el mejor servicio.

More Posts

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *