10 Stunning CSS 3D Effect You Must See
ฝัง
- เผยแพร่เมื่อ 25 ก.พ. 2018
- 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/10-stunning-css...
Follow us on
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit - วิทยาศาสตร์และเทคโนโลยี
![[TH] LEV vs TLN | TE vs VIT - VALORANT Champions 2024 DAY 3](http://i.ytimg.com/vi/_AbmrWv2lO0/mqdefault.jpg)
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%);
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
Number 2# effect was made with three.js not CSS
*Puts Number 2# on thumbnail*
Exposing youtubers same
Could you use it? I dont know how to use it
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
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
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? 😁
I love the sound playing in the back
Wow, that 3D 404 spinning ball though. Mind blown!
The second one is amazing!
Wow this effects are so amazing! Nice video!
Rocking dude, and image one is superb superb
Wow, simply amazing
Amazing, thank you very much!
Damn that blows my mind!!
This video shows that how powerful CSS is.
I’m really curious to know how insane the assembly code is for these animations....
thank you so much for the controlabel image transition I did it for my website
I had to subscribe, thanks a bunch :)
Damn it, what is this , you are Nirvana king
holy~ crap~ super duper Awesome!
Woah! You've chosen the wrong word to describe them lol. 'Stunning' is an understatement. They're mind-blowing 😲🤯
number 2 was awesome
Really awesome man
background music is cute :D
amazing bro :)
What a coder you are !!
Awesome !!
Great channel!Subscribed!
That's crasy
The second effect is awesome!
Could you use it? I dont know how to use it.
Nice. It look so cool
I am so glaf i found it again!!!
Awesome 👏👏👏
Been there, seen that - 8 years ago in Adobe Flash. Progress :)
super super duper awesome effects | amazinggggggggggg
Amazing works Bro
omg amazing
so cool
Amazing ！！！
Waoo..this is so cool and amazing🤗😘
Excellent video
*To the everyone reading this* : Sending Virtual hugs to everyone who needs it, Stay Safe!🍃
Thanks my Brother. Wish the same to you.
Wow....amazing...
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 :)
Its Wonderful
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
three js image transition is very stunning
Could you use it? I dont know how to use it
Cool!
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
Amazing
You are great!!!
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.
Awesome
Stayed here for the music 💯
Could you use it?
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
You are master
Wow 👍
Nice
Wow nice
Three.js is hardly a CSS effect :) but awesome effects indeed
@かわいいreo only the second one uses three.js
is the best
OMG!! #2 aawessssome///
Could you use it?
@@facu1190 Nope.. nobody demanded such stuff. its a little dramatic.. but we designers like it.
Is this even possible.... i cant even imagine.
parabens pelo seu canal sucesso para vc..
Can u plz tell us from where we get code for practice this is really amazing
Video with the music is very cool , can we adopt these 3D in to our project
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.
Awesome, will you please make a vedio on this tutorial
Neat!
sir tell us what when you make the video about number 2
effect
Oh my shit, crazy
which complier u use bro. And can u give no.3 script
these effect stunning but can u post a link to show us how its made?
Question, the 2nd one, could be used as an entrance animation? I mean i scrolln down in a section and one simple image makes that defect by itself, one time only. It is possible?
This is so cool.
Sir please make video on coding of this effects... 🙏
All those years learning Flash, Adobe i want my time back
Great now make this work in IE XD
gap yuq
_nice_
WOW
Unbelievable...
May you provide some books so i may be able to reference these in the future?
1:27 that navigation bar looks weird
How can i learn these??
I didn't know some of this can be done in CSS only.
could you please give css code also.I would help us to learn this amazing css code
sir i don't know about 2. controllable image transaction It is not working please tell me how its source run in Dreamweaver
please tell me as soon as possible
Good)
Yes, as others mentioned it is deceiving to label this “CSS” as 99% of the actual movement and transitions are powered by JavaScript.
0:18 that's gonna utilitize 100% of titanXP for sure
Eventhough touch the image i cant get the source code
Effects are awesome, but the audio is fantastic. What is that?
Wow
The source code is not available on all the animations on the link you provided in the description.
Can u help me to do 9th one just for images? I'm sure thats easy.
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.
"Hello World" 😊