Efecto Hover y Sombra en Inputs con CSS
Contenido del curso
Efecto Hover y Sombra en Inputs con CSS
Contenido del curso
Sergio Estrella
Profesor
Jorge Daniel Badillo Paz
Anfernee Valera
Jorvict Enrique Piña Verastegui
Fabricio González Guasque
Percy Buendia
jorge llanque
Fabiola Rocha
Jonathan Barzola
Sandra Menendez Alonso
Jerry Gil Contreras
Sandra Menendez Alonso
Juan Camilo Espitia
Ivonne Daniela Rubis
Andres Caro
Jhonnatan Salamanca
Luis Medrano
Jonathan Jiménez Soveranes
Jhonnatan Salamanca
Wladimir Rivera
Diego Alexis Contreras
Ángela Lobo
Valeria Calcina Cisneros
Cristian Andres MQ
Andy Antonio Paz Cambara
Cristian Emanuel Collazo
Leonardo de los angeles Espinoza Hernandez
Cristian Emanuel Collazo
Miguel Zabala Figueroa
Christian Velázquez
Christian Velázquez
César Andrés Aguilar Párraga
Jancarlos Santiago
ANDDY JOSUE ANDRADE BERRONES
Francisco Salcedo
Elizabeth Ordinola
Andres Lanza Gaye
Kevin Ariel Merino Peña
J D
Efraín Hernández García
Jose Orlando Parra Soto
Christian David Sánchez
Lily Bejarano
Jhonnatan Salamanca
Dorian Martin Morones Meza
Gabriel De Andrade
Sebastián Riátiga
Ernesto Briceño
Cristian Florez
Luis Medrano
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í
Thanks 💚
gracias por el dato, había olvidado por completo esa propiedad.
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 :D
Mas que excelente tu aporte, justo quede sin entender eso! Gracias
Buena info, gracias
For remember
¡Gracias!
Buen aporte!
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'); }
Puedes poner el selector de etiqueta y la clase sin separarlos por espacios y funciona?
@billygcontreras se deben separar por espacios, tuve un error al copiar aquí :)
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'); }
Puedes usar http://csslint.net/ para revisar el código. O instalar extensiones a tu editor, yo con VS Code uso Prettier, por ejemplo
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)
Muchas gracias!!!
sos el mejor :D
Una palabra clave para encontrar imágenes con el fondo transparente es vector. vector de search vector de micrófono google
Gracias!
¡ Gracias !
Se agradece el contenido, justo me aparecía a la derecha del vídeo !
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
gracias amable persona :)
gracias :3
Entiendo que es un curso practico básico, pero no seria ideal hacerlo ya con buenas practicas? Uso imágenes enormes para luego reducirlas con código a 18px, eso no tiene sentido.
Con el inspector de elementos obtuve las imágenes .svg originales de Google, las cuales ya traen el tamaño exacto y fondo transparente. Por que no se utilizo este método?
Hola @Ramm
Hay muchas maneras de hacer lo que comentas, en este caso se usa una imagen muy grande para que no pierda calidad si la haces más pequeña.
En otros cursos se enseñan técnicas más avanzadas para obtener un buen rendimiento en los navegadores y tratar de una mejor manera las imágenes. Siéntete con la libertad de experimentar otras soluciones diferentes a las que el profesor plantea :D .
Saludos!
LeoCode0 gracias por tomarte el tiempo de responder. Espero no se mal interprete lo que digo, me encantan las clases de diego, solo intento entender. Buscar tanta calidad de imagen para un icono de 18px, el cual jamás será ampliado a 1024px o superior calidad, es una sobre carga al servidor innecesaria, dudo que este sea el motivo. Seguro existan muchas manera de hacerlo, pero tampoco las menciona y ahí es donde aparecen cientos de interrogantes.
Gracias!
Gracias.
🔥🔥🔥Aquí les dejo los enlaces de los icons🔥🔥🔥 Buscador Micrófono
Gracias!
gracias
Aporte de box-shadow
Muchísimas gracias
Buen gráfico!
Cuando el profe dice pseudoelemento, en realidad se refiere :hover como pseudoclase
Gracias por los links !
gracias amigo.
¿Qué son las pseudo-clases? Una pseudoclase se usa para definir un estado especial de un elemento.
Por ejemplo, se puede usar para:
Gracias por la explicación
¿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
Tener tus imágenes en un folder dentro de tu proyecto, para que tengas total control de ellas, como calidad, peso, formato, etc. si las usas desde un link externo, esta fuente de contenido podría desaparecer en algún momento dado.
Sin embargo traer las imágenes de tu propio servidor de archivos estáticos a través de una API es la práctica más utilizada, esto lo vemos sobretodo en los cursos con Frameworks/Bibliotecas o de JS :D
URLs de los íconos
#20212447 de color hexadecimal, se le escapo los ultimos dos digitos. sobran
Creo que no sobran, creo que los últimos dos dígitos son del "alfa" osea que tan transparente es el color.
Los últimos dos dígitos son del “alfa”, es decir la transparencia del color.
