Тёмный

RPG Styles Card with Hover Effect - HTML/CSS 

Red Stapler
Подписаться 176 тыс.
Просмотров 201 тыс.
50% 1

Create a RPG card style on your website with HTML and CSS. The card also has zooming effect when hover on it.
Source Code: redstapler.co/rpg-style-card-...
=== Follow us on ===
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit
#CSS #CSSTutorial #WebDesign

Наука

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

 

28 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 113   
@basmaw1635
@basmaw1635 3 года назад
Thanks for the tutorial, I spent almost half a day playing around with it after I got inspired by the project. Also given me a few more ideas for other stuff I could do as well. Looking forward to the next tutorial. You are awesome.
@charlotte.upandaway
@charlotte.upandaway 3 года назад
This was such a great tutorial! Clear, succinct, and helped me make my first set of cards! Something I thought was going to be super difficult, you made easy and fun. Thank you!
@Danger418
@Danger418 4 года назад
Such a great result with simple css, nice work!
@vasiovasio
@vasiovasio 4 года назад
Clean CSS work! Keep going bro!
@joel9909
@joel9909 4 года назад
Very direct and effective, I like that you utilized the powers of both flexbox and Grid
@NumberSixRule
@NumberSixRule 4 года назад
I always wanted to learn this effect, thanks for the great tutorial. Subbed.
@keithhunt7175
@keithhunt7175 4 года назад
Cool! Thanks for sharing. Following along and with your little tutorials and tinkering with the code, seems like a great way get better with CSS.
@Shanboss277
@Shanboss277 3 года назад
Really simple tutorial. You're an actual legend.
@rahul5794
@rahul5794 4 года назад
Your videos help me learn css in a very different way but they always work Keep up the good work!
@jeremiah869
@jeremiah869 4 года назад
Wonderful design and tutorial! Your thought process and explanations are great to follow along with.
@ngavuthu618
@ngavuthu618 3 года назад
your work is so beautiful! thank you for the tutorial!!!
@Pankaj-Verma-
@Pankaj-Verma- 3 года назад
Clean videos from this channel. Thank you.
@rupavagetsitdone
@rupavagetsitdone Год назад
this is so awesome and cool looking. i was about to use the default bootstrap ones when i came across yours. really love them. and i learned so much of how a css code is nested and structured by just looking at your code. thanks!
@boneykingofsomewhere
@boneykingofsomewhere 4 года назад
Fantastic tutorial, I've subscribed :D
@luis96xd
@luis96xd 4 года назад
I loved this video! It was awesome! The design is so nice :D I learned a lot. Thanks ^_^
@ivankrupskyi8984
@ivankrupskyi8984 4 года назад
Very nice look and simple implementation. Great.
@yokotemaki8228
@yokotemaki8228 4 года назад
nice and clean work dude
@kazimrahman7499
@kazimrahman7499 3 года назад
awesome job Engineer....!!
@deepeshvaishnav555
@deepeshvaishnav555 3 года назад
Respect to the Creator, simple but effective great man...♥
@others2200
@others2200 3 года назад
6:34 I really thanks and appreciate your tutorial bro now I found out how to zoom out the card yay this means a lot to me
@saikatbishal
@saikatbishal 2 года назад
This helped with my api integration project. Thanks.
@darkalpha6530
@darkalpha6530 3 года назад
Needed for my hackathon. Thank you.
@MaksymMinenko
@MaksymMinenko 3 года назад
Thank you for using the css grid.
@yeico80
@yeico80 4 года назад
Great video. Thank you so much!
@mohammedasif9756
@mohammedasif9756 3 года назад
Thanks to you buddy who make my easy and comfortable manner to understand the video..Be continue
@moonman8055
@moonman8055 3 года назад
very simple and well explained thank you.
@techhilfiger1014
@techhilfiger1014 3 года назад
It was very nice.love from India . Keep it up Growing sir.
@FirdavsiWebDev
@FirdavsiWebDev 4 года назад
Nice. Thank you!
@edemduku3391
@edemduku3391 3 года назад
thank you - thank you very much for this video. after what i leant i also know i cant escape css grid so will also go into that area. but you have given me a good start
@HMaxTube11
@HMaxTube11 4 года назад
Good one, thank you.
@abia3585
@abia3585 3 года назад
I liked it, subbed.
@zykoz6826
@zykoz6826 4 года назад
Thanks for the tutorials. I just wanted to state that flipping from css/html/webpage is a little hard to follow. ;) Thanks again for the wonderful content.
@OO-pc2dh
@OO-pc2dh 4 года назад
Cool! Thank you.
@darwyna
@darwyna 4 года назад
Awesome video! Thank you 😁 i have an idea for you: how about coding on something like codepen? Where we can see the progress live. I think this would really help to understand better. Keep up the good work!
@abidinawres2229
@abidinawres2229 Год назад
great tutorial, thank you
@boutiflet
@boutiflet 4 года назад
Cool, it's gave me a idea.
@GrahamBillington
@GrahamBillington 3 года назад
Awesome video thank u
@noone-gr4is
@noone-gr4is 4 года назад
Every time I watch web developing videos, a Wix ad pops up
@laszlopinter8847
@laszlopinter8847 2 года назад
Come on bro these are decent cards and I see so much good tutorials from you. So here is my biggest problem: Please! Put the first card's picture, to the second card. Then put the second card's picture to the third one and the third card's picture to the first card. IT LOOKS SO GOOD. ( I tried it. ) You got to see this man :D You got to !
@mehtapugur6422
@mehtapugur6422 3 года назад
Thanks for sharing.
@freelarabie3218
@freelarabie3218 4 года назад
Thank you very much Friend
@asep2316
@asep2316 4 года назад
best tutorial
@bimalsardar2238
@bimalsardar2238 2 года назад
Awesome
@BiteUA
@BiteUA 4 года назад
in chrome transition scale creates text blur, that's why is a bad option
@shineLouisShine
@shineLouisShine Год назад
Thanks. Could have been really awesome if there was a deck of cards, and a tutorial which include how to manipulate those. Flipping a card, putting card over card but leave some part of the card below exposed, etc..
@GALAXY-jn5st
@GALAXY-jn5st 2 года назад
brooooooooooooooo=> thanks
@slingshot7602
@slingshot7602 3 года назад
Thanks
@ricardoxerna9072
@ricardoxerna9072 3 года назад
how do i change the background of each card without having to do the card-img code for each card?
@aungphone9588
@aungphone9588 3 года назад
Good
@rahulpongde2058
@rahulpongde2058 2 года назад
what is the size of the images used in the cards
@web_masud
@web_masud 3 года назад
I hope you enjoy watching my channel and don't forget to subscribe. I will be inspired by your help.
@endenman1872
@endenman1872 3 года назад
I'm gonna staple my html and css pages
@alberth.d7541
@alberth.d7541 3 года назад
why result image different via html and via css ?
@jubairhaider363
@jubairhaider363 4 года назад
Can you tell me how to make it responsive?
@user-rz5dv9mw8x
@user-rz5dv9mw8x Год назад
thanku
@aungmyat9960
@aungmyat9960 Год назад
Hi how do you make them all in the same row?
@sangeethmr9731
@sangeethmr9731 3 года назад
hi can u teach how to make digital card with HTML /css
@GustavoNiederauer
@GustavoNiederauer 4 года назад
Great Work! But I have more than 10 cards. How can them made it to slide right/left to pick or see the others.
@sohambtw
@sohambtw 4 года назад
Would u plzz tell me how to make multiple cards .
@kutaybugdayc9463
@kutaybugdayc9463 2 года назад
@@sohambtw did u find
@franciscogarcia4873
@franciscogarcia4873 Год назад
How can I move the card's position on the screen/web page? I want to make various cards but I can't seem to figure out how to move their positions in CSS.
@jigyasatrivedi3391
@jigyasatrivedi3391 3 года назад
I want to add more rows how would i do that
@lalitrathore3804
@lalitrathore3804 3 года назад
The amount of div used 🤔 Is it ok to use div for every part
@2-sided672
@2-sided672 3 года назад
I didn't got the output. is it different for other OS?
@mohamadsamater3504
@mohamadsamater3504 4 года назад
Is there a zip code for pictures
@eazycodes
@eazycodes 2 года назад
nice tutorials love from #eazycodes
@julianff1
@julianff1 3 года назад
thanks foir the video. How can i link such a card to (e.g. a tag) to another page or to a popup ? And how did you but 3 cards next to each other without class=row? My second card is now beneath the first one? Thanks a lot for help.
@kutaybugdayc9463
@kutaybugdayc9463 2 года назад
did u find how to make second card
@vikasmalik1744
@vikasmalik1744 4 года назад
how to make it responsive ....
@vasupadh6111
@vasupadh6111 3 года назад
how to make digital business card using html & css with all social media links call to ation button and gmail all that ?
@gokulrock6686
@gokulrock6686 2 года назад
How to add multiple cards on rows
@brianaitchison671
@brianaitchison671 3 года назад
how do u get it responsive please
@krims254
@krims254 4 года назад
Hey thanks for the code but how would you put let's say 3 card at the top and 3 at the bottom?
@RedStapler_channel
@RedStapler_channel 4 года назад
use grid layout
@krims254
@krims254 4 года назад
@@RedStapler_channel tried that nothings working please help I dont know where to put And same w column
@TheSagarKhatiwada
@TheSagarKhatiwada 4 года назад
how to make it responsive ???
@legenacygaming103
@legenacygaming103 3 года назад
can i ask, HOW THE HELL DO YOU MULTIPLY THEM AM HAVING A HARD TIME
@lolmrpana11
@lolmrpana11 4 года назад
Red Staple, how do you get them the card to line side by side?
@RedStapler_channel
@RedStapler_channel 4 года назад
flex
@terraflops
@terraflops 4 года назад
for some reason my code doesn't work like yours. // I love the channel and content.
@learncodingwithshreya
@learncodingwithshreya 4 года назад
same
@SherinSunny-rj3py
@SherinSunny-rj3py 3 года назад
PLEASE DO REPLY FAST HOW TO CHANGE THE CARD SIZE IN CSS NOT IN HTML ?
@badr6896
@badr6896 2 года назад
Is it responsive ?
@hameedabed3474
@hameedabed3474 4 года назад
I want the picture
@jokutzu3089
@jokutzu3089 4 года назад
My stats won't stick to the bottom. What did I do wrong?
@jokutzu3089
@jokutzu3089 4 года назад
I figured it out. But I do have another question: How do I put a headline above this?
@smokeboyy1036
@smokeboyy1036 4 года назад
Hello, can you make them also responsive please?
@emonahmmed1722
@emonahmmed1722 4 года назад
Text editor name
@rhysperry111
@rhysperry111 4 года назад
Emon Ahmmed VS Code
@serioussam9400
@serioussam9400 4 года назад
How can you make that translate language appear??? Need help....
@RedStapler_channel
@RedStapler_channel 4 года назад
did you mean the lorem? just type the word lorem in visual studio code and press enter at the suggestion 👍
@serioussam9400
@serioussam9400 4 года назад
@@RedStapler_channel no....when you open the web it asks you to translate from Google or there is always a Google translate logo on the right side of the title.....how did you do that? I didn't find any extra tag in your HTML code for that...
@serioussam9400
@serioussam9400 4 года назад
@@RedStapler_channel help plz
@RedStapler_channel
@RedStapler_channel 4 года назад
@@serioussam9400 hmm? which part of the video that you see that?
@serioussam9400
@serioussam9400 4 года назад
@@RedStapler_channel this video
@jereomylopez3648
@jereomylopez3648 4 года назад
I suggest that you do not show the code being written in speed-up mode or fast typing. Just put each snippet of code in the window and say this class does this, blah, blah. It was like you guarding a secret. There was not time to type, or even pause without rewinding. Yes thanks for free information. but a 8-10 min video was more like 30 mins because, of the constant rewinding. clock the speed from finished line to change screen.
@bmx-motivation
@bmx-motivation 3 года назад
Responsive....?
@ReyBanYAHUAH
@ReyBanYAHUAH 2 года назад
Always remember we must repent of our sins (sin is transgression The Law Of Yahuah The Father in Heaven. The Law are The Books: Genesis, Exodus, Leviticus, Numbers, & Deuteronomy). We must repent of our sins and Have Belief On Yahusha The Messiah. HE Died and Rose three days later so that we can be forgiven of our sins! Come to HIM🙂🙂🙂🙂🙂
@mohanalkarvaibhav8233
@mohanalkarvaibhav8233 2 года назад
this is not responsive
@NurNicoDesigns
@NurNicoDesigns 4 года назад
it does not even work. i copied the exact code and opened it in chrome, vivaldi and edge. you just wasted 1hr of my life.
@ScrappyCoCo0
@ScrappyCoCo0 2 года назад
How does this have any likes? The cards do not scale at all on mobile, and you use pixels for sizes. This looks like crap on both mobile and large screens.
@musicplay5194
@musicplay5194 3 года назад
Good
Далее
CSS 3D Card Design with RGB Effect Tutorial
4:16
Просмотров 42 тыс.
The Secret CSS Padding Trick!
3:16
Просмотров 72 тыс.
Glass Navbar CSS
5:48
Просмотров 32 тыс.
Top 2024 Web Design Trends
5:32
Просмотров 489 тыс.
Cool Confetti Effect JavaScript Library
4:21
Просмотров 28 тыс.
iPhone 16 - КРУТЕЙШИЕ ИННОВАЦИИ
4:50
Развод с OZON - ноутбук за 2875₽
17:48