3D Flip Card Effect On Hover Using Only HTML & CSS

  Рет қаралды 258,171

DarkCode

DarkCode

Күн бұрын

Пікірлер: 157
@danroyndungu1190
@danroyndungu1190 3 жыл бұрын
I spent 4 hours making this in Javascript, arigato for showing me the right way Sensei
@NOTHING-en2ue
@NOTHING-en2ue Жыл бұрын
great video ❤
@ohiwantyoutobelieve
@ohiwantyoutobelieve 3 жыл бұрын
the best one so far, thanks
@hugocangi6214
@hugocangi6214 5 ай бұрын
Good morning and good week I finished your video, thank you greetings I liked it
@oussamagamal3861
@oussamagamal3861 3 жыл бұрын
Merci pour tout les information
@ГерманСтоянов-г7ъ
@ГерманСтоянов-г7ъ 6 жыл бұрын
Good job! I find your tutorials very useful!
@allanlima1075
@allanlima1075 3 жыл бұрын
Your channel is very good🇧🇷🇧🇷🇧🇷
@kaima8084
@kaima8084 2 жыл бұрын
Good job, but better with sound off
@sanjogsilwal9477
@sanjogsilwal9477 6 жыл бұрын
Can you make a video on how to combine css and html in detail for making a full website?
@ttempaa
@ttempaa 5 жыл бұрын
HTML, CSS & JS one love ❤
@ragibshahariar6852
@ragibshahariar6852 4 жыл бұрын
Alhamdulillah. That was very helpful for me, Thank you.
@samucalegal1
@samucalegal1 5 жыл бұрын
Teu canal é uma maravilha!!
@maisamhussaintoorie7119
@maisamhussaintoorie7119 2 жыл бұрын
Really outstanding ❣
@Jose1990gon
@Jose1990gon 6 жыл бұрын
amazing I am learning a lot with your codes.... Thanks
@jeffreynwankwo7912
@jeffreynwankwo7912 5 жыл бұрын
I did too
@florianmolnar5848
@florianmolnar5848 6 жыл бұрын
You deserve 100k+ subs, your videos really useful!
@omkarkhandalkar5
@omkarkhandalkar5 4 жыл бұрын
Bro For that 100k people should know atleast basics of css
@braintechtamil1188
@braintechtamil1188 4 жыл бұрын
Good Job man keep it well
@Madman-xk2si
@Madman-xk2si 4 жыл бұрын
nice vid.
@judasbaloi8976
@judasbaloi8976 4 жыл бұрын
Nice video bro
@DarkCodeOnline
@DarkCodeOnline 4 жыл бұрын
Thanks
@kellynjenga899
@kellynjenga899 5 жыл бұрын
Thank you for sharing this video, it surely helped me solve problems concerning that effect...
@goczbela8469
@goczbela8469 5 жыл бұрын
thx men! great tut like always
@hawkeye904
@hawkeye904 5 жыл бұрын
thanks bro for all your vids they are amazing
@cactuscot
@cactuscot 5 жыл бұрын
Dude thank you for sharing your Skills with us! Very useful. 👍🏻
@dimeadozengaming4286
@dimeadozengaming4286 5 жыл бұрын
Great vid
@n_fan329
@n_fan329 5 жыл бұрын
Si lay hafdek a khouya ❤️
@mrketchupp-ketchupp
@mrketchupp-ketchupp 5 жыл бұрын
Esta muy bueno...!
@anonymone4459
@anonymone4459 6 жыл бұрын
Awesome bro!
@webtutorials5353
@webtutorials5353 4 жыл бұрын
Perfect 👌 card))
@guylemay1471
@guylemay1471 5 жыл бұрын
Simple idea nicely done - thank you!
@mariyakerfati6947
@mariyakerfati6947 4 жыл бұрын
I really like it so much , thank you for all your video ❤❤
@lambo-ca
@lambo-ca 5 жыл бұрын
Great animation.
@kiwigmr1813
@kiwigmr1813 5 жыл бұрын
Hey DarkCode! What did you use to create your intro and outro?
@hareendranmg
@hareendranmg 5 жыл бұрын
Awesome work bro😍
@kartikchoudhary2824
@kartikchoudhary2824 4 жыл бұрын
thanks a lot good job
@joaopaulo-pr3xb
@joaopaulo-pr3xb 4 жыл бұрын
thank u,ure awessome dude
@pascalmuganza2105
@pascalmuganza2105 5 жыл бұрын
I liked it this is awesome!
@juwelrana2640
@juwelrana2640 4 жыл бұрын
which software are you using for coding???
@kajalmandal1128
@kajalmandal1128 4 жыл бұрын
can i use this for my youtube channel
@VictorSilvaDev
@VictorSilvaDev 4 жыл бұрын
Top demais !!!
@chintanrabadiya6625
@chintanrabadiya6625 5 жыл бұрын
very good tutorial for new creation. I like this channel very much.
@guibeabdel6806
@guibeabdel6806 5 жыл бұрын
Great guy be blessed
@jefersonmedeiros7677
@jefersonmedeiros7677 6 жыл бұрын
Great, man! Like...
@asmerommicheal7729
@asmerommicheal7729 5 жыл бұрын
Fantastic thank you so much
@DakiraMC
@DakiraMC 5 жыл бұрын
that's awesome
@syediqbalahmed3176
@syediqbalahmed3176 4 жыл бұрын
good ....
@atroid5910
@atroid5910 5 жыл бұрын
i love u men u r the best
@hieunotes
@hieunotes 6 жыл бұрын
Good, thanks
@Kids_Darshika_TV
@Kids_Darshika_TV 6 жыл бұрын
your video are very helpful
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
thank you
@alexanderzhidkikh7536
@alexanderzhidkikh7536 5 жыл бұрын
7:06 - At this moment I didn’t quite understand what this phrase ".card: hover > front" means - is this the Flip effect? 2:57 - Here is also an incomprehensible moment - as we immediately registered the property "position: absolute;" where we have a parent element with the property "position: relative;" ? For which we are positioning the block with the class "middle"?
@codewithjarvis8629
@codewithjarvis8629 5 жыл бұрын
you can save this channel fo css things: kzbin.info/www/bejne/hqDEgpSIaKmLis0
@maxinesherrell6215
@maxinesherrell6215 2 жыл бұрын
This is exactly what I want to be able to do THANK YOU! However, being completely new to Wordpress I am building pages via Elementor - can I use this code somewhere to be able to do this on the images on the page? 🤔🤨🙄
@JEsterCW
@JEsterCW 6 жыл бұрын
You're amazing.
@johanijohani1800
@johanijohani1800 5 жыл бұрын
Great! Best regards
@luhurfatah4829
@luhurfatah4829 6 жыл бұрын
Awesome
@grigoldvali4124
@grigoldvali4124 Жыл бұрын
Hi, can you post link of fontawesome, this link which you linked in HTML ?
@DarkCodeOnline
@DarkCodeOnline Жыл бұрын
try to use this one
@grigoldvali4124
@grigoldvali4124 Жыл бұрын
@@DarkCodeOnline thanks
@kurtharvey9041
@kurtharvey9041 4 жыл бұрын
can i add additional cards on the same page? because when i try the two cards overlap each other
@avarussell4553
@avarussell4553 4 жыл бұрын
@Kurt Harvey I am having the same issue. Did you find a solution?
@RainOnline
@RainOnline 4 жыл бұрын
thanks bruv :D
@k12moyo
@k12moyo 4 жыл бұрын
Will this work on css grid? The grid container can be rotated with their content?
@pritammehta7770
@pritammehta7770 5 жыл бұрын
Will donate you for sure bro
@rockaldeano
@rockaldeano 5 жыл бұрын
very cool effect, but when I refresh the page the animation starts itself without me hovering the card. How can I prevent that?
@juliemaury2105
@juliemaury2105 4 жыл бұрын
Same problem here ! anyone found a solution to that problem ? I have been trying to solve this for days...
@alidemircomtr
@alidemircomtr 6 жыл бұрын
Good Job!
@felipe0liveira274
@felipe0liveira274 6 жыл бұрын
Fantastic
@leofofodk
@leofofodk 4 жыл бұрын
Is it possible to implement this effect on a website created in wordpress?
@ভবেরশহর-ড১ষ
@ভবেরশহর-ড১ষ 2 жыл бұрын
@dattebayobla-bla7945
@dattebayobla-bla7945 5 жыл бұрын
Why after the page is updated, the class .back is transformed from 0 to 180 deg if I haven"t yet cursor over the picture?
@AbhishekKumar-mq1tt
@AbhishekKumar-mq1tt 6 жыл бұрын
Thank u for this awesome
@DeveloperX
@DeveloperX 5 жыл бұрын
visit this for new design: kzbin.info/www/bejne/omLHh4d5odJsq8U
@milandupalo9679
@milandupalo9679 6 жыл бұрын
Can I put button instead of icon?
@rap01011
@rap01011 5 жыл бұрын
what track is playing at the beginning?
@sunilroka4782
@sunilroka4782 5 жыл бұрын
If i want to do flip three and four image then what i do plz answer
@nut049
@nut049 6 жыл бұрын
Очень круто! Very cool!
@لاالهالااللهمحمدرسولالله-ث1ل
@لاالهالااللهمحمدرسولالله-ث1ل 4 жыл бұрын
Woo easy
@ErkanOkman
@ErkanOkman 6 жыл бұрын
👍👏
@lakellakel9418
@lakellakel9418 4 жыл бұрын
work on mobile ?
@jeffreynwankwo7912
@jeffreynwankwo7912 5 жыл бұрын
Fast and interesting tutorial
@karthiksr992
@karthiksr992 5 жыл бұрын
Is it a '*' in the first line of style.css or is it a star shape ??
@shivayagoel
@shivayagoel 5 жыл бұрын
Its a star which denotes for all content
@karthiksr992
@karthiksr992 5 жыл бұрын
@@shivayagoel thank you Can you tell me that if its a ' * ' or ' ★ '
@shivayagoel
@shivayagoel 5 жыл бұрын
*
@karthiksr992
@karthiksr992 5 жыл бұрын
@@shivayagoel thank you 💓
@stefanvichev8882
@stefanvichev8882 2 жыл бұрын
can anyone tell me why when I turn off the .middle{position:absolute}property the image file stops respecting the set width and height of 100% of the div parent and is now referencing the body
@ShivamGupta-nz7dy
@ShivamGupta-nz7dy 6 жыл бұрын
You got really cool videos, thanks to youtube that I found you. In fact, thanks to God.
@zettabyte8282
@zettabyte8282 6 жыл бұрын
What is the song on your intro
@syah5679
@syah5679 4 жыл бұрын
Dark paradise
@AxmedShiimax
@AxmedShiimax 5 жыл бұрын
Watching good
@AmarGaikwad_gaikwadamar1991
@AmarGaikwad_gaikwadamar1991 6 жыл бұрын
cool
@zzz-go6yq
@zzz-go6yq 6 жыл бұрын
What program is this
@op5357
@op5357 6 жыл бұрын
Atom
@privatprivat6629
@privatprivat6629 5 жыл бұрын
What is atom
@techshab9060
@techshab9060 6 жыл бұрын
My best chennal is DARKCODE
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
thank you
@SnirSigawi
@SnirSigawi 5 жыл бұрын
Thanks a lot! It's super useful. I got one problem after I rotated my picture, I had to rearrange it position and it fucked up everything. Can you please help me with it?
@itmegltchyy3620
@itmegltchyy3620 6 жыл бұрын
How do i bring "index.html preview"...?
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
install html-preview package
@itmegltchyy3620
@itmegltchyy3620 6 жыл бұрын
@@DarkCodeOnline thanks
@chastityishikawa7833
@chastityishikawa7833 6 жыл бұрын
Is it possible to code it on a notepad??
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
yes
@chastityishikawa7833
@chastityishikawa7833 6 жыл бұрын
@@DarkCodeOnline Thank you! By the way i love your videos💓
@DarkCodeOnline
@DarkCodeOnline 6 жыл бұрын
thank you
@junaidchauhan1216
@junaidchauhan1216 5 жыл бұрын
Thanks Sir
@steinsg8gaming853
@steinsg8gaming853 6 жыл бұрын
Where can i download the text editor?
@DarkCodeOnline
@DarkCodeOnline 5 жыл бұрын
Atom.io
@DeveloperX
@DeveloperX 5 жыл бұрын
visit this for new design: kzbin.info/www/bejne/omLHh4d5odJsq8U
@danielluna7648
@danielluna7648 5 жыл бұрын
Got a Pen of this somewhere?
@akbarpulatov640
@akbarpulatov640 4 жыл бұрын
Thanks for tutorial. It will be better if you upload the source code into github, and make a link in the description.
@element4225
@element4225 5 жыл бұрын
I cannot understand classes you use. There is no middle or card class in html and still it is working.
@DarkCodeOnline
@DarkCodeOnline 5 жыл бұрын
Bro the classes name in html its random we use it for select the element in css or js for example
@element4225
@element4225 5 жыл бұрын
@@DarkCodeOnline I did not know that you can create class with space in name and to reference use only second part :) still thank you for your movies are really helpful see ya :)
@svenrichey5803
@svenrichey5803 5 жыл бұрын
@@element4225 With using space you can combine several classes, in this case .card and .middle. This gives you a better flexibilty in design.
@omega3723
@omega3723 5 жыл бұрын
@@element4225 I also did't understand,why he use first and second part of class separately.
@element4225
@element4225 5 жыл бұрын
We can give more than just one class to an element :)
@ТигранОвакимян-д1х
@ТигранОвакимян-д1х 5 жыл бұрын
просто лучший! бро, где ты этому научился? может книги посоветуешь?
@sakshiramsinghani5284
@sakshiramsinghani5284 3 жыл бұрын
Hey it's a great tutorial, I just got one doubt. What if I have to use multiple cards in a row? I can't provide the class name card middle to all the cards because then they would all coincide with each other. Can anyone please help me with inserting multiple cards on the page?
@maxinesherrell6215
@maxinesherrell6215 2 жыл бұрын
Did you find a way of doing this?
@elmeddinx
@elmeddinx 5 жыл бұрын
how do we do this with js?
@mnarifin8852
@mnarifin8852 6 жыл бұрын
I have tried it, but when using the atom the result is the same but when run on chrome it is not the same and the logo does not exist, please help,
@vanyavoskres
@vanyavoskres 6 жыл бұрын
read about vendor prefixes
@juliemaury2105
@juliemaury2105 4 жыл бұрын
Hi ! First of all, thank you for this video ! As mentioned by someone in the comments before, there is a problem with with code. When you refresh the page, there is a rotation happening, and I have been trying to get rid of that but I did not find a solution. Could someone help me please ?
@vivekmaan9806
@vivekmaan9806 4 жыл бұрын
Whatsapp me 6397792014
@BBBootstrap
@BBBootstrap 4 жыл бұрын
Hey can we collaborate?
@aleksandarbelgrade6188
@aleksandarbelgrade6188 3 жыл бұрын
Github??
@info-Travels
@info-Travels 6 жыл бұрын
can you make an admin panel complete in php......plz do this if you can !......
@jontydahat7024
@jontydahat7024 6 жыл бұрын
Android studio, make something by it
@shivayagoel
@shivayagoel 5 жыл бұрын
My image is not rotating please solve🙏🏻
@balakrishnanyukesh1646
@balakrishnanyukesh1646 4 жыл бұрын
Amazing work sir.I tried this but the content in back is reversed😔.Some one help me please!
@tahirgarayev6224
@tahirgarayev6224 5 жыл бұрын
who can tell: i want to replace one font awesome icon(e.g. facebook icon) to another (e.g. twitter icon) with pure css (without js) on hover or checked state. How it can be done?
@allysondossantossilva6875
@allysondossantossilva6875 4 жыл бұрын
maybe the code would be something like this: element.icon { background: url("facebook icon"); } element.icon:hover { background: url("twitter icon"); }
Buttons With Awesome Hover Effects Using Only HTML & CSS
5:48
Арыстанның айқасы, Тәуіржанның шайқасы!
25:51
QosLike / ҚосЛайк / Косылайық
Рет қаралды 700 М.
Try this prank with your friends 😂 @karina-kola
00:18
Andrey Grechka
Рет қаралды 9 МЛН
Beat Ronaldo, Win $1,000,000
22:45
MrBeast
Рет қаралды 158 МЛН
Enceinte et en Bazard: Les Chroniques du Nettoyage ! 🚽✨
00:21
Two More French
Рет қаралды 42 МЛН
Awesome accordion menu using only HTML & CSS
9:59
DarkCode
Рет қаралды 441 М.
10 Stunning CSS 3D Effect You Must See
3:00
Red Stapler
Рет қаралды 1,5 МЛН
Slideshow With Navigation Buttons Using Only HTML & CSS
7:08
DarkCode
Рет қаралды 658 М.
Responsive Menu Navigation Using Only HTML & CSS
10:21
DarkCode
Рет қаралды 281 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 987 М.
Арыстанның айқасы, Тәуіржанның шайқасы!
25:51
QosLike / ҚосЛайк / Косылайық
Рет қаралды 700 М.