Muito bom conteúdo. Ainda não tinha visto ninguém explicando esse método. Ganhou mais uma inscrita com certeza, irei maratonar seus vídeos de agora em diante!
Primeiro video que assisti deste canal, me ganhou pela simplicidade na explicação, didatica excelente e mais importante: sem enrolação, conteúdo e pronto. Gostei muito mano. Ganhou um sub
Tutorial sensacional! Parabéns A única coisa que não entendi, foi como a linha .#{$component-name}__submenu { } subscreveu a regra, sendo que ela está aninhada ao &:hover, ou seja, no CSS compilado esta regra estaria aninhada, gerando um: .#{$component-name} { &:hover { .#{$component-name}__submenu { } } }
Obrigado pelo conteudo! Tô com uma duvida: Quando usamos a propriedade "transform: rotateX(90deg);" para esconder o submenu na verdade ele fica ocupando 1px na tela. E se o width estiver com um tamanho considerável o hover pode acontecer em locais não esperado. Você percebeu isso? To quebrando a cabeça aqui para achar uma solução, mas ta complicado rsrsrs
Zemel, seu pacote do menu no GIT é inoperante. O arquivo "index.js", por exemplo, não tem código. Não é mais necessário utilizar caracteres especiais (í), os navegadores evoluíram e se encontrar algum que não consiga interpretar o caractere, desinstale-o, imediatamente, pois é paleolítico!
Acabei de fazer um teste de clonagem e deu certo. Se não deu para você, talvez seja uma questão de versão do Node -- aliás, atualizamos o BFB com um `.nvmrc`, mas ainda não este projeto, em especial.
Ótimo vídeo sensacional parabéns 👍.Gostaria de ver um vídeo com o menu e o submenu estilo off-canvas tipo assim no link melhores animes o submenu fica escondido quando o usuário clicar aparece o submenu estilo off-canvas se puder eu agradeço.
Opa, Romulo! Vídeo de menu off-canvas tem no canal: ua-cam.com/video/6e_u0Rm6eNU/v-deo.html Não sei se entendi bem o que você disse sobre o submenu. Você teria um exemplo para mostrar?
@@dpwoficial No modo responsivo ficasse similar a este ua-cam.com/video/Oh8bHJZn-q4/v-deo.html mais com as técnicas js existentes hoje em dia obrigado pela atenção.
Excelente vídeo, cara tenho uma dúvida que ta me matando, eu gostaria de criar um balãozinho exatamente igual ao que você fez no vídeo, ele sairia de um texto comum e ficaria acima de todos os outros elementos quando alguém clicasse e ele mostraria apenas uma pequena frase de 2 palavras e um número, esse número seria algum número aleatório entre 40 e 70 e que, depois de 2s que ele fosse aberto o número que está lá diminuiria em 1 dígito (ex: tava 29, foi pra 28) e depois esse número diminuiria mais um dígito a cada 1min30s, após o primeiro clique da pessoa no elemento. E ele poderia obviamente ser aberto novamente clicando dnv ou fechado clicando fora, sabe me dizer como eu poderia fazer isso? Eu fiquei me batendo diversas vezes e não consegui de forma alguma, se souber de alguma forma de fazer isso, ajudaria demais, de vdd, ainda sim agradeço muito pelo vídeo, foi muito bom :)
No caso, aconselho você a usar JavaScript para controlar todas essas interações e a contagem regressiva. Procura por "javascript countdown timer" e semelhantes para ver como faz.
@@dpwoficial [resolvido]: Isso acontece devido ao uso de .modules.scss do next js para evitar conflito de atribuição de variáveis , e principalmente se houver @import de outros arquivos. Resolvi declarando a variável no modulo como !default
alguém aí explica a razão do 'rotateX' parecer estar rotacionando o Y (o inverso vale para o 'rotateY'); sério, olhando parece que o tá girando é de cima pra baixo...
Valeu, tenho uma dúvida que é a seguinte...por exemplo lá no html temos UL, LI, DIV e etc, só que todos exemplos que pegamos de CSS, tem várias entradas exemplo: UL LI A, pra gente que não domina o ideal seria dizer o porque de estar incluindo no css estas entradas, porque tem a entrada no CSS UL LI A ?
Se entendi a questão, há exceções/motivos plausíveis para se fazer isso, mas, na maioria dos casos, é porque o pessoal faz errado, mesmo. =P Mas o ideal é não estilizar elementos (ul, li etc.), e sim classes, como mostramos no vídeo. Era essa a dúvida, Roberto? Qualquer coisa, pode falar. 👍
@@dpwoficial Obrigado pelo seu retorno, seguinte tenho outra dúvida, primeiro que como estou aprendendo, caiu esta matéria na faculdade... então pra quem não conhece é um parto... eu já tenho visual studio Code instalado, mas como você faz que toda alteração no código automáticamente você já vê a alteração acontecer na página ?
Tem muitas maneiras de fazer isso. No caso aqui do canal, temos um boilerplate que usamos que já provê essa funcionalidade automaticamente. Dá uma olhada nesse vídeo que explica direitinho: ua-cam.com/video/Uoch-xwx1yU/v-deo.html
Alguns pequenos "UA-camrs" escondem a quantidade de inscritos, o que é ruim pois mostra que não são sinceros e por outro lado não sabemos se o intrutor tem ou não aceitação social!
Eu sou completamente leigo nisso. Estou com um um problema do qual preciso resolver. Achei o teu vídeo que promete uma coisa e faz outra. O que você usa eu não sei, só sei que não posso usar. Então infelizmente para mim, de nada serve. Apenas foi perda de tempo.
Muito bom conteúdo. Ainda não tinha visto ninguém explicando esse método. Ganhou mais uma inscrita com certeza, irei maratonar seus vídeos de agora em diante!
Depois me conta o que achou no final da maratona. :D
Primeiro video que assisti deste canal, me ganhou pela simplicidade na explicação, didatica excelente e mais importante: sem enrolação, conteúdo e pronto. Gostei muito mano. Ganhou um sub
Muito obrigado pelas palavras e pela confiança, Matheus! o/
Primeiro vídeo que assisto e você me salvou dms. Obrigada pelo excelente video
Tomara que não seja o último. :)
Esse foi o primeiro vídeo que assisti do seu canal. Sua didática é muito boa, parabéns
Muito obrigado, Vinicius!
Espero que seja o primeiro de muitos. :)
Nossa, top, eu estava matutando isso estes dias, show valeu!
Que bom que ajudou, Renato.
Muito obrigado, salvou minha vida. Ótimo tutorial, ótimos métodos, ótima nomenclatura de classes e ótima seleção de animes. Continue assim!
Haha Principalmente, ótima seleção de animes. :)
Tutorial sensacional! Parabéns
A única coisa que não entendi, foi como a linha .#{$component-name}__submenu { } subscreveu a regra, sendo que ela está aninhada ao &:hover, ou seja, no CSS compilado esta regra estaria aninhada, gerando um:
.#{$component-name} {
&:hover {
.#{$component-name}__submenu { }
}
}
Vlw, Mateus! :)
A linha está aninhada, mas não usa o `&`; é um "interno".
No compilado, gera: `.c-dropdown__item:hover .c-dropdown__submenu { }`
@@dpwoficial valeu
Muito bom o vídeo! Parabéns !! Exemplo com animes deixa tudo mais fácil de entender hahaha
Hahaha, é o que sempre digo. ;)
Caramba, não sabia que uma coisinha tão simples dessa levaria tantos códigos.. Caraca.. Sei nada de SASS, zero.
Rapadura é doce, mas não é mole não...
@@dpwoficial Bem por ai amigo kkkkk
Muito bom DPW e é claro que vc pode fazer ele completinho e até responsivo com efeitos.
Haha, beleza, Nelson! ;)
Muito bom!
vlwww
Excelente 👏
Vlw, Maurício!
+1 inscrito, cara eu vim do video de animações com css e tou esperando ja o mini curso que cê prometeu kk vlw
Obrigado pela inscrição, Alberto.
Ativa o sininho aí que o mini curso pode chegar quando você menos esperar... ;)
TOP! Só conteúdo de primeira
Vlw, Iza! ;)
Parabéns Tárcio, aula excepcional.
Aprendo muito com você, obg! :D
Que isso, Henrique, eu que agradeço pelo belo comentário! o/
Obrigado pelo conteudo!
Tô com uma duvida:
Quando usamos a propriedade "transform: rotateX(90deg);" para esconder o submenu na verdade ele fica ocupando 1px na tela. E se o width estiver com um tamanho considerável o hover pode acontecer em locais não esperado.
Você percebeu isso? To quebrando a cabeça aqui para achar uma solução, mas ta complicado rsrsrs
Resolvi o problema com a propriedade "visibility" :D
Maravilha, Jhonatta!
Zemel, seu pacote do menu no GIT é inoperante. O arquivo "index.js", por exemplo, não tem código. Não é mais necessário utilizar caracteres especiais (í), os navegadores evoluíram e se encontrar algum que não consiga interpretar o caractere, desinstale-o, imediatamente, pois é paleolítico!
Acabei de fazer um teste de clonagem e deu certo. Se não deu para você, talvez seja uma questão de versão do Node -- aliás, atualizamos o BFB com um `.nvmrc`, mas ainda não este projeto, em especial.
Parabens! Top
vlwww
Muito bom..
Vlw, Iberno! :)
Ótimo vídeo sensacional parabéns 👍.Gostaria de ver um vídeo com o menu e o submenu estilo off-canvas tipo assim no link melhores animes o submenu fica escondido quando o usuário clicar aparece o submenu estilo off-canvas se puder eu agradeço.
Opa, Romulo!
Vídeo de menu off-canvas tem no canal: ua-cam.com/video/6e_u0Rm6eNU/v-deo.html
Não sei se entendi bem o que você disse sobre o submenu. Você teria um exemplo para mostrar?
@@dpwoficial No modo responsivo ficasse similar a este ua-cam.com/video/Oh8bHJZn-q4/v-deo.html mais com as técnicas js existentes hoje em dia obrigado pela atenção.
Funcionou tudo certinho praticamente, porem no final, o trnasition n funcionou, n faco ideia do pq
Dá uma revisada no vídeo. Seguindo direitinho, vai funcionar assim como funcionou aqui. :)
Como sempre um video foda, vlw men
Opa, vlw! Brigadão pela participação, Luis!
show!!!
Obrigado!
Excelente vídeo, cara tenho uma dúvida que ta me matando, eu gostaria de criar um balãozinho exatamente igual ao que você fez no vídeo, ele sairia de um texto comum e ficaria acima de todos os outros elementos quando alguém clicasse e ele mostraria apenas uma pequena frase de 2 palavras e um número, esse número seria algum número aleatório entre 40 e 70 e que, depois de 2s que ele fosse aberto o número que está lá diminuiria em 1 dígito (ex: tava 29, foi pra 28) e depois esse número diminuiria mais um dígito a cada 1min30s, após o primeiro clique da pessoa no elemento. E ele poderia obviamente ser aberto novamente clicando dnv ou fechado clicando fora, sabe me dizer como eu poderia fazer isso?
Eu fiquei me batendo diversas vezes e não consegui de forma alguma, se souber de alguma forma de fazer isso, ajudaria demais, de vdd, ainda sim agradeço muito pelo vídeo, foi muito bom :)
Ps: quando alguém clicasse, o elemento ficaria la sendo exibido, até que que clicasse fora do balaozinho pra sair
No caso, aconselho você a usar JavaScript para controlar todas essas interações e a contagem regressiva.
Procura por "javascript countdown timer" e semelhantes para ver como faz.
@@dpwoficial ok, muito obrigado
olá, usando nextjs 13 o componente não reconhece a interpolação .#{$component-name} somente quando uso .c-dropdown
Não tenho ideia do que seja. Tem que procurar bug de interpolação de Sass no Next.
@@dpwoficial [resolvido]: Isso acontece devido ao uso de .modules.scss do next js para evitar conflito de atribuição de variáveis , e principalmente se houver @import de outros arquivos. Resolvi declarando a variável no modulo como !default
opa cara, quando eu abro o submenu por algum motivo ele não fica parado. Ele fecha rapidamente logo em seguida.
sabe me dizer porque?
No final do tutorial, comentamos a esse respeito. Seguindo direitinho, é para funcionar. :)
Complementa esse menu
alguém aí explica a razão do 'rotateX' parecer estar rotacionando o Y (o inverso vale para o 'rotateY'); sério, olhando parece que o tá girando é de cima pra baixo...
Parece não. :)
:hover funciona ao toque no mobile?
Alguns dispositivos consideram quando "segura" o tap, mas é bom já entrar com a mentalidade que, em mobile, não existe hover.
@@dpwoficial ótimo, obrigado por lembrar que não serve de muita coisa usar :hover pra menu dropdown!
Valeu, tenho uma dúvida que é a seguinte...por exemplo lá no html temos UL, LI, DIV e etc, só que todos exemplos que pegamos de CSS, tem várias entradas exemplo: UL LI A, pra gente que não domina o ideal seria dizer o porque de estar incluindo no css estas entradas, porque tem a entrada no CSS UL LI A ?
Se entendi a questão, há exceções/motivos plausíveis para se fazer isso, mas, na maioria dos casos, é porque o pessoal faz errado, mesmo. =P
Mas o ideal é não estilizar elementos (ul, li etc.), e sim classes, como mostramos no vídeo.
Era essa a dúvida, Roberto? Qualquer coisa, pode falar. 👍
@@dpwoficial Obrigado pelo seu retorno, seguinte tenho outra dúvida, primeiro que como estou aprendendo, caiu esta matéria na faculdade... então pra quem não conhece é um parto... eu já tenho visual studio Code instalado, mas como você faz que toda alteração no código automáticamente você já vê a alteração acontecer na página ?
Tem muitas maneiras de fazer isso. No caso aqui do canal, temos um boilerplate que usamos que já provê essa funcionalidade automaticamente.
Dá uma olhada nesse vídeo que explica direitinho: ua-cam.com/video/Uoch-xwx1yU/v-deo.html
Então esse é o famoso SASS...
Viu só?
Poderia ter feito sem o SASS 😪
¯\_(ツ)_/¯
Linguagem css versão et
¯\_(ツ)_/¯
Muito bom, mas isso nao é css puro!
É sim. CSS puro pré-processado. 👍
Alguns pequenos "UA-camrs" escondem a quantidade de inscritos, o que é ruim pois mostra que não são sinceros e por outro lado não sabemos se o intrutor tem ou não aceitação social!
Legal... :)
Fala igual ao Átila kkkkkk
Que Átila?
@@dpwoficial atila marinho
@@naiseao '-'
Esse vídeo é bait! Diz que usa css puro mas usa sass. E durante o vídeo há a utilização de elementos do sass.
Nenhum recurso próprio de pré-processamento foi usado além de facilitadores de sintaxe.
Se quiser escrever desaninho, vai funcionar do mesmo jeito.
Eu sou completamente leigo nisso. Estou com um um problema do qual preciso resolver. Achei o teu vídeo que promete uma coisa e faz outra. O que você usa eu não sei, só sei que não posso usar. Então infelizmente para mim, de nada serve. Apenas foi perda de tempo.
@@deleydrumond Que pena que não atendeu, quem sabe no próximo... De qualquer maneira, o que não falta no UA-cam é tutorial. Boa sorte.
@@dpwoficial Obrigado, já encontrei o que precisava. E já consegui resolver.