No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Manejo de sombras en DevTools

6/22
Recursos

Aportes 56

Preguntas 2

Ordenar por:

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

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: 鈥淥pen 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

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

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

Yo esta opci贸n la conoc铆 curioseando en el devtools y dije: 鈥淲ow!鈥 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

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

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!

鈾櫖鈾 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.

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

Este curso cada clase me sorprende mas, muy bueno.

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

Wooo eso fue un trucazo con el box-shadow... Yo personalmente iba a chrome pero ahora puedo hacerlo todo sin necesidad de depender de otras aplicaciones... Gracias crack

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!

esta informaci贸n vale millones

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鈥) 馃榿

DevTools - Shadows
Tenemos la facilidad de escribir al elemento la propiedad shadow y editarla desde ah铆
<h3>6. Manejo de sombras en DevTools</h3>

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.

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

sombras me parece s煤per genial solo es hacer click en los tres puntos y me aparece para escoger

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

Mira nada m谩s, que cool 馃槑

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!