Card transparente usando HTML5, CSS3 e JavaScript - animações e efeitos.

Aprenda a criar Card's usando HTML5, CSS3 e JavaScript .
github JavaScript para o projeto:
micku7zu.githu...
.
.
instagram: / effect_ofic

[@iremarpereiradasilva3151]

Tá de parabéns, excelente conteúdo para nós desenvolvedores em início de treinamento, só tenho que agradecer em nome de todos os outros e espero que Deus te ilumine para que poste mais tutoriais para nós podermos enriquecer os nossos aprendizados. Muito Obrigado.

[@effect8739]

Muito obrigado por acompanhar o conteúdo, teremos muitos projetos pela frente

[@BoatoLivre]

Gabrielle, parabéns D++, arrasou! Gratidão me ajudou muito em outro projeto, sucesso pra vc sempre!

[@technologyfacts.]

Que aula é essa!! muito bom. com essa aula meu portfolio ficou 100x mais interativo.

[@marketplacegranfino]

Parabéns, aprendi em uma aula, o que eu não aprendi em um curso inteiro, Obrigado + um inscrito!

[@orograph]

Tutorial FABULOSO! Aprendi muito contigo. De uma paulada só! Retirou TODAS as minhas dúvidas sobre construção de classes e apresentou com didática e maestria como utilizar um HTML5 simples e claro, um código CSS de menos de 100 linhas e um código JavaScript de um terceiro para criar MAGNÍFICO Card transparente e animado. PARABÉNS!!! PS. Já assinei o canal e ativei o sininho de notificações.

[@gabrielvinicius3634]

Tutorial um dos melhorzin que ta tendo, obrigado!

[@edmarradanovis567]

Gostei muito do conteúdo. Efeitos excelentes, serão úteis demais para mim. Obrigado por disponibilizar seu tempo e seu conhecimento. A forma que vc explica é perfeita.

[@shirleipereiradasilvasousa5505]

Muito bom este projeto . Amei cada segundo, parabens .

[@Mark.Robins]

+1 inscrito, isso dá inúmeras possibilidades e seu conteúdo é direto e sem enrolação, parabéns 👏

[@momartinsmarjorie5873]

Nota 1000,amei d+ essa aula moça ❤🎉❤

[@jonnyoliveira541]

Maravilha de conteúdo, parabéns

[@inguinha1000]

Ameeeeeeeeeeeeeeeeeeeeeeeeei, obrigadaaaaaaaaaaaaaaaaaaaaa!!! Fiquei que nem boba mexendo depois que terminei kkkkkkkkkkkkkkkkkk Você ensina MUITO bem!

[@effect8739]

que bom, espero ajudar sempre que puder

[@canadiangirl5245]

QUE TOP!! Que empolgação de fazer essa página, você explica bem demais!! Desejo todo o sucesso do mundo

[@bootbull3539]

Rapaiz! Parabéns, estou impressionado com você! Conheci o seu canal hoje e já estou te seguindo! Sensacional!

[@desaumnarciso05]

parabéns , virei fã !! Adorei sua metodologia de ensino e sua clareza.

[@SarveSilva]

Muito top, pude absorver um grande conteúdo e dar prosseguimento no meu primeiro projeto. Agradeço desde ja, e super recomento

[@walextony7440]

eu tinha este tipo de ideia colocar minha página e os portifólis e conhecimentos e parece mágica e sorte pareceu do nada estava vendo um conteudo nada a ver kkkk muito obrigado

[@sarawwxx]

muito show a didática, obrigada pelo vídeo e ótimo conteúdo 💌

[@camila.mergulhao]

Ficou muito lindo esse projeto. Obrigada por compartilhar. ❤️

[@Bread-vk8fl]

Que tutorial sensacional. Muito gostoso de fazer. Simplezinho mas muito estiloso!!

[@mbelantoni]

Caraca maravilhoso tava procurando algo assim pra um site de uma rádio que estou fazendo e coube exatamente no que eu imaginei! valeu demais

[@den6372]

Sua explicação é muito boa !!!! Parabéns pelo vídeo, espero que continue postando mais.

[@Guino106]

Muito bom! É notório sua felicidade em ensinar a como fazer os card. Muito obrigado e parabens, continue trazendo videos desse tipo por favor!

[@smyylez]

Incrível

[@natan-cwb9131]

Muito legal

[@tigrecode]

Sensacional! Muito obrigado, fiz uma coleção NFT com esse efeito de card graças a você!

[@rafaelangelopv]

Parabéns pelo conteúdo. Sou o seu subcribed nº 250

[@caiogalvao9066]

Muuuuuito top o conteudo! Obrigado por estar dividindo seu conhecimento!

[@GolangHorse]

Muito bonito esse efeito, cara! Valeu por compartilhar!

[@lucasleonardolino3007]

Valeu pela dica, você é féra 👏👏👏

[@cabralguitarhero]

Excelente! Parabéns 👏👏

[@ricardogomespina3833]

Parabéns!!!

[@joaopaulosantiagocavalcant8639]

Parabéns. Agradeço

[@ivymetzker4225]

Nossa, show demais! Obrigada pela aula, ajudou DEMAIS! Amei! +1 inscrito 😍

[@zenon6791]

Fiz aqui ficou muito bom vou usar a ideia no meu portfolio gracias.

[@prodroneproductions8973]

Animal 👏👏👏

[@Rafael_Gouveia]

Muito bom! Parabéns...👏

[@welintonakt]

Trabalho incrível, parabéns!

[@retroenergy]

