10 Stunning CSS 3D Effect You Must See
Вставка
- Опубліковано 18 лис 2024
- Cool CSS 3D effect that you should not miss! Light up your ideas for web design with 10 handpicked 3D CSS examples. Source code is available at: redstapler.co/...
Follow us on
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit
Guys, I'm so sorry. Number# 2 effect was made with three.js and not CSS. It was an error when I put together this video. I'll make sure all the information on next videos are accurate. Thanks for watching and support us :)
You can get source code (click at each image) at: redstapler.co/10-stunning-css-3d-effect-must-see/
Number 10 was also made with THREE.js and not with CSS
please please can u tell me whats the source code of Number 8.3D transform element
please please can u tell me whats the source code of Number 8.3D transform element
tympanus.net/codrops/2013/08/27/3d-shading-with-box-shadows/
Red Stapler, Omg I'm in love with these designs 😃😍 cool bro keep it up!
FFS, I can't even get the text to align to the center of the screen..
Don't worry.. nobody knows how to do it before displayFlex :D
:/
stuck at the same thing, hahahah
Its been a while. Maybe I should get back into some CSS. Aligning text to center might be difficult, but I remember it being easier the more I played around with it.
text-align: center;
or
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Or: How to crash IE.
😂😂😂😂😂😂
Doesn't matter nowadays they begged to don't use it anymore
Sad to see that people still use that garbage browser.
You'd think evolution would develop intelligence at some point.
Guess we're not there yet :)
Good one! xD
Me: how to center a div?
Internet: try
margin: 0 auto
Or
position: absolute
top, bottom, left, right: 0
Me: **tries literally everything**
Page: *text dissapeared, background changed color, half of everything is outside bounds*
flex
for example:
div {
width: 80%;
margin: 25px auto;
}
try that =)
Go and install Brackets code editor. He create suggestions when you start to type something.
My art of programming is half in good code editor!
Second art of programming is to type something than ctrl+z if doesn't work. And always make copy of your code when you achieve good results. If you fuck somewhere, you start again from last successfull job. Just like in a game! The last suggestion from me: Never fucking give up! NEVER! Don't sleep, don't eat! Just make that shit to work!
@@zlackbiro I already use VS Code and have been programming for 3 years now, but thanks :)
@@okie9025 You have something to show to us? 😁
Me: yeah I'm a pretty good programmer
*watches this video*
Me: I suck at programming
you are sickening me!
Alan Johnston html and css arent programming languages
R C people will never understand
Lol CSS and HTML aren't programming languages so you're still a pretty good programmer mate
Parris Bryant technically correct if you go by the title. Funnily most of those effects include Javascript + Frameworks so it actually includes a programming language. There‘s simply everything wrong about this video + these comments haha
Thats nothing. I can write "Hello World" in Python
I can do it in Java! Take that @Neddier! :D ;)
I can do it in every language! take that!!!!
@@SubscribersWithMemes-kd7fz do it in brain fuck language
I can write "Hello World" on my elbow.
I can do this in assembler, take that
I love the sound playing in the back
Wow, that 3D 404 spinning ball though. Mind blown!
This video shows that how powerful CSS is.
NO. 4 is an effect using HTML and CSS, the icons are not linked using HREF or a self owner online database/storage instead they are Icons owned by font-awesome, thought its still an amazing idea. NO. 3 on the other hand was not as amazing as the rest but did have its own perks.
Its disappointing to know that NO. 2 was made with three.js instead of CSS, it would have been the one thing most people came here for. But thanks for the amazing display of hard word and art :)
*To the everyone reading this* : Sending Virtual hugs to everyone who needs it, Stay Safe!🍃
Thanks my Brother. Wish the same to you.
I’m really curious to know how insane the assembly code is for these animations....
wow! But how one can do these using only css... I bet Java script is also used...
Charles Vernon (~¡~)
About second wrote that it is Tree.js (3D js framework). CSS, I guess, only for setting background.
Javascript, to alter CSS tags. Usually it's a matter of what the event is that needs to be measured. (tag):hover is in CSS by default, but ticking events are Javascript sadly. CSS usually does all the drawing though!
That's correct the second one was made with three.js. Totally my fault. I'll try to make sure all the information on next videos are accurate. Thanks for watching :)
codepen.io/zadvorsky/pen/PNXbGo
The second one is amazing!
Woah! You've chosen the wrong word to describe them lol. 'Stunning' is an understatement. They're mind-blowing 😲🤯
three js image transition is very stunning
Could you use it? I dont know how to use it
The second effect is awesome!
Could you use it? I dont know how to use it.
These are surely impressive when used singularly, but often times these effects will have negative impacts upon frame-rates of lower power processors, especially if used in conjunction with a page which has other animations, complex layouts, etc.
Plus...I'm jealous because while I'm competent in CSS my javascript skills are lacking and JS is necessary for most of this. Damnit.
Been there, seen that - 8 years ago in Adobe Flash. Progress :)
super super duper awesome effects | amazinggggggggggg
They are very pretty, and inspirational for CSS rookies like me. But don't think they'd be practical, except for a landing page. And even then you have to think of people with slower speeds, mobile users, etc. Yes, I am fun at parties.
You're right
Amazing works Bro
Excellent video
Nice. It look so cool
The 2nd one is so insane it makes all the others look like average css.
@Dark Code Ah that's cheating, but that's still insanely cool.
Is this even possible.... i cant even imagine.
number 2 was awesome
Stayed here for the music 💯
Could you use it?
Three.js is hardly a CSS effect :) but awesome effects indeed
@かわいいreo only the second one uses three.js
Awesome 👏👏👏
Haha! #5 "Adjust the sine wave of this magnetic envelope so that anti-neutrons can pass through it but anti-gravitons cannot" From the computer retraining Spock's mind on Vulcan after being rescued from the Genesis planet - Star Trek III
it's literally magic
Its Wonderful
All those years learning Flash, Adobe i want my time back
You are master
Really awesome man
What a coder you are !!
Damn it, what is this , you are Nirvana king
Yes, as others mentioned it is deceiving to label this “CSS” as 99% of the actual movement and transitions are powered by JavaScript.
That's crasy
so cool
omg amazing
holy~ crap~ super duper Awesome!
Wow this effects are so amazing! Nice video!
Amazing
How about we don't overload websites with very intensive 3d effects. Over 50% of internet users have dual core CPUs or less, and over 50% use phones of which low powered androids make up the majority. None of the above can render these in any kind of functional way.
Milo Gosnell I’m extremely doubtful that your statistics are correct.
the 2nd one for sure
@Lukholo Molose
Umm.....if it looks cool then what's the problem. Websites are every bit art as they are functionality.
I would argue that any desktop can easily handle a CSS effect. On the mobile site, you would ideally disable anything that wouldn't carry over well, i.e. the one where you move your cursor side to side to transition. Most phones come with about 4GB-8GB of RAM and their processors are incredibly powerful. They legitimately are tiny computers. Javascript might take longer to load, but that's why any effects scripts are put at the bottom, to allow everything else to load first. Android phones have a special way of running the OS, meaning they need more RAM readily available for apps. (honestly, Android's OS RAM management system is really interesting.) This makes it easy for them to run RAM-intensive things like JS or heavily styled CSS.
@@panicwithcompulsion 4-8 GB of RAM is really not a mid-tier device and even in the top-tier devices those specs are relatively recent. Most people will have something more like 2 to 3 Gb or RAM on their phones, remember people don't buy phones as often anymore since Android and apps have stopped asking for more for a long time as well and phones already had more than enough when they we're released.
Rocking dude, and image one is superb superb
This is so cool.
You are great!!!
thank you so much for the controlabel image transition I did it for my website
Video with the music is very cool , can we adopt these 3D in to our project
Amazing, thank you very much!
Wow, simply amazing
Effects are awesome, but the audio is fantastic. What is that?
I am so glaf i found it again!!!
Sir please make video on coding of this effects... 🙏
Wow....amazing...
Cool!
background music is cute :D
That is amazing.
Damn that blows my mind!!
Waoo..this is so cool and amazing🤗😘
Wow nice
1:27 that navigation bar looks weird
The CSS equivalent to Powerpoint's star wipe.
0:18 that's gonna utilitize 100% of titanXP for sure
Awesome !!
I didn't know some of this can be done in CSS only.
and here I am just making buttons blue.. lol
Great channel!Subscribed!
If you feel bad after watching this, just know that even the most popular websites don't do anything this crazy, largely because it's impractical for the average end user.
Effects like these are clearly designed for creatives and businesses who want to make a strong impression to a client more than they are for websites designed for a wide audience. Like the online version of a portfolio or presentation.
wow!!! But how one can do these using only css... I bet JavaScript is also used...
i could not get controlable image transition , its not working ... do we have to write any other thing in html file
where is the source code it is not getting by clicking image how can i find plz help me
"Hello World" 😊
Oh my shit, crazy
Awesome, will you please make a vedio on this tutorial
all these people in comments crying about how to center text
me: " text "
sir tell us what when you make the video about number 2
effect
these effect stunning but can u post a link to show us how its made?
Can u plz tell us from where we get code for practice this is really amazing
Wow 👍
0:20 Mr. CSS I don't feel so good
Awesome
And here I am stuck with css grid.
Sources code not available that website
amazing bro :)
gap yuq
I had to subscribe, thanks a bunch :)
The source code is not available on all the animations on the link you provided in the description.
Can you please get that 2nd effect code in css?????
Im not able to get the source code for sliding effect. plz give me the source code.
Pleez tell me how to drag and drop the 2nd effect code.
i cant get the code from the link... pls send me the code....
Boss: All in to the 404 page.
Nice
What program or text editor are they using?? I'm using Notepad++ and it doesn't run code in-app like that!
Unbelievable...
2:15 is my favorite
How long time is taken to get this css level