3 usos simples e práticos de CSS gradient (efeito degradê)

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ก.พ. 2025
  • Você vai ver nesse vídeo 3 usos de efeito degradê com CSS gradient. Como aplicamos em fundos, em textos e em bordas de elementos.
    Se você gosta de ajudar e gostaria de retribuir meu trabalho, clique no link.
    / @maykbrito
    🔻 🔻 🔻 Links Importantes: 🔻 🔻 🔻
    Curso gratuito e comunidade de programação WEB para iniciantes [Discover]
    ↪discover.maykb...

ความคิดเห็น • 66

  • @erickbxs
    @erickbxs 2 ปีที่แล้ว +18

    Meu deus 6 meses estudando html,css,js, tudo no mundo, só agora aprendi como fazer gradiente, muito obg, vou carregar pra vida esse video!!! ^^

  • @deivideguilherme
    @deivideguilherme ปีที่แล้ว +2

    Massa demais esse vídeo!

  • @douglasmatos2134
    @douglasmatos2134 ปีที่แล้ว +1

    Acabei de me inscrever, achei o conteúdo do vídeo muito didático, explicando passo a passo cada parte da sintaxe, simplesmente sensacional! parabéns pelo vídeo!

  • @codegusoficial
    @codegusoficial 2 ปีที่แล้ว +4

    Como sempre, conteúdo de primeira! Muito legal utilizar os gradientes do CSS, ainda mais porque esse design está bem requisitado hoje em dia. Isso me fez lembrar também de uma outra propriedade bem top que é "border-image-source", na qual a gente pode utilizar gradientes nas bordas também, da mesma forma que utiliza no background, com "linear-gradient". Continue com esses conteúdos, Maykão!

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว

      Brabissimo!!!

  • @lillianpaula2178
    @lillianpaula2178 2 ปีที่แล้ว +1

    Seus vídeos me ajudam muito, aprendi como fazer essa borda e também como fazer funcionar o código em outro navegador com o -webkit-. Muito obrigado pelos vídeos e parabéns você é um ótimo professor!!

    • @maykbrito
      @maykbrito  ปีที่แล้ว +1

      Poxa.. Que carinho 😍 .. como eu não tinha visto esse lindo comentário antes?

  • @mub03
    @mub03 ปีที่แล้ว

    Excelente video Maykão! me ajudou muito! A sua didática no explorer é mais do que excelente!

  • @anderson_dallmann
    @anderson_dallmann 2 ปีที่แล้ว

    Sou muito grato Mayk ! Vc tem uma didática muito boa, objetivo e direto. E fácil de entender. Parabéns

  • @anaclaragarcia2193
    @anaclaragarcia2193 2 ปีที่แล้ว

    muito feliz por te ver produzindo conteúdo aqui, ta mandando várias dicas muito úteis!

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว

      Q massa que tá curtindo

  • @AndersonSilva-ub8dw
    @AndersonSilva-ub8dw ปีที่แล้ว

    Cara que explicação perfeita.. Parabéns!!

  • @luizgmachado
    @luizgmachado 2 ปีที่แล้ว +1

    Maykão é o cara!!!

  • @felipeleite11
    @felipeleite11 2 ปีที่แล้ว

    Excelente, Mayk! Mais uma dica para enriquecer nosso arsenal. O resultado final é realmente muito bom.

  • @eduardopinheiromiranda7937
    @eduardopinheiromiranda7937 2 ปีที่แล้ว +1

    Conheci o canal hj e ja me inscrevi, conteúdo maravilhoso que vai me ajudar muito, obrigado pelo seu esforço👏

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว

      Q massa mano! Tmj

  • @sinvalfelisberto
    @sinvalfelisberto 2 ปีที่แล้ว

    Valeu, Mayk, brigadão por compartilhar!

  • @lucastadeu3214
    @lucastadeu3214 2 ปีที่แล้ว

    Didática maravilhosa do Maycão

  • @chewbacca01
    @chewbacca01 2 ปีที่แล้ว

    Você é incrível Maikão, quando crescer quero ser assim!

  • @jobskhalil9927
    @jobskhalil9927 ปีที่แล้ว

    Cara comecei a estudar pelo discover a duas semanas, e cara, maykão seu conteúdos são muito bons!! Inclusive sua didática é muito boa, parabéns!!

    • @maykbrito
      @maykbrito  ปีที่แล้ว

      valeu querido!

  • @cassianocominetti7784
    @cassianocominetti7784 2 ปีที่แล้ว

    Opa, até apareci no vídeo hahahaha!!! Como sempre aula rápida, prática e objetiva! Valeu Maykão!

  • @SargeAiron
    @SargeAiron 2 ปีที่แล้ว

    Show de bola meu brother 👏👏👏👏

  • @brunoferreira5158
    @brunoferreira5158 2 ปีที่แล้ว

    Fera demais! Continua fazendo vídeo desse tipo Maykão, explicando algumas propriedades mais micros do frontend, é muito bom! Obrigado!!

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว

      Obg pelo incentivo irmão 🚀

  • @lucasrech2950
    @lucasrech2950 2 ปีที่แล้ว

    Fala dev beleza, Mayk Brito na area !!

  • @Matrix-io-z3z
    @Matrix-io-z3z 2 หลายเดือนก่อน

    Para quem n entendeu porq na color uso transparent uso porq html por padrão color é preto coloca se transparet para aparecer o gradient

  • @douglasrafael9989
    @douglasrafael9989 2 ปีที่แล้ว

    Didática maravilhosa

  • @gamer_tatuada1796
    @gamer_tatuada1796 ปีที่แล้ว

    Obrigadaaaaaaa, ensinou muito bem!

  • @danejardim5663
    @danejardim5663 ปีที่แล้ว +3

    eu tava com preguiça e não queria criar uma variante kkkk só fiz assim e deu certo
    h1 {
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    background-image: linear-gradient( red, blue, yellow);
    background-clip: text;
    color: transparent;
    font-size: 200px;
    }

    • @alakatinga
      @alakatinga 9 หลายเดือนก่อน

      da um 🆙 aq

    • @alakatinga
      @alakatinga 9 หลายเดือนก่อน

      vou fazer no meu background

  • @LUIZ_SILVA_DEVS
    @LUIZ_SILVA_DEVS 2 ปีที่แล้ว

    Top heim mano Mayk the best

  • @pedroandrade5378
    @pedroandrade5378 ปีที่แล้ว

    MUITOOOOOO BOM!!!! GANHOU UM INSCRITOOO

  • @beneditonamburete1218
    @beneditonamburete1218 2 ปีที่แล้ว

    Se quer vi o vídeo e já dei like

  • @HenriqueTheRabbit
    @HenriqueTheRabbit 2 ปีที่แล้ว

    Mayk é brabo demais

  • @csimaatra
    @csimaatra 7 หลายเดือนก่อน

    Maykão, ABC aqui de Cabo Verde

  • @pn_dev.
    @pn_dev. 2 ปีที่แล้ว

    Como faz para colocar uma cor gradiente na tag ?

  • @matheuscosta7333
    @matheuscosta7333 2 ปีที่แล้ว

    Show de bola

  • @TomazEdson25
    @TomazEdson25 2 ปีที่แล้ว

    Muito massa!!!

  • @felipeassumpcao3039
    @felipeassumpcao3039 2 ปีที่แล้ว

    Continua Maikão!

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว

      Obg pelo apoio brother

  • @gabrielabreu2755
    @gabrielabreu2755 ปีที่แล้ว

    Brabo

  • @fort.cell.cb.
    @fort.cell.cb. 2 ปีที่แล้ว

    Very helpful

  • @tostas4452
    @tostas4452 ปีที่แล้ว

    bem nice

  • @eduardopinheiromiranda7937
    @eduardopinheiromiranda7937 2 ปีที่แล้ว +1

    Pedido: uma animação com as cores.
    Ex: uma transição de cores, como nas fitas RGB

  • @eduardooliveira5620
    @eduardooliveira5620 2 ปีที่แล้ว

    Poderia trazer um vídeo falando sobre animações

  • @miguelpereira23
    @miguelpereira23 10 หลายเดือนก่อน +1

    Ola malta ou galera, tenho uma questão que é o seguinte:
    Quero construir o seguinte: num website pôr uma imagem de peça de roupa e no lado (esquerdo ou direito) colocar um seletor de vários padrões de textura. E ao fazer clic ou selecionar o padrão desejado faça com que a imagem da peça de roupa mude ou troque segundo a textura selecionada.
    Como devo construir isso?
    Agradeço-lhe muito a sua orientação no assunto. Muito obrigado. Um grande abraço.

    • @alakatinga
      @alakatinga 9 หลายเดือนก่อน

      ajuda aqui

  • @DevSttrong
    @DevSttrong ปีที่แล้ว

    Boa noie mayk. me ajuda, amigo como dar o spaço de uma tag de uma linha de uma para outra . quando eu crio uma tag e quando eu aperta o enter pula o spaço de uma a duas linha para baixo ? ??

  • @Engplayoficial
    @Engplayoficial ปีที่แล้ว

    Como fazer um grandiente em frente a um carrossel?

  • @anaclaragarcia2193
    @anaclaragarcia2193 2 ปีที่แล้ว

    sugestão: vídeo aula envolvendo lógica

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว

      Ótima sugestão

  • @yushany
    @yushany ปีที่แล้ว

    Moço o meu não tá mudando o fundo do site :(, tem q baixar alguma extensão?

  • @Levi-tb8vq
    @Levi-tb8vq ปีที่แล้ว

    Mayk, você que tem experiência como programador, você pode responder se é errado ou não eu não saber fazer algo, como por exemplo um jokenpo no python,porém eu olho na internet como faz.

    • @maykbrito
      @maykbrito  ปีที่แล้ว

      Como aprendizado, não é errado. É importante você manter a curiosidade e ir conhecendo diversas maneiras de resolver. Mas é super importante você ir construindo conhecimentos sólidos para um dia conseguir resolver a maioria dos desafios sozinho. Isso vem com tempo, prática e estudos. Tenta usar a técnica de active recall nos seus estudos (tem um vídeo aqui no canal sobre) pra vc ir organizando e fortalecendo seu raciocínio lógico, beleza?

  • @ChrisG59
    @ChrisG59 ปีที่แล้ว

    Comigo nao funcionou de jeito nenhum, chequei cada detalhe e o background não pega

  • @MARCELOFerreira-dk1qr
    @MARCELOFerreira-dk1qr 2 ปีที่แล้ว

    Qual a diferença entre o display grid para o flex, achei q ele usaria justify-content!!!

    • @Joao-oo8yj
      @Joao-oo8yj 2 ปีที่แล้ว +2

      Display grid é melhor para layouts mais complexos e, também, para evitar uso execivo de divs como wrappers. Só que o grid é mais completo que o flex. Então muitos preferem o flex.

    • @MARCELOFerreira-dk1qr
      @MARCELOFerreira-dk1qr 2 ปีที่แล้ว

      @@Joao-oo8yj entendi vlw mano

  • @caua_ssantos
    @caua_ssantos 11 หลายเดือนก่อน

    A imagem tá repetindo, como eu coloco pra não repetir?

  • @joaomarcelo4940
    @joaomarcelo4940 ปีที่แล้ว

    não to conseguindo botar border-image como linear-gradient... é como se nao pudesse, estranho

    • @FuadZarzar
      @FuadZarzar ปีที่แล้ว

      Não seria o background-image?

  • @Lucasmarques0fc
    @Lucasmarques0fc 2 ปีที่แล้ว

    god bless u xdd