Íconos y manejo de background hover

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 😄

For remember

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');
}

Hola muchachos les dejo iconos con background transparente.
lupa:https://pngimage.net/wp-content/uploads/2018/06/lupa-de-pesquisa-png-6.png

micro:https://www.pinclipart.com/picdir/big/32-322562_open-google-microphone-icon-clipart.png

(y)

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

Iconos del proyecto web
**Search ** https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png
Microfono https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png

ICONO de MICRO

https://inesh.org/blog/wp-content/uploads/2019/10/google-voice-search-increase-your-google-rank.png

ICONO de LUPA

https://images.vexels.com/media/users/3/132068/isolated/preview/f9bb81e576c1a361c61a8c08945b2c48-icono-de-b-squeda-by-vexels.png

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

Micrófono Primera Opción: https://upload.wikimedia.org/wikipedia/commons/e/e8/Google_mic.svg
.
Micrófono Segunda Opcion: https://www.pinclipart.com/picdir/big/32-322562_open-google-microphone-icon-clipart.png
.
Lupa: https://pngimage.net/wp-content/uploads/2018/06/lupa-de-pesquisa-png-6.png

Microfono https://www.cuecamp.com/wp-content/uploads/2019/11/Google_mic.svg_.png
Search https://cdn0.iconfinder.com/data/icons/very-basic-2-android-l-lollipop-icon-pack/24/search-512.png

🔥🔥🔥Aquí les dejo los enlaces de los icons🔥🔥🔥
Buscador
Micrófono

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

Imagen de buscador:
https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon_svg.png
Imagen de Micrófono:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/726px-Google_mic.svg.png

¿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

• Search
• Micro

#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;

En esta url se encuentra varios logos de Google entro otros:

https://commons.wikimedia.org/w/index.php?search=icon+search+google&title=Special%3ASearch&go=Go&ns0=1&ns6=1&ns12=1&ns14=1&ns100=1&ns106=1

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

https://inesh.org/blog/wp-content/uploads/2019/10/google-voice-search-increase-your-google-rank.png

https://images.vexels.com/media/users/3/132068/isolated/preview/f9bb81e576c1a361c61a8c08945b2c48-icono-de-b-squeda-by-vexels.png

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.

Icono de busqueda de Google:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png

Icono del microfono de Google:
https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png

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

**Url icono lupa: **https://lh3.googleusercontent.com/proxy/hmYeKyPEzLBmSzUneDhOMOKxlsPtcl2nU8gAOp5fg_KqRosNQjPRRb7-AZ58J3mzPAp6YbNaWPzUxoLpqEUsgP9V4tCw4N-uuv8hyiEQfF8WAEd_4uV2SynrCKNXAfUfbvDE

url icono microfono: https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/1200px-Google_mic.svg.png

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

Icono de micrófono: https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png
Icono de lupa:
https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png

¡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 “background”, 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 “filter”, en el png para cambiar la “tonalidad” de la imagen y solo seria agregar la propiedad filter: contrast(20%) en nuestro “main .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=“false” class=“search-icon” xmlns=“http 😕/www. w3. org/ 2000 /svg” viewBox=“0 -1 24 24”><path fill="#bfbfbf" 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>
<svg class=“mic-icon” focusable=“false” viewBox=“0 0 24 24” xmlns=“http 😕/www. w3. org/ 2000 /svg”><path fill="#808080" 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”></path><path fill="#808080" d=“m11 18.08h2v3.92h-2z”></path><path fill="#808080" 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”></path><path fill="#808080" 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”></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 “FILL” 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’s 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

Dejo por las URL de los icons.

Search: ‘https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png’

Micro:
‘https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png’

Los iconos del código del profesor:
Search : https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png

Micro: https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png

en mi ejercicio coloque un icono(lupa) con background-image y los otros dos los hice con la tag img ya que creo creo que forman parte del contenido de la pagina, y la tag ancla en que estan declarados llevan un title y nos llevan a otro lado atraves del icon

box-shadow: <valor> <valor> <valor> <valor> <color>

-El primer valor indica el desplazamiento horizontal de la sombra. Si el valor es positivo, la sombra se desplaza hacia la derecha

–El segundo valor indica el desplazamiento vertical de la sombra. Si el valor es positivo, la sombra se desplaza hacia abajo

–El tercer valor indica el radio o que tanto se va a difuminar la sombra. Cuanto más grande sea su valor, más borrosa aparece la sombra.

–El cuarto valor indica el radio o que tanto se va a expandir la sombra. Si se establece un valor positivo, la sombra se expande en todas direcciones.