Manejo de sombras en DevTools

A quienes no les aparezcan los tres puntitos para editar las sombras hagan ésto:

1. Agreguen el estilo box-shadow.
2. Seleccionen la opción: 0 0 black
3. Les aparecerán dos cuadritos superpuestos los cuales sacan un diálogo que dice: “Open shadow editor”
4. Hacen click ahí
5. Disfruten.
   
   

Agregar una declaración de sombra
Para agregar una box-shadowdeclaración a un elemento:

• Desplácese sobre la regla de estilo a la que desea agregar la box-shadow declaración.
• Revela la barra de herramientas Más acciones .
• Haga clic en Agregar cuadro de sombra Añadir cuadro de sombra .
  
  

wow Esta herramienta de generador de sombras no la conocía, ahora será la que use

Yo esta opción la conocí curioseando en el devtools y dije: “Wow!” Además de esto también hay otra sección que me encanta mucho que sirve para las transitions, cuando usas la propiedad transition en CSS puedes jugar con las devtools para ver qué transition quieres poner y es muy similar a las sombras, te aparece una bolita simulando la transición y además puedes ver los tipos de transiciones que hay:D

ohhh y yo colocando shadows generator en google xD

Acá lo que hice con las herramientas de color y el proyecto del profe:![](

super util e interesante los contenidos de este curso

en las nuevas versiones no aparecen los 3 puntitos para la herramienta del box shadow 😦

probando en la misma pagina de la clasa lo aprendido

La neta no le había puesto sombras a mi proyecto porque se me hacía muy tedioso, con esta herramienta es muy fácil!!!

Buenos días y perdona cuando dentro del elemento busca los tres puntos como sacas esos tres puntos, yo me pongo encima y no me salen los tres puntos. Me gustaría que a mi también me salieran .los tres puntos sin tener que hacer lo que dicen en los comentarios, que por otra parte haciéndolo no me sale los cuadraditos superpuestos.
Gracias

Una de mis herramientas favoritas de DevTools es la manipulación de sombras, es simplemente genial:

me resulto el poner box-shadow: 0 0 black para que nos aparezca un cuadro al inicio de los ceros clic y ya nos permite poner sombras.
Saludos

Me pareció super útil poder hacer esto, me hubiera gustado que tuviera también la funcionalidad de gradientes, sería perfecto!

esta información vale millones

Este curso cada clase me sorprende mas, muy bueno.

♬♬♬ Sombras nada más ♬♬♬

A mi no me aparecen los 3 puntos para acceder al cuadro de sombra ¿Como lo activo?

Hola a todos, les ha pasado que la opción de los 3 puntos para sacar las demás opciones de editar las sombras y el resto ya no les sale?, hasta ayer me salia no se que hice o si a todos les pasará? o será que lo oculté y no me di cuenta, a alguien más le pasa?

Sombras a elementos o texto.

esta clase esta super no sabia lo del generador de sombras yo simpre modificaba manualmente

Esa opcion no me aparece ami 😦

Es increible la forma de usar las sombras en devtools, lo veia imporsible al principio, pero con este metodo ya la cosas con el devtools se acaban de volver mas facil. A darle

Me cambió la vida! Siempre utilizaba páginas externas para generar sombras genéricas, no las voy a utilizar más

yo era de los que usaba un generador de sombras, esta herramienta esta genial

A seguir aprendiendo. SOMBRAS

No conocía de esta herramienta 😮 Sin duda alguna, ya con esto nos podemos ahorrar un sinfín de horas a lo largo de nuestra carrera como desarrolladores.

Buen consejo!

Muy útil, me parece genial. ✔👏

Esto me parece realmente genial.

no tenia ni idea de este generado

Y yo illendo siempre a generator shadow XD

Buenas! no logro ver el icono de tres puntitos que da el submenu de edicion de text, sombras, etc… a que se pued deber? cómo lo activo? Gracias !

es facil hacer lo de las sombras

es muy fácil hacer la sombra, pero igual para muchos que no lo saben y me incluyo, por costumbre de usar otros generadores, muy super util

Muy interesante el manejo de sombras y mas en tiempo real.

¿No sabia que existía este generador y en realidad es muy útil, pero si necesitamos añadir prefijos de los estilos para otros navegadores?

Ahora podre hacer sombras 10 veces más rápido que antes!

Excelente.

Muy buena herramienta para evitar ir a los generadores.

wow, super útil!

esto no lo conocia, esta genial

Me gustó esta clase 😃

Que bonito es lo bonito!!!

No sabía sobre esto, me ayudará mucho en el desarrollo de la página del trabajo! 😄

En Edge devTool no tengo la opción de usar esa caracteristica de boxShadow, triste 😥

Creación de sombras min 0:50

lo máximo, gracias nuevamente

🤯🤯🤯🤯🤯

Wao, esto ayuda bastante, yo solía usar un generador de sombras también (until now…) 😁

1:46 Generando sombra sobre un elemento imagen.

3:18 Creando sombra sobre un elemento tipo Texto.

No conocía estas bondades de Chrome DevTools, excelente herramienta.

A mi no me sale esa opción de los 3 punticos, hay que habilitarla?

No pues definitivamente no conocia bien DevTools :'c

Me sirvio mucho esta herramienta no conocia de ella, antes lo hacia mucho mas manual.

No sabia de esta característica de los Dev Tools
Cada clase me quedo mas impresionado!