No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

脥conos y manejo de background hover

13/18
Recursos

Continuemos a帽adiendo estilos a nuestro input. A煤n tenemos que incrustar y posicionar los 铆conos de lupa y micr贸fono, adem谩s del bonito efecto de sombra al poner el cursor encima. Esto no se va a lograr solo, as铆 que vamos a abrir nuestro archivo CSS justo donde nos quedamos.

C贸mo a帽adir el efecto hover

  1. Llamamos la etiqueta contenedora del input con el pseudo-elemento hover. Es decir, los dise帽os con hover que apliquemos solo se mostrar谩n cuando coloquemos el cursor encima del elemento.
  2. Con box-shadow: 0 1px 6px 0 #20212447 agregamos una sombra paralela con un color en tono oscuro.
  3. Con border-color: #dfele500 a帽adimos un borde m谩s oscuro, es decir, resalta m谩s como el input original.
13.1.png

C贸mo agregar 铆conos

Vamos a agregar dos 铆conos: el de lupa y el de micr贸fono.

Pasos para agregar el 铆cono de lupa

  1. Primero, llamamos la clase .search-icon desde nuestra clase .main input.
  2. A帽adimos un background-image e insertamos la url del 铆cono entre comillas. Te dejo el enlace: 鈥https://cdn0.iconfinder.com/data/icons/google-material-design-3-0/48/ic_search_48px-512.png鈥.
  3. background-repeat: no-repeat para evitar que el navegador repita la imagen por rellenar espacio.
  4. background-position: center para centrarlo.
  5. background-size: contain para que tome el tama帽o del contenedor padre.
  6. A帽adimos un width: 18px y un height: 18px para redimensionar el 铆cono.
13.2.png

Pasos para agregar el 铆cono de micr贸fono

  1. Llamamos la clase .micro-icon desde n***uestra clase .main input***.
  2. Copiamos el c贸digo de arriba y cambiamos la url del 铆cono de micr贸fono. Te dejo el enlace: 鈥https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/726px-Google_mic.svg.png鈥.
    • A帽adimos cursor: pointer para que el cursor adopte la forma de la manita al colocarlo sobre el 铆cono.
13.3.png

Deber铆amos tener renderizado en nuestro navegador algo como esto:
image.png

驴Ya la ves muy parecida? Apuesto a que s铆. Pero no hemos terminado, por lo que vamos a centrarnos en los botones de abajo en la siguiente clase.

Contribuci贸n creada con aportes de: Jos茅 Miguel Veintimilla.

Aportes 235

Preguntas 54

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Les dejo los iconos iguales a los que usa Google, ya que la lupa que ponen en esta clase es un poco diferente:
Search = https://cdn0.iconfinder.com/data/icons/google-material-design-3-0/48/ic_search_48px-512.png
Micro = https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/726px-Google_mic.svg.png

para que el icono de search tome el tono gris pueden usar opacity: .45;

Si tienen la lupa de color negro, les tengo un truco 馃槈
En la clase que la contiene, ponen lo siguiente

opacity: 0.4;

Lo que hace es ajustar la opacidad del elemento, siendo 1 el 100% y 0 el 0% (Por lo que 0.4 es el 40%)
El resultado se ver铆a as铆

Aqu铆 va un peque帽o aporte con respecto a la propiedad Box-Shadow seg煤n las notas que pude tomar investigando en internet.
En nuestro ejercicio se coloc贸 鈥box-shadow: 0 1px 6px 0 #20212447;鈥 el cual se lee de la siguiente manera:
Position X : Es el primer valor especificado (En nuestro caso es 0), mientras m谩s alto sea el valor que se especifique, mas a la derecha se posicionar谩 la sombra. Acepta valores negativos los cuales posicionar谩n la sombra del lado izquierdo.
Position Y : Es el segundo valor especificado (En nuestro caso es 1px), mientras m谩s alto sea el valor que se especifique, mas hacia abajo se posicionar谩 la sombra. Acepta valores negativos los cuales posicionar谩n la sombra del lado superior.
Blur : Es el tercer valor especificado (En nuestro caso es 6px), cuanto mayor sea el valor, mayor sera la difuminaci贸n de la sombra. 脡ste no acepta valores negativos.
Spread : Es el cuarto valor especificado (En nuestro caso es 0), los valores positivos har谩n que la sombra se expanda, 茅ste si acepta valores negativos los cuales har谩n que la sombra reduzca su tama帽o.
Color : Es el quinto valor especificado (En nuestro caso es el valor 20212447), simplemente es el color que se le otorgar谩 a la sombra.
S铆 desean pueden usar esta herramienta para visualizar como afecta cambiar los valores con relaci贸n a como se visualizar谩 la sombra: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
S铆 esta informaci贸n les fue de utilidad por favor denle like al comentario para que m谩s compa帽eros tambi茅n puedan verlo 馃槃

