Programando PHP: CSS: Filters

Mostrando entradas con la etiqueta CSS: Filters. Mostrar todas las entradas

JQuery: evento enfocar/desenfocar


<!DOCTYPE html>

<html>

<head>

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

 <style>

  .desenfocar { -webkit-filter: blur(3px); }

 </style>

</head>



<body>

 <p><img class="desenfocar esImagen" src="imgAux.jpg"></p>



 <script>

 $(function() {

  $(".esImagen").click(function() {

   if ($(this).hasClass("desenfocar")) {

    $(this).removeClass("desenfocar");

   }

   else {

    $(this).addClass("desenfocar");

   }

  });

 });

 </script>

</body>

</html>

CSS: Filters


<!DOCTYPE html>

<html>

<head>

<style>

.gris { -webkit-filter: grayscale(100%); }

.rotarColors { -webkit-filter: hue-rotate(150deg); }

.sepia { -webkit-filter: sepia(100%); }

.contraste { -webkit-filter: contrast(300%); }

.desenfocar { -webkit-filter: blur(4px); }

.varios { -webkit-filter: grayscale(100%) brightness(-25%) contrast(250%); }

</style>

</head>



<body>

 <p><img class="gris" src="imgAux.jpg"></p>

 <p><img class="rotarColors" src="imgAux.jpg"></p>

 <p><img class="sepia" src="imgAux.jpg"></p>

 <p><img class="contraste" src="imgAux.jpg"></p>

 <p><img class="desenfocar" src="imgAux.jpg"></p>

 <p><img class="varios" src="imgAux.jpg"></p>

</body>

</html>

ccc

JQuery: evento enfocar/desenfocar

CSS: Filters