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/
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.
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
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*
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!
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 :)
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 :)
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.
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.
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
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.
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.
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?
The slicebox is broken. At the time of this writing, the previous image functionality is broken in Firefox, and chrome, and the entire thing is completely broken in IE.
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
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
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? 😁
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
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.
I’m really curious to know how insane the assembly code is for these animations....
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 :)
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
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.
*To the everyone reading this* : Sending Virtual hugs to everyone who needs it, Stay Safe!🍃
Thanks my Brother. Wish the same to you.
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.
super super duper awesome effects | amazinggggggggggg
The second one is amazing!
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
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.
Been there, seen that - 8 years ago in Adobe Flash. Progress :)
Is this even possible.... i cant even imagine.
Damn it, what is this , you are Nirvana king
Three.js is hardly a CSS effect :) but awesome effects indeed
@かわいいreo only the second one uses three.js
Awesome 👏👏👏
That's crasy
number 2 was awesome
What a coder you are !!
Wow this effects are so amazing! Nice video!
holy~ crap~ super duper Awesome!
You are master
Really awesome man
it's literally magic
so cool
omg amazing
Rocking dude, and image one is superb superb
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
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.
Its Wonderful
Amazing
Video with the music is very cool , can we adopt these 3D in to our project
Amazing, thank you very much!
Effects are awesome, but the audio is fantastic. What is that?
This is so cool.
You are great!!!
Wow....amazing...
thank you so much for the controlabel image transition I did it for my website
Yes, as others mentioned it is deceiving to label this “CSS” as 99% of the actual movement and transitions are powered by JavaScript.
Wow, simply amazing
Waoo..this is so cool and amazing🤗😘
Cool!
I am so glaf i found it again!!!
That is amazing.
Damn that blows my mind!!
background music is cute :D
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?
What program or text editor are they using?? I'm using Notepad++ and it doesn't run code in-app like that!
All those years learning Flash, Adobe i want my time back
where is the source code it is not getting by clicking image how can i find plz help me
The source code is not available on all the animations on the link you provided in the description.
wow!!! But how one can do these using only css... I bet JavaScript is also used...
Sir please make video on coding of this effects... 🙏
Can u plz tell us from where we get code for practice this is really amazing
Awesome !!
i could not get controlable image transition , its not working ... do we have to write any other thing in html file
Awesome
Great channel!Subscribed!
Wow nice
The slicebox is broken. At the time of this writing, the previous image functionality is broken in Firefox, and chrome, and the entire thing is completely broken in IE.
these effect stunning but can u post a link to show us how its made?
OMG!! #2 aawessssome///
Could you use it?
@@facu1190 Nope.. nobody demanded such stuff. its a little dramatic.. but we designers like it.
I had to subscribe, thanks a bunch :)
Awesome, will you please make a vedio on this tutorial
It would be better if you would kindly tell how to program these effects...🙏👍👍😦😦 @Red Stapler
sir tell us what when you make the video about number 2
effect
Boss: All in to the 404 page.
Nice designs may i get source cide of first one i.e slice box
What's the source code of number 1,the 3D Slicebox?
Im not able to get the source code for sliding effect. plz give me the source code.
1:27 that navigation bar looks weird
gap yuq
Wow 👍
0:18 that's gonna utilitize 100% of titanXP for sure
I didn't know some of this can be done in CSS only.
Oh my shit, crazy
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
Sources code not available that website
which complier u use bro. And can u give no.3 script
i want source code of this designs pls give the link given below...
May you provide some books so i may be able to reference these in the future?
Pleez tell me how to drag and drop the 2nd effect code.
amazing bro :)
The CSS equivalent to Powerpoint's star wipe.
Can you please get that 2nd effect code in css?????
what's the soundtrack? it's nice