1 00:00:00,670 --> 00:00:06,920 En este video vamos a ver cómo agregar algunos efectos a las imágenes un efecto más interesante. 2 00:00:08,240 --> 00:00:13,640 Vemos que nuestras imágenes deben estar en escala de grises y están a colores. 3 00:00:13,640 --> 00:00:20,500 Muchas personas lo que hacen es crear dos variantes de una imagen creando dos imágenes las posicionan 4 00:00:20,550 --> 00:00:27,460 arriba del otro composicional solo relativa y cuando dan Jabber ocultan una y muestra en la de abajo. 5 00:00:27,480 --> 00:00:35,910 Ese puede ser un efecto sin embargo quiero mostrarte la forma de hacerlo con CSS y filtros ya sea posicionados 6 00:00:35,910 --> 00:00:42,160 aquí en nuestra imagen y vamos a poner aquí un Filter Rey y este va a ser para versiones de Internet 7 00:00:42,250 --> 00:00:47,930 Explorer cientas con WebKit que es bueno que esto de WebKit. 8 00:00:48,130 --> 00:00:53,980 No habíamos hablado de WebKit a pesar de que ya llevamos buen rato en el curso y esto se les conoce 9 00:00:53,980 --> 00:01:02,860 como prefijos y esto quiere decir que en un navegador que utilice Webkit Engine que sería Chrome Safari 10 00:01:02,860 --> 00:01:11,410 Kronk que todavía lo utiliza le va a agregar los estilos y algunas funciones específicas para ese navegador 11 00:01:12,460 --> 00:01:22,600 si quieres a Mozilla tendrás es hermosa si quieres opera sería buena o en Internet Explorer y o no acuerdo 12 00:01:22,600 --> 00:01:25,450 muy bien de Internet Explorer. 13 00:01:25,450 --> 00:01:32,460 Sin embargo debes tener en cuenta que no todos funcionan en todos los navegadores algunos que sean WebKit. 14 00:01:32,800 --> 00:01:42,040 Tal vez no hay versión para Mozilla y algunos que sean para Mohs tal vez no hay para WebKit así que 15 00:01:42,040 --> 00:01:50,080 vas a poner WebKit Filter y aquí vamos a aplicar el filtro en este caso con el gris iba o escala de 16 00:01:50,080 --> 00:01:57,160 grises si le ponemos un uno recargamos y vemos que nuestras imágenes ya tienen una escala de grises 17 00:01:58,760 --> 00:02:00,610 los filtros son muy poderosos. 18 00:02:00,620 --> 00:02:10,120 Le puedes poner por ejemplo WebKit Filter y hay distintas opciones incluso filtrar nada más para verlas 19 00:02:10,990 --> 00:02:21,720 puedes ver que hay Brines contrasta apropiado Groys que por ejemplo aquí la pusieras Brines y le pones 20 00:02:22,740 --> 00:02:25,340 un 3 recargo. 21 00:02:25,500 --> 00:02:30,100 Vamos que le da a este tipo de efecto o punto 2 22 00:02:33,830 --> 00:02:38,720 distintos que puedes jugar con ellos y hacer que se vea bien. 23 00:02:38,820 --> 00:02:47,450 Tenemos Groys que y esto va a hacer que se vea de esta forma cuando haga el Joker en invitado. 24 00:02:47,450 --> 00:02:51,950 Quiero que mis imágenes vuelvan a color así que puedo copiar esto 25 00:02:54,660 --> 00:03:02,060 y sería si vamos a copiar este aquí y pegarlo y ponerle un cero. 26 00:03:02,060 --> 00:03:09,710 Recargamos y cuando vemos que vuelva a color sin embargo de nuevo es como la parte de aquí arriba en 27 00:03:09,710 --> 00:03:17,240 las que se ve se veía muy aburrido no podremos jugar un poco y agregarle algunas transiciones pero podemos 28 00:03:17,240 --> 00:03:24,620 poner WebKit Transition y ponerle al sol una diferente. 29 00:03:24,640 --> 00:03:34,920 Punto 5 segundos is in out y guardo cámbiese recargo y vemos que le das efecto como que se va coloreando 30 00:03:34,920 --> 00:03:43,950 poco a poco podemos mezclarlo aquí por un WebKit Filter y hay otro que se llama podemos poner aquí WebKit 31 00:03:44,100 --> 00:03:53,580 Transform y poner un coil de 1.1 y recargar y vemos que da ese efecto como un 32 00:03:57,610 --> 00:04:07,220 Transform también hay un Ossama rotativa y podríamos ponerla aquí no es 3D nada más recargar y vemos 33 00:04:07,220 --> 00:04:08,690 que Le dasa como rotacion 34 00:04:14,970 --> 00:04:22,160 así que puedes ponerte muy creativo con este tipo de efectos vamos a dejarlo así en este caso hay algo 35 00:04:22,160 --> 00:04:31,520 más que me gustaría cuando haga Jover en invitado quiero afectar párrafos y puedes ver que en mi selector 36 00:04:31,650 --> 00:04:32,690 ver está antes. 37 00:04:32,700 --> 00:04:35,880 Esto quiere decir que cuando era joven invitado el afectado era este. 38 00:04:35,890 --> 00:04:43,230 MG Cuando era joven invitado el afectado será el párrafo así que estará afectando cuando era joven invitado. 39 00:04:43,260 --> 00:05:00,920 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 40 00:05:00,930 --> 00:05:03,870 cómo desaparece el color del texto 41 00:05:07,360 --> 00:05:14,020 así que aquí podrá ponerle de nuevo la transición transición y lo puedo usar como transición no como 42 00:05:14,020 --> 00:05:21,040 WAP transición cualquiera de las dos está bien puedes copiar pegarlo aquí y recargar y vemos cómo se 43 00:05:21,040 --> 00:05:25,000 hace esa transición de entrada y de salida. 44 00:05:27,140 --> 00:05:32,350 Algo que se vea muy atractivo y pues la mayoría de los clientes le gustan este tipo de efectos. 45 00:05:32,540 --> 00:05:38,180 Que sea un sitio web un poco más interactivo es lo que siempre se busca que no sea aburrido. 46 00:05:38,180 --> 00:05:42,890 Y si hago esto más pequeño vemos que en tamaño 2 se ve bastante bien. 47 00:05:42,890 --> 00:05:50,670 La ventaja de utilizar el enfoque de móvil first es que va quedando todo bien desde el comienzo así 48 00:05:50,670 --> 00:05:56,370 que estamos listos en el siguiente vídeo veremos el siguiente capítulo veremos este contador que va 49 00:05:56,370 --> 00:06:00,990 a decir cuántos invitados hay y cuántos talleres cuántos días y cuántas conferencias. 50 00:06:00,990 --> 00:06:08,190 Veremos la parte de CSS y después veremos con JavaScript cómo hacerlo más atractivo.