No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Íconos y manejo de background hover

13/17
Recursos

Aportes 214

Preguntas 44

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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

For remember

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

URLs de los íconos

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

¿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

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

¿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

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

Aporte de box-shadow

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 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.

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

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 😄

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:

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:

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

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

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)?

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

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

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

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

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.

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!

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.

Así va hasta el momento 👀

Tamaños según google:
lupa 20 x 20px
micrófono 24 x 24px

¿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.

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

El espacio entré los dos iconos es dado por la caja de input y es importante la ubicación de estas etiquetas en HTML para lograr que los iconos se ubiquen en el lugar adecuado.

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

Me gusta mucho los cursos de este profesor y en general de Platzi son muy interesantes. Gracias por sus aportes a la comunidad

¡He ahí el avance!

Colocando iconos min 4:57

Hover no es un pseudoelemento, es una pseudoclase…

Gracias

Micrófono transparente:

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

Asi me va quedando. Saludos de Argentina!

le puso 6pm y deberia ser 6 px

Hice todos los pasos pero no me salen los iconos.

Quizás le sirva a alguien…
Para conseguir la URL de la lupa hice lo siguiente:

  1. Fui a la página de Google donde pone los iconos a disposición, y busqué el de “search”:

  2. Hice click en el icono de search, y se abrió un panel a la derecha que deja descargar el archivo en formato SVG o PNG (para el procedimiento no es necesario descargarlo).

  3. Hice click derecho en el botón de la opción de SVG y seleccioné “copiar dirección de enlace”.

  4. Finalmente lo pegué en donde corresponde, es decir:

main .main-input .search-icon {
    background-image: url('https://fonts.gstatic.com/s/i/materialicons/search/v17/24px.svg');

¡Saludos! 😸

aqui el color exacto de googl en el border-color :rgba(223,225,229,0)

aqui el color de google del box-shadow: 0 1px 6px rgb(32 33 36 / 28%)

Les comparto como usar los iconos ofrecidos por Google, espero le sirva. 😄

Implementar iconos

Pueden implementar los iconos ofrecido por Google de forma gratuita desde su página de Google Fonts.

Para implementarlo tienen que incluir esta línea de en su head en el HTML.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Otras formas de implementar los iconos de Google.

Luego para poder usarlo tienen que seleccionar el icono que quieren usar y pegar la etiqueta span que les aparece en el lateral derecho de la pantalla.

Si quieren usarlo en otra etiqueta aparte de la span, pueden copiar el nombre de la clase y pegarla en donde desean usarla junto con el contenido que necesita el icono para funcionar.

<a href="#" class="material-icons">apps</a>

Problemas con la implementación

En caso de tener algún problema al querer usar algún icono, en la clase de su etiqueta de HTML simplemente copie y pegue class="material-icons".

<etiqueta class="material-icons"> nombre del icono </etiqueta>

Este es mi aporte compañeros, ayuda para simplificar. la autoría es de otro compañero está más abajo pero por si no lo ven lo dejo aquí

Como aporte a los que siguen el video de pie a cabeza, no veo necesario agregarle el efecto de pointer al icono de micrófono ya que anteriormente como etiqueta global se decidió que a todas las etiquetas a tubieran la propiedad de pointer al pasar el cursor

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

por ende considero que se puede omitir esta parte

PD: realmente seguir los videos luego de haber hecho mi clon sin ver los videos me da a enteder bastante algunas cosas que pude haber realizado para no complicarme un poco la vida, pero de igual manera me siento bastante bien en haber visto mi clone (Formato de Código) vs Como Diego realizaba el clon.