Тёмный

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

Gabrielle Catarino
Подписаться 1,4 тыс.
Просмотров 38 тыс.
50% 1

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

Опубликовано:

 

2 апр 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 99   
@bootbull3539
@bootbull3539 2 года назад
Rapaiz! Parabéns, estou impressionado com você! Conheci o seu canal hoje e já estou te seguindo! Sensacional!
@Mark.Robins
@Mark.Robins Год назад
+1 inscrito, isso dá inúmeras possibilidades e seu conteúdo é direto e sem enrolação, parabéns 👏
@Igor-vk8fl
@Igor-vk8fl 2 года назад
Que tutorial sensacional. Muito gostoso de fazer. Simplezinho mas muito estiloso!!
@canadiangirl5245
@canadiangirl5245 Год назад
QUE TOP!! Que empolgação de fazer essa página, você explica bem demais!! Desejo todo o sucesso do mundo
@desaumnarciso05
@desaumnarciso05 3 года назад
parabéns , virei fã !! Adorei sua metodologia de ensino e sua clareza.
@GolangHorse
@GolangHorse 2 года назад
Muito bonito esse efeito, cara! Valeu por compartilhar!
@iremarpereiradasilva3151
@iremarpereiradasilva3151 3 года назад
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
@effect8739 3 года назад
Muito obrigado por acompanhar o conteúdo, teremos muitos projetos pela frente
@technologyfacts.
@technologyfacts. Год назад
Que aula é essa!! muito bom. com essa aula meu portfolio ficou 100x mais interativo.
@edmarradanovis567
@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.
@camila.mergulhao
@camila.mergulhao 2 года назад
Ficou muito lindo esse projeto. Obrigada por compartilhar. ❤️
@Guino106
@Guino106 2 года назад
Muito bom! É notório sua felicidade em ensinar a como fazer os card. Muito obrigado e parabens, continue trazendo videos desse tipo por favor!
@den6372
@den6372 2 года назад
Sua explicação é muito boa !!!! Parabéns pelo vídeo, espero que continue postando mais.
@orograph
@orograph 2 года назад
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.
@tigrecode
@tigrecode Год назад
Sensacional! Muito obrigado, fiz uma coleção NFT com esse efeito de card graças a você!
@caiogalvao9066
@caiogalvao9066 Год назад
Muuuuuito top o conteudo! Obrigado por estar dividindo seu conhecimento!
@gabrielvinicius3634
@gabrielvinicius3634 Год назад
Tutorial um dos melhorzin que ta tendo, obrigado!
@welintonakt
@welintonakt 2 года назад
Trabalho incrível, parabéns!
@josaelfernandes113
@josaelfernandes113 9 месяцев назад
Parabéns, aprendi em uma aula, o que eu não aprendi em um curso inteiro, Obrigado + um inscrito!
@mbelantoni
@mbelantoni 2 года назад
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
@SarveSilva
@SarveSilva 11 месяцев назад
Muito top, pude absorver um grande conteúdo e dar prosseguimento no meu primeiro projeto. Agradeço desde ja, e super recomento
@sarawwxx
@sarawwxx Год назад
muito show a didática, obrigada pelo vídeo e ótimo conteúdo 💌
@shirleipereiradasilvasousa5505
@shirleipereiradasilvasousa5505 3 месяца назад
Muito bom este projeto . Amei cada segundo, parabens .
@ivymetzker4225
@ivymetzker4225 Год назад
Nossa, show demais! Obrigada pela aula, ajudou DEMAIS! Amei! +1 inscrito 😍
@cabralguitarhero
@cabralguitarhero 3 года назад
Excelente! Parabéns 👏👏
@jonnyoliveira541
@jonnyoliveira541 Год назад
Maravilha de conteúdo, parabéns
@momartinsmarjorie5873
@momartinsmarjorie5873 7 месяцев назад
Nota 1000,amei d+ essa aula moça ❤🎉❤
@lucasleonardolino3007
@lucasleonardolino3007 2 года назад
Valeu pela dica, você é féra 👏👏👏
@inguinha1000
@inguinha1000 2 года назад
Ameeeeeeeeeeeeeeeeeeeeeeeeei, obrigadaaaaaaaaaaaaaaaaaaaaa!!! Fiquei que nem boba mexendo depois que terminei kkkkkkkkkkkkkkkkkk Você ensina MUITO bem!
@effect8739
@effect8739 2 года назад
que bom, espero ajudar sempre que puder
@NatanaelJPS
@NatanaelJPS 3 года назад
Muito massa seu vídeo, vou assiste todos agora. Para-Bens! ;)
@guilhermegoncalveslisboa6700
@guilhermegoncalveslisboa6700 2 года назад
belo trabalho me ajudou demais
@zenon6791
@zenon6791 2 года назад
Fiz aqui ficou muito bom vou usar a ideia no meu portfolio gracias.
@Gustavo9245
@Gustavo9245 Год назад
Muito obrigado pelo seu vídeo, ganhou mais um inscrito
@minibigode
@minibigode 2 года назад
tam poucos videos mas ja sou fãn s2
@rafaelangelopv
@rafaelangelopv 2 года назад
Parabéns pelo conteúdo. Sou o seu subcribed nº 250
@joaopaulosantiagocavalcant8639
@joaopaulosantiagocavalcant8639 2 года назад
Parabéns. Agradeço
@ricardogomespina3833
@ricardogomespina3833 3 месяца назад
Parabéns!!!
@ubirajaramoura3741
@ubirajaramoura3741 8 месяцев назад
Muito bom !
@guilhermenogueira9579
@guilhermenogueira9579 2 года назад
Gostei muito! obrigado
@retroenergy
@retroenergy Год назад
Vc é incrível mano
@eliaquimvechier
@eliaquimvechier Год назад
Top demais seu video! vlw!!
@walextony7440
@walextony7440 2 года назад
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
@smyylez
@smyylez Год назад
Incrível
@myprogrammer
@myprogrammer 2 года назад
Parabéns!!!! Ganhou um fã inscrito kkkkk
@Donsyrius
@Donsyrius 3 года назад
sensacional didatica
@Leo_Russo
@Leo_Russo Год назад
Caraaaaca isso é muito legal :D
@ajk6690
@ajk6690 2 года назад
Muito bom seu video
@BarbaTrader1
@BarbaTrader1 2 года назад
Excelente!!
@thiagocardosonunes6444
@thiagocardosonunes6444 3 года назад
Top demais, parabéns. Seria legal se o efeito fosse contrário, tipo, nao ficar invisível
@lucasfigueiredo3310
@lucasfigueiredo3310 2 года назад
muito bom!
@giovanna21016
@giovanna21016 Год назад
valeu, muito bom
@Bygustavo300
@Bygustavo300 2 года назад
nice demais :) 💟💟
@mid9t561
@mid9t561 2 года назад
Bom d mais
@natan-cwb9131
@natan-cwb9131 Год назад
Muito legal
@prodroneproductions8973
@prodroneproductions8973 Год назад
Animal 👏👏👏
@felipedsmarinho
@felipedsmarinho 3 года назад
Conteúdo top
@erikmartins6889
@erikmartins6889 2 года назад
Muito bom o conteúdo só aumenta o zoom do código please
@lugabriel.s
@lugabriel.s Год назад
Ótimo conteúdo!! Queria saber se o efeito se aplicaria ao mobile?
@rez1ns
@rez1ns 2 года назад
uma dúvida, quem souber responde aqui pf, mas, eu consigo adicionar esses cards dentro de um modal?
@lugabriel.s
@lugabriel.s Год назад
Por algum motivo, meu glase não se aplica as bordas arredondadas :(
@Pedro-vs2gg
@Pedro-vs2gg 10 месяцев назад
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.
@bootbull3539
@bootbull3539 2 года назад
Alguém poderia me ajudar, tentei colocar uma imagem dentro do card, criando uma class img dentro do .content mas nao funcionou.
@capcutturbo
@capcutturbo 2 года назад
Ola, como consigo colocar imagem dentro do card?
@teaga0
@teaga0 2 года назад
Parabens e orbigado heheheh
@Ash-zq2jk
@Ash-zq2jk 7 месяцев назад
Vlw gata Sz
@layanamonteiro5233
@layanamonteiro5233 Год назад
Amigo obr pelo vídeo tô procurando um vídeo sobre isso a bastante tempo. Tem como imprimir ou é só virtual???
@gustavschwarzer9817
@gustavschwarzer9817 2 года назад
a minha transition não funciona, meu código esta igualzinho ao do vídeo, o que pode ser?
@flamengosrn6874
@flamengosrn6874 Год назад
NAo entendo nada ainda, mas like.
@cleberquerinodossantos8727
@cleberquerinodossantos8727 2 года назад
muito bom, dicA da um zoom no codigo
@ocortador1633
@ocortador1633 3 года назад
Parabéns, é uma duvida eu tava querendo deixar eles mais pequenos para fazer tipo mais uns 3 você tem alguma dica?
@effect8739
@effect8739 3 года назад
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
@gabrielaguiar9277 3 года назад
@@effect8739 muito foda, parabéns!
@thiagowendelsilvapereira1900
@thiagowendelsilvapereira1900 3 года назад
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
@ronniebrito8660 2 года назад
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.
@elieudosilva23
@elieudosilva23 6 месяцев назад
Boa tarde , Como vc faz pro seu vscode ficar cm esse efeito cm fundo azul ?
@effect8739
@effect8739 6 месяцев назад
olá, com dark theme, é uma extensão... escreva Dark nas extensões, é o que tem o símbolo do naruto hahaha
@elieudosilva23
@elieudosilva23 6 месяцев назад
@@effect8739 Obg
@brunotranhaque5897
@brunotranhaque5897 Год назад
podia dx o codigo disponivel via github ;/ mas ta top' parabéns
@leesugano
@leesugano 2 года назад
E eu esperando ela fazer o javascript manual
@gustavomalagrino8604
@gustavomalagrino8604 11 месяцев назад
Muito bom, parabéns mano, só não está dando certo o Vanilla.
@bl1tz_x
@bl1tz_x 2 года назад
Nossa, foi praticamente um "ctrl + C, ctrl + V" do vídeo do canal Online Tutorials ahsuhauhushshs
@edwinleonardo9340
@edwinleonardo9340 2 года назад
esta oscuro
@brunovieiravalentim
@brunovieiravalentim 2 года назад
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
@effect8739 2 года назад
Olá, é só clicar na -> para ir pro lado
@brunovieiravalentim
@brunovieiravalentim 2 года назад
@@effect8739 creio que tem outra tecla sem necessitar de usar a seta ->
@enriquesantosdeoliveira5798
@enriquesantosdeoliveira5798 2 года назад
@@brunovieiravalentim ctrl + shift + seta ou também, shift + seta.
@brunovieiravalentim
@brunovieiravalentim 2 года назад
@@enriquesantosdeoliveira5798 obrigado! Outra coisa que gostaria de saber; como faz para digitar em várias linhas ao mesmo tempo?
@enriquesantosdeoliveira5798
@enriquesantosdeoliveira5798 2 года назад
@@brunovieiravalentim esse macete eu não sei cara, na vdd não entendi bem.
@gustavomalagrino8604
@gustavomalagrino8604 11 месяцев назад
Vc poderia me ajudar ?
@effect8739
@effect8739 11 месяцев назад
qual o problema?
@cristianepereira806
@cristianepereira806 2 года назад
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.
@Rafael_Gouveia
@Rafael_Gouveia 2 года назад
Muito bom! Parabéns...👏
Далее
Como fazer três CARDS com HTML5 e CSS3 | GabiCode
13:31
NOOOOO 😂😂😂
00:15
Просмотров 4,4 млн
СЛУЧАЙ В ЧЕРНОБЫЛЕ😰#shorts
00:19
Просмотров 327 тыс.
ВОТ ЧТО МЫ КУПИЛИ НА ALIEXPRESS
09:35
Criando animações e transições em CSS
55:26
Просмотров 32 тыс.
⭐ Minicurso Animações CSS
53:01
Просмотров 129 тыс.
PROJETOS PARA PRATICAR HTML CSS E JAVASCRIPT
19:11
Просмотров 15 тыс.
Como fazer uma animação de girar uma carta com CSS
13:09
Cards Responsivos com HTML e CSS
23:52
Просмотров 49 тыс.
NOOOOO 😂😂😂
00:15
Просмотров 4,4 млн