Vc é incrível mano

[@eliaquimvechier]

Top demais seu video! vlw!!

[@ajk6690]

Muito bom seu video

[@guilhermegoncalveslisboa6700]

belo trabalho me ajudou demais

[@guilhermenogueira9579]

Gostei muito! obrigado

[@NatanaelJPS]

Muito massa seu vídeo, vou assiste todos agora. Para-Bens! ;)

[@Donsyrius]

sensacional didatica

[@Gustavo9245]

Muito obrigado pelo seu vídeo, ganhou mais um inscrito

[@erikmartins6889]

Muito bom o conteúdo só aumenta o zoom do código please

[@lugabriel.s]

Ótimo conteúdo!! Queria saber se o efeito se aplicaria ao mobile?

[@giovanna21016]

valeu, muito bom

[@lucasfigueiredo3310]

muito bom!

[@BarbaTrader1]

Excelente!!

[@thiagocardosonunes6444]

Top demais, parabéns. Seria legal se o efeito fosse contrário, tipo, nao ficar invisível

[@ocortador1633]

Parabéns, é uma duvida eu tava querendo deixar eles mais pequenos para fazer tipo mais uns 3 você tem alguma dica?

[@effect8739]

Na class card diminua o tamanho do width e do height... Um tem 200px e o outro tem 400px , você pode manipular o tamanho que você quiser

[@gabrielaguiar9277]

@@effect8739 muito foda, parabéns!

[@Ash-zq2jk]

Vlw gata Sz

[@myprogrammer]

Parabéns!!!! Ganhou um fã inscrito kkkkk

[@felipedsmarinho]

Conteúdo top

[@Br_iku]

Valeu, ótimo vídeo, mas por algum motivo o glare é literalmente a única coisa que não está funcionando aqui para mim. Já vi e revi o código, mas não consigo entender o porque.

[@Leo_Russo]

Caraaaaca isso é muito legal :D

[@layanamonteiro5233]

Amigo obr pelo vídeo tô procurando um vídeo sobre isso a bastante tempo. Tem como imprimir ou é só virtual???

[@rez1ns]

uma dúvida, quem souber responde aqui pf, mas, eu consigo adicionar esses cards dentro de um modal?

[@mid9t561]

Bom d mais

[@cleberquerinodossantos8727]

muito bom, dicA da um zoom no codigo

[@flamengosrn6874]

NAo entendo nada ainda, mas like.

[@leesugano]

E eu esperando ela fazer o javascript manual

[@Bygustavo300]

nice demais :) 💟💟

[@teaga0]

Parabens e orbigado heheheh

[@gustavomalagrino8604]

Muito bom, parabéns mano, só não está dando certo o Vanilla.

[@thiagowendelsilvapereira1900]

oi tudo bom? Primeiro, parabéns, muito bom o seu jeito de explicar e me ajudou muitoooo!!!! Uma duvida como eu faço para adicionar uma imagem diferente em cada card? tipo sem o mouse ele fica a imagem, e quando coloco o mouse e aparece por cima igual ao seu.

[@ronniebrito8660]

Adiciona um addeventlistener de mouseOver elemento que vc quer alterar la no javascript que chame uma funçao que cria um Tag img com atributo SRC com o link da imagem que vc quer que apareca, e da um appendaChild dessa Tag no event.target.

[@brunotranhaque5897]

podia dx o codigo disponivel via github ;/ mas ta top' parabéns

[@lugabriel.s]

Por algum motivo, meu glase não se aplica as bordas arredondadas :(

[@gustavschwarzer9817]

a minha transition não funciona, meu código esta igualzinho ao do vídeo, o que pode ser?

[@capcutturbo]

Ola, como consigo colocar imagem dentro do card?

[@elieudosilva23]

Boa tarde , Como vc faz pro seu vscode ficar cm esse efeito cm fundo azul ?

[@effect8739]

olá, com dark theme, é uma extensão... escreva Dark nas extensões, é o que tem o símbolo do naruto hahaha

[@elieudosilva23]

@@effect8739 Obg

[@bootbull3539]

Alguém poderia me ajudar, tentei colocar uma imagem dentro do card, criando uma class img dentro do .content mas nao funcionou.

[@edwinleonardo9340]

esta oscuro

[@bl1tz_x]

Nossa, foi praticamente um "ctrl + C, ctrl + V" do vídeo do canal Online Tutorials ahsuhauhushshs

[@brunovieiravalentim]

Como faz pra avançar o cursor sem usar o mouse pra sair de um () por exemplo, já tentei control+espaço mas não dá certo

[@effect8739]

Olá, é só clicar na -> para ir pro lado

[@brunovieiravalentim]

@@effect8739 creio que tem outra tecla sem necessitar de usar a seta ->

[@enriquesantosdeoliveira5798]

@@brunovieiravalentim ctrl + shift + seta ou também, shift + seta.

[@brunovieiravalentim]

@@enriquesantosdeoliveira5798 obrigado! Outra coisa que gostaria de saber; como faz para digitar em várias linhas ao mesmo tempo?

[@enriquesantosdeoliveira5798]

@@brunovieiravalentim esse macete eu não sei cara, na vdd não entendi bem.

[@gustavomalagrino8604]

Vc poderia me ajudar ?

[@effect8739]

qual o problema?

[@cristianepereira806]

Não entende com a senhora não se preocupa com o tamanho da font, ñ da pra ver nada mesmo em tela cheia. e 1080 linhas.

[@ubirajaramoura3741]

Muito bom !