CSS box-shadow

Поделиться
HTML-код
  • Опубликовано: 16 ноя 2024

Комментарии • 114

  • @thalyssondesousa7841
    @thalyssondesousa7841 Год назад +3

    MUITO OBRIGADO POR COMPARTILHAR ESSE CONHECIMENTO MEU AMIGO! DEUS TE ABENÇOE GRANDEMENTE!

  • @vicentecamilo5636
    @vicentecamilo5636 Год назад +1

    Esse aplicativo online de gerar código me ajudou pra caramba. Valeu.

  • @mktvendasonline3374
    @mktvendasonline3374 2 года назад +1

    Aula bem completa e ótima didática....Parabens!

    • @dpwoficial
      @dpwoficial  2 года назад

      Obrigado, Edilenio. 😃

  • @Um_Zuca_Dev_Na_Ilha_da_Madeira
    @Um_Zuca_Dev_Na_Ilha_da_Madeira 2 года назад +1

    Muito bom ferrugem!! Top!! Mais-box-Shadow

  • @LiaShinRu
    @LiaShinRu Год назад +1

    Obrigada pelo tutorial! simples e direto ao ponto!

  • @giselerodrigues7016
    @giselerodrigues7016 Год назад +1

    Maiss Box-Shadow, pleaseeeee! Adorei o vídeo ;)

  • @fabiolucas4929
    @fabiolucas4929 3 года назад +1

    Mais box-shadow!!! Excelente conteúdo.

  • @xvr8823
    @xvr8823 3 года назад +1

    Consegui fazer um gameboy com esse video valeu, seus videos são muito bons.

  • @romuloalves9349
    @romuloalves9349 4 года назад +2

    Ótimo vídeo parabéns 👏 .

  • @alaindersonsouza8024
    @alaindersonsouza8024 Год назад +1

    Genial! Muito obrigado pelo conteúdo :D

    • @dpwoficial
      @dpwoficial  Год назад

      Eu que agradeço pelo comentário.

  • @stomperhk9107
    @stomperhk9107 4 года назад +2

    Muito obrigado!

  • @EnthonyStevie1000
    @EnthonyStevie1000 2 года назад +1

    Explicação excelente!

  • @HugoLima
    @HugoLima 4 года назад +2

    mais, mais, muito mais box-shadow!!!

  • @mustafa_mota2164
    @mustafa_mota2164 2 года назад +1

    Boa ... tem como colocar variáveis no box-shadow ..

  • @lucashell6156
    @lucashell6156 4 года назад +3

    Seu canal é incrivel, sua didatica é impecavel !!! Sucesso

    • @dpwoficial
      @dpwoficial  4 года назад

      Muitíssimo obrigado pelas palavras, Lucas!

  • @cleitonreis8405
    @cleitonreis8405 4 года назад +1

    Mais box-shadow e parallax, tbm! Vlw pelo conteúdo! 😎👏🏻

    • @dpwoficial
      @dpwoficial  4 года назад +1

      Eu que agradeço pelo comment, Cleiton! :D

  • @marcondesilva3951
    @marcondesilva3951 3 года назад

    mais box-Shadow! seu canal é realmente um espetáculo. Top das galáxias, uma didática sensacional. Parabéns!

    • @dpwoficial
      @dpwoficial  3 года назад

      Muito obrigado, Marconde!

  • @cleitonmagalhaes767
    @cleitonmagalhaes767 2 года назад +1

    top as explicações, mais se tiver mais de uma box como ficaria para aplicar os efeitos separadamente?desde já obrigado.

    • @dpwoficial
      @dpwoficial  2 года назад +1

      Basta fazer a sombra em uma classe e aplicar essa classe em quaisquer elementos que se queira.

  • @thisanx
    @thisanx 3 года назад +1

    Mais box-shadow!!
    Muito bom!!! Já vi efeitos glow / neon que a galera faz com blur. Acho que com blur, precisaria criar dois elementos sobrepostos pra desfocar um deles (galera que brincou no photoshop de criar lua ou sabre de luz sabe muito bem disso hahahaha).
    Porém, fica mais fácil fazer essas coisas com box-shadow.
    Essa dica da borda pra dentro "INSET" é muito boa também. Não conhecia

  • @chdrlz
    @chdrlz 4 года назад +1

    Que massa, essa ideia de usar como borda então... muito legal! Mais box-shadow =D

    • @dpwoficial
      @dpwoficial  4 года назад +1

      Bem legal, né? :D
      Obrigado por participar.

  • @piedpierrot3891
    @piedpierrot3891 2 года назад

    Conteúdo muito bem explicado.
    Aula muito top 😁

  • @matheusmessias1898
    @matheusmessias1898 2 года назад +1

    Vlw dms cara! Tmj

  • @viniciusd2985
    @viniciusd2985 Год назад +1

    Excelente

  • @centralventura6672
    @centralventura6672 4 года назад +2

    sensacional! só não entendi, como um conteúdo GOLD desse tem poucas views!
    Obs.: Eu gostaria de por meu vídeo do youtube embedado no site, com borda branca e sombra, dando impressão de um video no papel. como faço?

    • @dpwoficial
      @dpwoficial  4 года назад +1

      Muito obrigado pela consideração! ;)
      Uma das maneiras dessa personalização é colocando o dentro de um wrapper, aí você estiliza esse wrapper, entendeu? Coloca visual de folha, sombra etc.

    • @centralventura6672
      @centralventura6672 4 года назад

      @@dpwoficial ñ entendi... sei nada de HTML... to montando um site usando "BeaverBuilder" daí tem como por atributo no elemento. queria saber o que escrever no código ao certo.

    • @dpwoficial
      @dpwoficial  4 года назад

      Provavelmente não vai conseguir esse efeito sem atuar em código. É algo bastante específico.
      Talvez isso ajude: plyr.io/

  • @edersonpravtz589
    @edersonpravtz589 4 года назад +1

    Minha sugestão de vídeo é styled components e similares. Qual a sua opinião em colocar CSS dentro do código JS, você acha que isso vai pegar?...Esse para mim, seria uma sugestão de vídeo foda!

    • @dpwoficial
      @dpwoficial  4 года назад

      Obrigado pela sugestão, Ederson. Eventualmente, vamos abordar esse e outros temas correlatos no canal, sim.
      Minha opinião é que tem seu pontos positivos, mas deve-se analisar cada projeto e decidir se vale a pena o uso naquele caso concreto. O que temos visto, hoje, é muitos considerarem a abordagem como uma solução geral para todos os cenários. =/

  • @JoaoAntonio-rf6sr
    @JoaoAntonio-rf6sr 2 года назад +1

    Incrivel mano, vlw!

  • @lordgabm
    @lordgabm 4 года назад +1

    homi....MAIS BOX SHADOW!!!

  • @emersontrindade299
    @emersontrindade299 3 года назад +1

    Ajudou muuuito!!

  • @erickgarciacosta
    @erickgarciacosta Год назад +1

    Ótimo conteúdo!

  • @Duckzins
    @Duckzins 2 года назад +1

    Man muito obrigado mesmo cara, tu me ajudou d+

  • @Paulo-cf4mh
    @Paulo-cf4mh 4 года назад +1

    Muito bom o vídeo!!!

  • @guir
    @guir 2 года назад +1

    Incrível!

  • @lucasapin
    @lucasapin 3 года назад

    parabens professor inscrito no seu canal.

    • @dpwoficial
      @dpwoficial  3 года назад

      Muito obrigado, Lucas! Eu que agradeço a confiança!

  • @elizduarte6547
    @elizduarte6547 4 года назад +1

    Só Conteúdo de Qualidade HEHEHE

  • @henriqrossi
    @henriqrossi 4 года назад +5

    mais box-shadow e um pouquinho de parallax! kkkk

    • @dpwoficial
      @dpwoficial  4 года назад +2

      haha, legal. Boa sugestão. 👍

  • @wesleysantossilver4667
    @wesleysantossilver4667 3 года назад

    Seu método de ensino é ótimo. 👏

  • @ygorluiz
    @ygorluiz 4 года назад

    Tácio, cadê o curso completão de sass ?? vlw mestre!

  • @klebersanzony
    @klebersanzony 4 года назад +1

    tooooppppp

  • @gabrielcostadev
    @gabrielcostadev 3 года назад +1

    As duas box-shadows que ele usou:
    box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0 0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);

  • @GiovannaSantos-xf2jc
    @GiovannaSantos-xf2jc 3 года назад +1

    Muito bom cara, ajudou muito

    • @dpwoficial
      @dpwoficial  3 года назад

      Que bom que ajudou, Giovanna!

  • @oliverushin7143
    @oliverushin7143 3 года назад +1

    MAIS BOX-SHADOW!!!

  • @PaulaFlavia1
    @PaulaFlavia1 2 года назад

    Amei.

  • @LucianoParanhos
    @LucianoParanhos 4 года назад

    Que conteúdo sensacional! Obrigado

    • @dpwoficial
      @dpwoficial  4 года назад

      Eu que agradeço por participar, Luciano!
      Apareça mais. 😃

  • @salvimateus
    @salvimateus 4 года назад +3

    mais box-shadow e um pouquinho de parallax! kkkk ² 😁😁

    • @dpwoficial
      @dpwoficial  4 года назад +1

      haha, ok ok, já estão quase me convencendo... =P

  • @taverneirosilva1591
    @taverneirosilva1591 Год назад +1

    Eu to viciado em colocar box-shadow em tudo 😂

  • @JonathanDev88
    @JonathanDev88 3 года назад +1

    Mais box-shadow pf

  • @vizaoseas
    @vizaoseas 11 месяцев назад

    Olá amigo, tudo bem?
    TEnho algumas imagens em gif com fundo transparente. Quando aplico a sombra, ela fica quadrada em volta da minha imagem. Como fazer pra ela contornar só minha imagem? Desde já te agradeço.

    • @dpwoficial
      @dpwoficial  11 месяцев назад

      developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

    • @vizaoseas
      @vizaoseas 11 месяцев назад

      Aí sim garoto. Resolveu meu problema. Muito obrigado. @@dpwoficial

  • @AriMauricio
    @AriMauricio 2 года назад +1

    top

  • @JulioJogos
    @JulioJogos Год назад

    muito bom o vídeo, mas o que eu fasso quando a sombra não aparece ?
    eu coloquei esse codigo: shadow-box: 0 2px 6px 3px rgba(60,64,67, 0.4); mas ele só aparece em uma parte na outra não

    • @dpwoficial
      @dpwoficial  Год назад +1

      Os 2 primeiros valores são o offset para os eixos X e Y.
      No exemplo que você passou, é esperado que só apareça em um lado, porque você está deslocando a sombra para a direita e para baixo.

    • @JulioJogos
      @JulioJogos Год назад +1

      ​@@dpwoficial obrigado por responder, consegui fazer a sombra do menu aparecer por completo, tinha uma div na frente, tinha tentado usar z-index, mas parece só funcionar se tiver tudo dentro mesmo elemento

  • @lourencoamorim4143
    @lourencoamorim4143 3 года назад +1

    Mais box-shadow

  • @cajupiranga_
    @cajupiranga_ Год назад

    ótimo video querido, to tentando remover um box shadow do meu site na shopify e to apanhando, omg, poderia me dar um help?

    • @dpwoficial
      @dpwoficial  Год назад

      Encontre o seletor que você quer remover e estilize com `box-shadow: none`.

  • @wyllonalencar6869
    @wyllonalencar6869 Год назад +1

    maaaaaaaaaaaaaaaaaaais box shadow

  • @CarlosEduardo-kn4zf
    @CarlosEduardo-kn4zf 2 года назад

    Por DEUS, PQ MINHA SHADOW N APARECE. AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH

    • @dpwoficial
      @dpwoficial  2 года назад +1

      Calma, jovi. Coloca seu código no CodePen que a gente dá uma olhada.

    • @CarlosEduardo-kn4zf
      @CarlosEduardo-kn4zf 2 года назад

      @@dpwoficial eu estava pondo vírgula entre os valores de tamanho ;-;

    • @dpwoficial
      @dpwoficial  2 года назад

      @@CarlosEduardo-kn4zf x)

  • @VictorSantos-yb8ir
    @VictorSantos-yb8ir 3 года назад

    Ótimo vídeo parabéns 👏