Refactorizando un poco

main .main-input .search-icon,
main .main-input .micro-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 18px;
    height: 18px;
}

main .main-input .search-icon {
    background-image: url(' https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png');
}

main .main-input .micro-icon {
    cursor: pointer;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png');
}

For remember

Una palabra clave para encontrar im谩genes con el fondo transparente es vector.
vector de search
vector de micr贸fono google

Pueden modificar la sombra de una forma m谩s visual si van a la propiedad box-shadow en la herramienta de inspector de elementos.

馃敟馃敟馃敟Aqu铆 les dejo los enlaces de los icons馃敟馃敟馃敟
Buscador
Micr贸fono

Cuando el profe dice pseudoelemento, en realidad se refiere :hover como pseudoclase

驴Qu茅 son las pseudo-clases?
Una pseudoclase se usa para definir un estado especial de un elemento.

Por ejemplo, se puede usar para:

  • Dise帽e un elemento cuando un usuario pase el mouse sobre 茅l
  • Estilo de enlaces visitados y no visitados de manera diferente
  • Dale estilo a un elemento cuando se enfoca

Aporte de box-shadow

驴Que es mejor pr谩ctica?
*Almacenar las im谩genes en una carpeta e invocarlas desde all铆
*Copiar enlaces de im谩genes subidas en la web

URLs de los 铆conos

#20212447 de color hexadecimal, se le escapo los ultimos dos digitos. sobran

Para que no tengan que duplicar el c贸digo del micr贸fono y search, recomiendo hacer lo siguiente:

main .main-input .search-icon,
.micro-icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 18px;
  height: 18px;
}
main .main-input .search-icon {
  background-image: url("https://img.icons8.com/android/24/000000/search.png");
}
main .main-input .micro-icon {
  background-image: url("https://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png");
  cursor: pointer;
}

De esta forma, las propiedades que aplican a ambos, las escriben una sola vez, como por Ej: el ancho y alto, etc, pero la propiedad 煤nica como la url de la imagen si la separan. Es c贸digo resumido y un poco m谩s limpio.

Si quieren iconos, logos o im谩genes transparentes cuando busquen una imagen pueden hacer lo siguiente:

  1. Seleccionan tools(herramientas)
  2. Les aparecer谩 un men煤, seleccionan en que dice color
  3. Luego seleccionan la opci贸n de Transparente

    Les saldr谩 todas las im谩genes con fondos transparentes o en PNG espero les sirva mucho, ya que a mi si me a ayudado 馃槃

Veo que para esto de ser frontend debes ser muy observador en los detalles. No se si ser茅 el unico pero esa linea de color mas obscura en el borde al hacer el hover para mi fue imperceptible

Me pregunto por que no utilizo iconos de fuentes , como los ofrece la pagina fontawesome por ejemplo, bueno cada quien tiene su estilo supongo.

Para que no aparezca tan r谩pido la sombra le ponen el atributo
transition: 200ms all;

Si a alguien le surge el error al agregar los iconos del micr贸fono y la lupa que no se muestran y se les rompe el input, les comparto el error que yo hab铆a cometido en el HTML. Espero les sirva.
Error:

Soluci贸n:

para los que no encuentran las imagenes se puede copiar el url de como lo isimos en la clase de el icono de el nav :3 suerte y lindo dia

Le agregue el efecto hover que tiene el icono men煤 y la foto de perfil

tengo un problema, los iconos del micr贸fono y la lupa no se muestran y se me rompe el input

En realidad la lupa si tiene una funci贸n. Creo que en realidad es un label, ya que en la p谩gina original de Google, al darle click a la lupa, autom谩ticamente el input se inicia y espera que escriban en 茅l.

