En este video vamos a ver cómo agregar algunos efectos a las imágenes un efecto más interesante.
Vemos que nuestras imágenes deben estar en escala de grises y están a colores.
Muchas personas lo que hacen es crear dos variantes de una imagen creando dos imágenes las posicionan
arriba del otro composicional solo relativa y cuando dan Jabber ocultan una y muestra en la de abajo.
Ese puede ser un efecto sin embargo quiero mostrarte la forma de hacerlo con CSS y filtros ya sea posicionados
aquí en nuestra imagen y vamos a poner aquí un Filter Rey y este va a ser para versiones de Internet
Explorer cientas con WebKit que es bueno que esto de WebKit.
No habíamos hablado de WebKit a pesar de que ya llevamos buen rato en el curso y esto se les conoce
como prefijos y esto quiere decir que en un navegador que utilice Webkit Engine que sería Chrome Safari
Kronk que todavía lo utiliza le va a agregar los estilos y algunas funciones específicas para ese navegador
si quieres a Mozilla tendrás es hermosa si quieres opera sería buena o en Internet Explorer y o no acuerdo
muy bien de Internet Explorer.
Sin embargo debes tener en cuenta que no todos funcionan en todos los navegadores algunos que sean WebKit.
Tal vez no hay versión para Mozilla y algunos que sean para Mohs tal vez no hay para WebKit así que
vas a poner WebKit Filter y aquí vamos a aplicar el filtro en este caso con el gris iba o escala de
grises si le ponemos un uno recargamos y vemos que nuestras imágenes ya tienen una escala de grises
los filtros son muy poderosos.
Le puedes poner por ejemplo WebKit Filter y hay distintas opciones incluso filtrar nada más para verlas
puedes ver que hay Brines contrasta apropiado Groys que por ejemplo aquí la pusieras Brines y le pones
un 3 recargo.
Vamos que le da a este tipo de efecto o punto 2
distintos que puedes jugar con ellos y hacer que se vea bien.
Tenemos Groys que y esto va a hacer que se vea de esta forma cuando haga el Joker en invitado.
Quiero que mis imágenes vuelvan a color así que puedo copiar esto
y sería si vamos a copiar este aquí y pegarlo y ponerle un cero.
Recargamos y cuando vemos que vuelva a color sin embargo de nuevo es como la parte de aquí arriba en
las que se ve se veía muy aburrido no podremos jugar un poco y agregarle algunas transiciones pero podemos
poner WebKit Transition y ponerle al sol una diferente.
Punto 5 segundos is in out y guardo cámbiese recargo y vemos que le das efecto como que se va coloreando
poco a poco podemos mezclarlo aquí por un WebKit Filter y hay otro que se llama podemos poner aquí WebKit
Transform y poner un coil de 1.1 y recargar y vemos que da ese efecto como un
Transform también hay un Ossama rotativa y podríamos ponerla aquí no es 3D nada más recargar y vemos
que Le dasa como rotacion
así que puedes ponerte muy creativo con este tipo de efectos vamos a dejarlo así en este caso hay algo
más que me gustaría cuando haga Jover en invitado quiero afectar párrafos y puedes ver que en mi selector
ver está antes.
Esto quiere decir que cuando era joven invitado el afectado era este.
MG Cuando era joven invitado el afectado será el párrafo así que estará afectando cuando era joven invitado.
El P Y el y MG aquí quiero ponerle un borrón de al menos 80 píxeles yo no pase de cero cambios y vemos
cómo desaparece el color del texto
así que aquí podrá ponerle de nuevo la transición transición y lo puedo usar como transición no como
WAP transición cualquiera de las dos está bien puedes copiar pegarlo aquí y recargar y vemos cómo se
hace esa transición de entrada y de salida.
Algo que se vea muy atractivo y pues la mayoría de los clientes le gustan este tipo de efectos.
Que sea un sitio web un poco más interactivo es lo que siempre se busca que no sea aburrido.
Y si hago esto más pequeño vemos que en tamaño 2 se ve bastante bien.
La ventaja de utilizar el enfoque de móvil first es que va quedando todo bien desde el comienzo así
que estamos listos en el siguiente vídeo veremos el siguiente capítulo veremos este contador que va
a decir cuántos invitados hay y cuántos talleres cuántos días y cuántas conferencias.
Veremos la parte de CSS y después veremos con JavaScript cómo hacerlo más atractivo.