Estilos en la sección del input

outline: none; Nos sirve para quitar el borde generado cuando damos click a un input

Estilo de borde CSS
La border-stylepropiedad especifica qué tipo de borde mostrar.

Se permiten los siguientes valores:

dotted - Define un borde punteado
dashed - Define un borde punteado
solid - Define un borde sólido
double - Define un doble borde
groove- Define un borde acanalado en 3D. El efecto depende del valor del color del borde.
ridge- Define un borde ondulado en 3D. El efecto depende del valor del color del borde.
inset- Define un borde insertado en 3D. El efecto depende del valor del color del borde.
outset- Define un borde de inicio 3D. El efecto depende del valor del color del borde.
none - Define sin borde
hidden - Define un borde oculto
La border-stylepropiedad puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).

Nunca antes había utilizado ese color picker de el inspector🔥🔥🔥Que bakn esa herramienta, de hecho yo habia instalado algo parecido para hacer lo mismo, que no es tan buena como la del inspector de elementos.

No olviden que cuando nombran una clase a una etiqueta no hace falta ir nombrando de las etiquetas padres a los hijos en css hasta llegar a la deseada, pueden simplemente usar .nombre-de-la-clase { }

Se vuelve algo complejo el ir aprendiendo tantos comandos, por ejemplo, el de eliminar el borde azul entre otros. Pero la práctica es la que hace al maestro.