No es necesario volver utilizar el cursor: pointer ya que se hicieron estilos generales de los enlaces
.

As铆 va hasta el momento 馃憖

Icono de Google Lend para quien haga el curso con las nuevas actualizaciones de Google Chrome
Link PNG Google Lend

Hola les quer铆a recordar que la gran mayoria de veces las imagenes de una pagina vienen de un source externo por lo que podemos simplemente copiar ese source y utilizarlo:

Utilizmos el inspector con la imagen que necesetimos:

Eso nos mostrara la estructura html de la imagen incluyendo el atributo source/src:

Si colocamos el click sobre source nos desblegara una peque帽a ventada que nos dara informacion sobre la imagen inlcuyendo el source:

si hacemos click sobre el curret source nos abrira una venta aparte que solo contiene la imagen:

podemos copiar la direccion de la pagina y utilizarla:

Solo queria aportar que se puede optimizar el este codigo que no tener que repetir esta parte:

main .main-input .search-icon {
	background-image: url(' ');
	background-repeat: no-repeat;
	background-position: center;
	background-size:contain;
}

main .main-input .micro-icon {
	background-image: url(' ');
	background-repeat: no-repeat;
	background-position: center;
	background-size:contain;
}

Podriamos optimizarlos as铆

main .main-input .search-icon,
main .main-input .micro-icon  {
	background-image: url(' ');
	background-repeat: no-repeat;
	background-position: center;
	background-size:contain;
}

main .main-input .micro-icon {
	cursor:pointer;
} 

hoy aprendo que se puede poner al alfa en los colores hexadecimales agregando 2 d铆gitos, vientos, eso es nuevo

Hago una cr铆tica a la falta de documentaci贸n en archivos y enlaces. Ya que si hubieran estado los enlaces de cada <img> nos habr铆a AHORRADO la b煤squeda en Google. Eso a la ve hubiera optimizado el tiempo del alumno y poner foco en lo que realmente importa.

me perdi, como hicimos para que cada icono se quede en su parte que corresponde (uno en cada esquina)?

Paso a paso de la clase:

___
_________
________
_________
______
______
_________
________
______
________
________

驴CUANDO USAR ETIQUETA HTML img vs PROPIEDAD CSS background-image?

Tomado del siempre confiable stackoverflow(https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image/492834#492834):

Usos adecuados de IMG

  • Usa img si buscas que la gente imprima tu p谩gina y quieres que la imagen se incluya por defecto.

  • Usa img (con texto alt) cuando la imagen tenga un significado sem谩ntico importante, como un icono de advertencia. Esto garantiza que el significado de la imagen pueda ser comunicado a todos los usuarios, incluidos los lectores de pantalla.

Usos pragm谩ticos de IMG

  • Usa img mas el atributo alt si la imagen forma parte del contenido, como un logotipo, un diagrama o una persona (una persona real, no una foto de archivo).

  • Usa img si conf铆as en el escalado del navegador para renderizar una imagen en proporci贸n al tama帽o del texto.

  • Usa img para las im谩genes superpuestas m煤ltiples en IE6.

  • El uso de img en lugar de background-image puede mejorar dr谩sticamente el rendimiento de las animaciones sobre un fondo.

Cu谩ndo usar CSS background-image

  • Usa CSS background-image si la imagen no es parte del contenido. -sanchothefat

  • Usa background-image CSS cuando se hace un reemplazo de imagen de texto, por ejemplo, p谩rrafos/encabezados.

  • Usa background-image si quieres que la gente imprima tu p谩gina y no quieres que la imagen se incluya por defecto.

  • Usa background-image si necesitas mejorar los tiempos de descarga, como con los sprites CSS.

  • Usa background-image si necesitas que s贸lo una parte de la imagen sea visible, como con los sprites CSS.

  • Usa background-image con background-size:cover para estirar una imagen de fondo hasta llenar toda su ventana.

Imagen de microfono:
https://upload.wikimedia.org/wikipedia/commons/e/e8/Google_mic.svg
icono de lupa:
data:image/png;base64,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

Creo que es mejor usar los archivos en formato SVG

  • SVG micro
<svg class="HPVvwb" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z" fill="#4285f4"></path>
  <path d="m11 18.08h2v3.92h-2z" fill="#34a853"></path>
  <path d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z" fill="#f4b400"></path>
  <path d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z" fill="#ea4335"></path>
</svg>
  • SVG lupa
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
</svg>

La sombra para el Hover

main .main-input-container:hover {
    box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
    border-color: rgba(223,225,229,0);
}

para los que no les sale los 铆conos porque quieren hacer casi todo por su cuenta, recuerden el display:flex en el div que contiene la lupa, el input y el micr贸fono

El Icono de Lupa es mejor este, me parece m谩s: https://fedehr.github.io/google-homepage/lupa.png Lupa de Google

En el minuto 4:20, dandole estilo a la clase .main-container:hover 驴Por qu茅 el color del box-shadow tiene m谩s de 6 n煤meros (#20212447)?

Paso el link de un simulador de sombras, muy bueno lo recomiendo mucho
https://www.cssmatic.com/es/box-shadow

Sombra de google:
box-shadow: 0 1px 6px rgba(32,33,36,.28);
border-color: rgba(223,225,229,0);

estupendo 馃槃 muy bien se aprende demasiado

hola , buen dia
mi pregunta es la siguiente, yo pensaba que los colores hexadecimales solo eran con 6 digitos , se pueden colocar mas de 6 como en el ejemplo de hover del inputP??? o es en ocasiones especiales??

main .main-input-container:hover{
    box-shadow: 0 1px 6px 0 #20212447;
    border-color: #dfe1e500;
}

main .main-input .search-icon{
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon_svg.png') ;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 18px;
    height: 18px;
}

main .main-input .micro-icon{
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/726px-Google_mic.svg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 18px;
    height: 18px;
    cursor: pointer;
}```

Box-shadow se aplica en el hover para dar sombreado al momento de pasar el cursor por encima del boton

Gracias por la explicaci贸n!

Google personalizado.

Hover no es un pseudoelemento, Hover es una pseudoclase!!!

Hover no es un pseudoelemento, es una pseudoclase鈥

Un buen lugar para 铆conos es Flaticon

隆He ah铆 el avance!

Pueden conseguir iconos en vectores svg y png en sitios como: https://www.iconfinder.com/

Asi me va quedando. Saludos de Argentina!

En vez de escribir todo esto:

    background-image: url('');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

Lo pueden hacer con el shorthand 鈥渂ackground鈥, el cual acepta estos mismos valores con otros, pero NO acepta el background-size, el cual deben escribir en otra l铆nea. Tomando en cuenta el ejemplo anterior quedar铆a de esta manera:

background: url('') no-repeat center;
background-size: contain;

Solo deben tomar en cuenta el orden con el que declaran los valores, el cual es el siguiente:

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

No es necesario escribir siempre todos, como vimos en el ejemplo se saltan algunos como

background-attachment

Entonces lo hace m谩s f谩cil de usar.

Tama帽os seg煤n google:
lupa 20 x 20px
micr贸fono 24 x 24px

Tuve un problema con mi navegador, como ten铆a abierto el dev tools, no se aplicaba mi hover effect a pesar de estar bien escrito. Para que funcionara us茅 ctrl+shift+M, es un bot贸n como un cuadrado junto a un cuadrado m谩s grande.
Eso o cerrar dev tools solucion贸 mi problema.
Saludos, espero haber ayudado a alguien.

A mi criterio, no es necesario agregarle dentro de micro-icon la propiedad de

cursor: pointer;

porque ya habiamos agregado esa propiedad a nivel general para todas las

a{
    text-decoration: none;
    cursor: pointer;
}


Un peque帽o error que me sucedi贸, pero que quisiera compartir por si de pronto a alguien le sucede:

El Hover no me sal铆a en toda la caja y al ver el c贸digo en CSS aparentemente estaba bien鈥

main .main-input-container :hover {
  box-shadow: 0 1px 6px 0 #20212447;
}

pero si se fijan el :hover est谩 separado de la clase y aunque parece tonto, como principiante son cosas que no se ven a simple vista, ni se entienden y la soluci贸n es simplemente unir la clase con el hover sin espacio.

Eso de que un punto, un espacio o una letra puede da帽ar todo el c贸digo es cierto jeje de ac谩 aprendo a ir afinando el ojo a estos peque帽os errores 馃槈

No s茅 si m谩s adelante lo arreglan, pero para que el texto en nuestro input y los 铆conos de los costados no se toquen, lo que hice fue achicar un poco el input y ponerle margin a los costados, as铆:

main .main-input input {
    width: 470px;
    height: 40px;
    border: none;
    outline: none;
    margin: 0 13px;
    font-size: 16px;
}

Y mi 鈥.main-input-container鈥 tiene un ancho de 565px, entonces el input con 470px y el margin lateral de 13px queda estupendo. Tambi茅n le sub铆 un poco el tama帽o de la tipograf铆a, porque estaba por defecto a 13,3px en mi navegador, y a 16px me gust贸 m谩s jajaja

En lugar de cambiar el icono negro por otro gris, una opci贸n es usar la propiedad 鈥渇ilter鈥, en el png para cambiar la 鈥渢onalidad鈥 de la imagen y solo seria agregar la propiedad filter: contrast(20%) en nuestro 鈥渕ain .main-input .search-icon鈥

En este caso (fondo blanco) tambien servir谩 la propiedad filter: opacity

Para el hover de los botones en realidad estos son los estilos =

main .main-buttons div :hover {
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    color: #202124;
    max-width: auto;
}

otra forma de implementar los iconos en el input sin necesidad de descargar imagenes es con las etiquetas de html SVG aqui les dejo los 2 iconos con codigo svg (quiten los espacios entre los links solo impedian publicar el aporte)

<svg focusable=鈥渇alse鈥 class=鈥渟earch-icon鈥 xmlns=鈥渉ttp 馃槙/www. w3. org/ 2000 /svg鈥 viewBox=鈥0 -1 24 24鈥><path fill="#bfbfbf" d=鈥淢15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z鈥></path></svg>
<svg class=鈥渕ic-icon鈥 focusable=鈥渇alse鈥 viewBox=鈥0 0 24 24鈥 xmlns=鈥渉ttp 馃槙/www. w3. org/ 2000 /svg鈥><path fill="#808080" d=鈥渕12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z鈥></path><path fill="#808080" d=鈥渕11 18.08h2v3.92h-2z鈥></path><path fill="#808080" d=鈥渕7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z鈥></path><path fill="#808080" d=鈥渕12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z鈥></path></svg>

La ventaja que tiene SVG es que no importa cuan grande o peque帽a se escale la pantalla el icono mantendra su resolucion ademas que en las etiquetas 鈥淔ILL鈥 puedes declarar el color del icono, por si quieres ser diferente en tu proyecto le cambias el color a la lupa y a las partes del microfono.

background-image: url(鈥https://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png鈥);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 18px;
height: 18px;

Por alguna extra帽a razon puse las mismas instrucciones que el profe, pero mis iconos de lupa y micr贸fono no se centraron, tuve que colocarle un margin top ah铆 calculando a c/u para que quede centrado, supongo que en esos casos toca buscar alguna soluci贸n como esa igual y no es tan mala pr谩ctica.

Por si a alguien tiene el mismo probelmas con hover.

main .main-input-container:hover{
box-shadow: 0 1px 6px 0 #20212447; (correcto sin espacio entre container y hover)

main .main-input-container: hover{
box-shadow: 0 1px 6px 0 #20212447; Con el espacio hacia hover sobre cada elemento por separado y no a la caja completamente.

En esta parte, agregale un padding para que al momento de escribir en el input no este tan pegado al 铆cono de la lupa

Si quieren incrustar imagenes con url鈥檚 muy largas pueden usar este sitio para acortarlos gratis y que lleven a la misma imagen

Esas Url gigantes son por que la imagen aun no a sido cargada desde Google, mas bien es la Thumbnail

Recomiendo usar un acortados de Enlaces como Tinyurl asi tienen sus links cortos y ordenados!

Me gusta mas la ruta para las imagenes.

buenos tips

Si creo que lo pude hacer bastante parecido al google de ayer.)

Hay que mejorar el search-icon, agregando un padding-right, para que tenga un mejor efecto visual al momento de escribir en el input. Ya que se vee muy pegada, como lo dejaron.

Y cada vez m谩s pulido鈥

va muy bien el proyecto, a seguir aprendiendo!

Desde el inspector se pueden conseguir los svgs de los 铆conos

Hola buenas tardes! En mi caso yo tengo una versi贸n de google en modo oscuro. Tuve el problema que no encontraba el icono con fondo transparente, as铆 que no me qued贸 otra que poner uno negro e invertir los colores.聽 聽 filter: invert(60%) (o el % que quieran, en mi caso as铆 qued贸 gris) Espero a alguien le sirva! Espero a alguien le sirva Saludos!
Icono de la lupa <https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png>
URl de microfono <https://w7.pngwing.com/pngs/611/272/png-transparent-blue-red-and-yellow-google-voice-logo-microphone-google-voice-google-search-google-logo-microphone-angle-electronics-search-engine-optimization-thumbnail.png>

Hola,
A la clase .micro-icon no es necesario volver a definirle el 鈥渃ursor: pointer;鈥 si ya est谩 definido en la etiqueta 鈥渁鈥 al principio del CSS.
Otro punto, la lupa si tiene una funci贸n en el sitio de Google, y es posicionar el cursor en el input para comenzar a escribir.

Continuemos a帽adiendo estilos a nuestro input. A煤n tenemos que incrustar y posicionar los 铆conos de lupa y micr贸fono, adem谩s del bonito efecto de sombra al poner el cursor encima. Esto no se va a lograr solo, as铆 que vamos a abrir nuestro archivo CSS justo donde nos quedamos. ## C贸mo a帽adir el efecto hover 1. Llamamos la etiqueta contenedora del ***input*** con el pseudo-elemento ***hover***. Es decir, los dise帽os con hover que apliquemos solo se mostrar谩n cuando coloquemos el cursor encima del elemento. 2. Con ***box-shadow: 0 1px 6px 0 #20212447*** agregamos una sombra paralela con un color en tono oscuro. 3. Con ***border-color: #dfele500*** a帽adimos un borde m谩s oscuro, es decir, resalta m谩s como el input original. ![13.1.png](https://static.platzi.com/media/articlases/Images/13.1.png) ## C贸mo agregar 铆conos Vamos a agregar dos 铆conos: el de lupa y el de micr贸fono. ### Pasos para agregar el 铆cono de lupa 1. Primero, llamamos la clase ***.search-icon*** desde nuestra clase ***.main input***. 2. A帽adimos un ***background-image*** e insertamos la ***url*** del 铆cono entre comillas. Te dejo el enlace: 鈥<https://cdn0.iconfinder.com/data/icons/google-material-design-3-0/48/ic_search_48px-512.png>鈥. 3. ***background-repeat: no-repeat*** para evitar que el navegador repita la imagen por rellenar espacio. 4. ***background-position: center*** para centrarlo. 5. ***background-size: contain*** para que tome el tama帽o del contenedor padre. 6. A帽adimos un ***width: 18px*** y un ***height: 18px*** para redimensionar el 铆cono. ![13.2.png](https://static.platzi.com/media/articlases/Images/13.2.png) ### Pasos para agregar el 铆cono de micr贸fono 1. Llamamos la clase ***.micro-icon*** desde n\*\*\*uestra clase .main input\*\*\*. 2. Copiamos el c贸digo de arriba y cambiamos la url del 铆cono de micr贸fono. Te dejo el enlace: 鈥<https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/726px-Google_mic.svg.png>鈥. * A帽adimos ***cursor: pointer*** para que el cursor adopte la forma de la manita al colocarlo sobre el 铆cono. ![13.3.png](https://static.platzi.com/media/articlases/Images/13.3.png) Deber铆amos tener renderizado en nuestro navegador algo como esto: ![image.png](https://static.platzi.com/media/articlases/Images/image%2878%29.png) 驴Ya la ves muy parecida? Apuesto a que s铆. Pero no hemos terminado, por lo que vamos a centrarnos en los botones de abajo en la siguiente clase.

Para los 铆conos tambi茅n pueden usar font-awesome, solo necesitas una cuenta, un 鈥渒it鈥 y pegar el kit en el head del archivo html.

main .main-input .search-icon{
background-image: url(鈥https://e7.pngegg.com/pngimages/65/205/png-clipart-google-s-computer-icons-reverse-search-search-miscellaneous-text.png鈥);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 18px;
height: 18px;
}
main .main-input .micro-icon {
background-image: url(鈥https://cdn1.iconfinder.com/data/icons/google-s-logo/150/Google_Icons-25-512.png鈥);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 18px;
height: 18px;
cursor: pointer;
}