outline: none;/* quita el borde azul q aparece en el input */```

Compañeros les comparto la pagina oficial para los iconos del buscador y el micrófono de google.
https://fonts.google.com/icons?icon.query=search
Y tambien la guía de uso.
https://google.github.io/material-design-icons/

Durante este curso estoy aprendiendo un montón de buenas practicas 😄

#dfe1e5

Es el color usado por el borde de Google, los tqm ❤️

En cuanto el proyecto crece es importante que se especifique cada clase ya que se vuelve complicado su lectura.

Examinando el buscador de Google encontré que la lupita es un elemento svg. Entonces copie y pegue su trazo para obtener este bello elemento.

<svg viewBox="0 0 24 24"  width="20px">
	<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>  

Tengo un recorrido en crecimiento en el desarrollo web y nunca me imaginé que así se posicionaran los items dentro de un aparente imput. Que genial!

Por fin puedo quitar ese borde azul por defecto del input gracias a la propiedad outline: none; que alivio!

Me ha gustado mucho la forma tan detallada en la que se explica este curso, complementa perfecto el curso de desarrollo web online. 😃

¡Color picker!

¿Cómo sabe el profesor exactamente los valores en pixeles? Es por la experiencia si?

Hola este es mi resultado hasta ahora.

A alguien mas le voló la cabeza cuando hizo lo del selector de colores de Google 😲

Si tienen el mismo problema que yo en el input por el color de fondo pueden usar esta propiedad

background-color: transparent;

Recomendacion:
SI quieres que te quede exactamente al centro y del tamano correcto el buscador quítale el width a la sección con la clase main-input y que te quede así:

main .main-input {
    /* width: 580px; */
    margin: 0 auto;
    margin-bottom: 35px;
}

y al div con la clase main-input-container que te quede el width de 580px:

main .main-input-container {
    width: 580px;
    margin: 0 auto;
    border-radius: 100px;
    border: 1px solid #dfdfdf;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1px;
}

La herramienta de seleccionar color de DevTools está increíble. Yo usaba una extensión pero veo que hay cositas escondidas en el mismo navegador que valen la pena aprender bien. D:

Super útil el color picker del inspector de elementos. Luego de haber intentado la maquitación por mi mismo, me percato de que no llevaba un orden como el que llevamos hasta ahora.

Me gustó mucho la maquetación de de la barra de busqueda, yo hubiese hecho todo intentando modificar el input.

Brutality.

Que buena clase

Lo que he podido avanzar hasta ahora en darkmode de google

Les dejo el repo https://github.com/diegomm796/google_clone

Si les llega a pasar que no les aparece el contenedor largo con bordes redondos, (a mi me paso, y cuando entre al inspector me aparecía una advertencia en amarillo y decia “Invalid Property Value”) despues de mucha vuelta me di cuenta que hay que poner el border uno por uno:
border-color: ;
border-style: ;
border-width: ;
revisen este link: https://developer.mozilla.org/es/docs/Web/CSS/border-style

Me gusta mucho la explicación paso a paso

sencillo y puntual, me gustan los cursos que así

Excelente

bueno debería de ser para el input

main  .main-input-container input{
  width: 450px;
  height: 40px;
  border: none;
  outline: none;
}

más no

main  .main-input input{
  width: 450px;
  height: 40px;
  border: none;
  outline: none;
}

me parece muy buena la forma de maquetar el buscador ya que no modificamos los estilos del input si no del contenedor, mucho mas practico.

excelente no sabia esa lo de la herramienta para seleccionar el color

Color picker

Justo como lo diseñe en el reto, pero mas sencillo jaja
Buena lección!

Gracias no conocía el Color picker del inspector de elementos.

Cada ves mejor va quedando el proyecto 😄 !!

Ya encontre la respuesta, a mi pregunta que hice en la clase anterior

Que feliz que me hace este curso

para que hagan html mas rapido
https://docs.emmet.io/cheat-sheet/

Intenten poner

justify-content: space-between;

DATO para Seleccionar Color

En el inspector de elementos cuando hacemos click en el cuadro del color nos permite generar un “color-picker” que nos muestra el código HEX del pixel que estamos seleccionando en la pantalla.
.

Por alguna razón no me sale el color picker, pero encontré este que es con extensión para Chrome.

[https://chrome.google.com/webstore/detail/color-picker-for-chrome/clldacgmdnnanihiibdgemajcfkmfhia/related?gclid=CjwKCAjwt7SWBhAnEiwAx8ZLam7htDJepyM2MGUb9knLiRImvboPYDGsF2tRXFiN757SMsiGaKDG_xoCUz8QAvD_BwE

Clase 12 - Estilos en la sección del input

¿Las Dev Tools de Google Chrome tienen un color picker integrado?

• Sí.

¿Cómo podemos acceder al color picker de las Dev Tools en Google Chrome?

• Lo primero que debemos hacer es acceder a las Dev Tools (F12 o clic derecho -> Inspeccionar (inspect en inglés) ).
• Luego seleccionamos el elemento al cual queremos saber el color.
• Después en la sección “Style” de las Dev Tools, en donde nos dice element.style escribimos la propiedad color y como su valor escribimos cualquier color.
• Seguido de esto damos clic encima del recuadro que aparece con el color que escribimos y se nos abrirá un menú.
• Damos clic en el icono de un gotero y acercamos la mira de dicho gotero hasta el color que queremos saber.

Color picker está dentro de una extensión de Google llamada Colorzilla.

😀

Recuerden que para alinear elementos con display flex se utilizan…
justify-content: para alinear elementos Horizontalmente
align-items: Para alinear elementos verticalmente.

Ademas la propiedad outline con el valor none que le pueden aplicar a un input es para eliminar ese borde que se muestra en un input al seleccionarlo.

Estoy encantado con este curso. Me es muy fácil seguirlo.

Consulta , al ponerle altura de 40px al input hijo tambien se agrendó el padre .main-input-container , porque?

de a poco va quedando

me están pareciendo unas clases muy buenas

Cada que voy avanzando mas en el curso se me esta haciendo mas complejo, sera’ por que apenas estoy iniciando.

#dfe1e5 el color del borde de la barra de google

Debido a que hay tanta información, realice un método para evitar que se pierda en mi mente asi:
1- siempre hago la misma estructura para cada curso
![](

2- Escribo toda la información relevante para mí de forma que la pueda usar de forma rápida en los archivos de texto:
![](

De esta forma cuando desarrollo y me estanco, recuerdo que lo vi en alguno de los cursos y voy a buscarlo para lograr solucionar el problema.

Si alguien tiene una mejor forma sería bueno saberla.

Les recomiendo que agreguen un atributo (creo que así se llama 😅) que es placeholder y coloquen ahí el texto que tiene google, les dejo el código

<input type="text" placeholder="Haz una búsqueda en Google o escribe una URL"> 

Por cierto si quieren saber como puse un emoji en los comentarios es con tecla windwos + .
tecla windows + punto

Wow la verdad es que yo personalmente agregué los iconos dentro del input con un backround-image pero la forma como lo hizo Diego me sentir tonto jaja aprendí mucho en esta clase!

La tactica de buscar el color esta genial, sin necesidad de añadir plugins de chrome

se me olvido un px y se daño todo

importancia de colocar bien la medida

¡Qué genial aporte el de color picker dentro del inspector! Antes, había descargado una extensión de Chrome para esto, pero ahora lo haré desde el inspector!!

muy buena clase es la primera vez que trabajo con los atributos de input y ahora se como hacer que se vean mejor 😃

Dos anotaciones que me percate.

• El profe en el main .main-input-container no coloca ningun valor de alto/height, ya que esta altura la predefine en el hijo main .main-input input sin embargo, para aquellos que estamos aprendiendo se deberia haber colocado el height:auto simplemente por temas de compresión.

• Y la otra es que no creo que tiene mucho sentido el usar en la etiqueta main .main-input-container el “alig-items:center”, ya que igualmente la altura va a ser la misma que la del contenedor padre por lo que “no tiene espacio para centrar”, eso de lo que yo entendí y probe, ya que quite el “alig-items” y no me modifico nada

Woow, no conocía la herramienta de copiar colores. Excelente clase, gracias Diego!

Color del borde
border: 1px solid #dfe1e5;

Creo que para los nuevos que vean esta clase, en los inputs, el outline ya no es azul, sino que ahora es de color negro

Me encanto el Color Piker!!! podemos ir a otras paginas y jalar el color! buenisimo!!! Si bien soy nuevo en esta area es mi primer curso y voy entendiendo todo! PlatziSalu2

Gracias por la explicación, ase tiempo que quería saber como le quitaba a ese borde a los imputs, y hoy fue ese día. Gracias ✔👏

Saber eso de outline si me sirvió de mucho, hice el clon al inicio sin ver la clase y no supe como quitárselo jaaja
Gracias por tan clara y buena clase!

Muchas gracias por la explicación instructor Diego, ahora noto que en verdad se ve mejor separando los elementos de la barra de búsqueda en 3 partes y añadiéndole estilos por separado.

Genial!! Darle los estilos a la barra de búsqueda de Google fue la parte que no pude hacer en el reto de la primera clase. Hasta ahora vamos a buen ritmo!

Mi clon. Nunca me imaginé que los elementos que aparecen en el input fueran elementos diferentes pero centrados, pensaba que era alguna propiedad del input

![](

Genial

Una consulta amig@s, en el minuto 9:38 al mandar a llamar la clase, llama primero al main luego al contenedor .main-input y de ahi al input porque no llamo a la clase del div que es .main-input-container si tambien contiene al input.

estoy aprendiendo mucho en este curso, ojala sigan realizando mas curso prácticos

Genial.

Me voló la cabeza esta clase 🤯
Tantos trucos, la facilidad con la que maqueta todo, son impresionantes!

no sabía lo del color picked,buena!

Me encanta hacer estilos! :3

Por alguna razón el input de mi clon de google sale así, alguna idea de qué pueda ser?

![](

asi voy

Una buena herramienta cuando se requiere en css buscar la clase y no recuerdan como se llama o es muy larga, pueden usar la siguiente extensión de vs code : https://marketplace.visualstudio.com/items?itemName=solnurkarim.html-to-css-autocompletion la cual se encarga de mostrar el listado de clases, id etc… Facilitando a la hora de dar estilos.

Esta bueno el juego de Flexbox Froggy

Como nota, recuerden que pueden nombrar sus clases de la siguiente forma para evitar desplagar tantas rutas a la hora de crear un estilo de etiqueta.

    <header class="header">
        <nav class="header__nav">
            <ul class="header__nav--ul">
                <li><a class="header__nav--a" href="">Gmail</a></li>
                <li><a class="header__nav--a" href="">Imágenes</a></li>
                <li class="nav__menu--icon"><a class="header__nav--a" href=""></a></li>
                <li><a class="header__nav--a" href=""><img class="header__nav--img" src="	https://lh3.googleusercontent.com/ogw/AAEL6siTRGEyrrppX8_GAsMYVRRDIJhAAjOMCfJ7uUc5rg=s32-c-mo" alt="Foto de perfil"></a></li>
            </ul>
        </nav>
    </header>

y para los estilos

.header{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.4rem;
    width: 100%;
    height: 6rem;
}
.header__nav{
    display: flex;
    justify-content: flex-end;
    height: inherit;
    margin-right: 1rem;
}
.header__nav--ul{
    width: 25rem;
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: center;
}
.header__nav--a{
    margin-left: 1.6rem;
    color: white;
}
.nav__menu--icon{
    background-image: url('https://static.thenounproject.com/png/756729-200.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 1.6rem;
}
.header__nav--img{
    border-radius: 50%;
}

Lo ideal sería usar un estilo de contenedor y con hijos dentro del contenedor.
Al contenedor le pones la clase “contenedor” y a los hijos “contenedor__hijo”.
Y si se da la situación de que tengamos un hijo dentro de otro hijo, lo usaremos como una modificación así "contenedor__hijo–modificación"
Por eso la importancia de pulir nuestra forma de maquetar y de nombrar clases ✌🏻. Por buenas practicas deberiamos evitar las rutas largas a la hora de crear estilos para una sola etiqueta ya que se volveria muy complicado seguir la ruta.
ejemplo💻

main section nav ul li a .icono{ 
ESTILOS
 }

Y si podriamos usarlos así 😎

.header__nav--a{
ESTILOS
}

Bueno, así los uso yo y me funciona de maravilla 😄

Holaaa a todos. El color del borde de la barra de búsqueda es este: #dfe1e5

Excelente!!!

Hola a todos, revisando el video y considerando que el contenedor del input, el que tiene la clase .main-input-container tiene la propiedad de display: flex, se puede usar la propiedad de flex-grow en el hijo para hacer que el input “crezca” ocupando todo el tamaño disponible y de manera automática sin tener que estar ocupados de cambiar el tamaño con la propiedad width. Acá está el ejemplo de lo que les hablo:

main .main-input input {
  flex-grow: 1; /*El input crece de manera automática*/
  height: 40px;
  border: none;
  outline: none;
  background-color: transparent; /*Lo puse porque me aparecia un bug extraño con un color en el input*/
}

Espero que les sirva. Saludos

Para quienes están haciendo una versión oscura, deben agregar la propiedad background-color transparente para que no aparezca un rectangulo blanco en el input y agregar la propiedad color blanco para que el texto no quede oscuro al momento de escribir en el buscador.

Comparto el paso a paso de la clase:

_

_

_

_

_

_

_

_

_

_

_

_

_

Mi puntito, gracias.

Me explotó la cabez cuando vi lo que hiciste con el input.
Desde una practica anterior, tuve muchos problemas para posicionar iconos dentro del placeholder y ahora veo como es que lo hiciste, super genial y ahora encuentro la solucion a varios problemas

Considero que es mejor manejar los valores de “width” con porcentajes o vw para que sea un proyecto responsivo

Damn it! y yo yendo al photoshop y usando el gotero

EXCELENTE CLASE, Y BUENA EXPLICACION 😄

En este enlace van a encontrar distintos juegos dínamicos dónde podran poner en práctica conocimientos de html/css/js y reforzarlos de manera divertida.

URL =
https://codepip.com/games/