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.
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!
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
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.
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.
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.
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?
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
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%);
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? 😁
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
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!
I’m really curious to know how insane the assembly code is for these animations....
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 :)
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 one is amazing!
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.
The second effect is awesome!
Could you use it? I dont know how to use it.
Been there, seen that - 8 years ago in Adobe Flash. Progress :)
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
*To the everyone reading this* : Sending Virtual hugs to everyone who needs it, Stay Safe!🍃
Thanks my Brother. Wish the same to you.
Is this even possible.... i cant even imagine.
Pleez tell me how to drag and drop the 2nd effect code.
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.
Amazing works Bro
Im not able to get the source code for sliding effect. plz give me the source code.
super super duper awesome effects | amazinggggggggggg
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.
Awesome 👏👏👏
Sources code not available that website
Can you please get that 2nd effect code in css?????
How?
Wow this effects are so amazing! Nice video!
Stayed here for the music 💯
Could you use it?
I am unable to get to the source code.. Please help
by which name should all three be saved in (the Second one)
it's literally magic
i cant get the code from the link... pls send me the code....
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
Damn it, what is this , you are Nirvana king
Video with the music is very cool , can we adopt these 3D in to our project
Excellent video
wow!!! But how one can do these using only css... I bet JavaScript is also used...
Nice. It look so cool
i want source code of this designs pls give the link given below...
Really awesome man
You are master
holy~ crap~ super duper Awesome!
What a coder you are !!
Yes, as others mentioned it is deceiving to label this “CSS” as 99% of the actual movement and transitions are powered by JavaScript.
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?
Eventhough touch the image i cant get the source code
Hi
Can i do it without js?
But how we do them "-"?
I cant find the source code.
Sir please make video on coding of this effects... 🙏
source code?? cant find it.. :/
I can't find the source code
sir tell us what when you make the video about number 2
effect
Can I get Number#2 effect source code
Its Wonderful
The source code is not available on all the animations on the link you provided in the description.
Nice designs may i get source cide of first one i.e slice box
All those years learning Flash, Adobe i want my time back
Three.js is hardly a CSS effect :) but awesome effects indeed
@かわいいreo only the second one uses three.js
Rocking dude, and image one is superb superb
Amazing, thank you very much!
Which music is this... 🤔
How u do this which softwer u use
Awesome, will you please make a vedio on this tutorial
How to create these?? Interested..
How to create like this. Please give me Link HTML CSS animation tutorials
please please can anyone tell me whats the source code of Number 8 .3D transform element
There you go
tympanus.net/codrops/2013/08/27/3d-shading-with-box-shadows/
thanks for helping
Effects are awesome, but the audio is fantastic. What is that?
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
What program or text editor are they using?? I'm using Notepad++ and it doesn't run code in-app like that!
How long time is taken to get this css level
What's the source code of number 1,the 3D Slicebox?
Can Anyone provide me codes for first one 3D Slicebox ? I couldnot find it
Can Someone please good recommendation website to learn this I really like this
Google.com
That's crasy
which editor you are using ???
where is source code of animation 1?
Waoo..this is so cool and amazing🤗😘
thank you so much for the controlabel image transition I did it for my website
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
omg amazing
Hello bro
I want to create Google like search engine to search content in my html webpage and get the output need help please
It would be better if you would kindly tell how to program these effects...🙏👍👍😦😦 @Red Stapler
so cool
Can u help me to do 9th one just for images? I'm sure thats easy.
Wow, simply amazing
What's the links?
How can i applied these css effects. Tell me the codes plz
what's the soundtrack? it's nice
Can u plz tell us from where we get code for practice this is really amazing
We can't got source code
these effect stunning but can u post a link to show us how its made?
which complier u use bro. And can u give no.3 script
But sir How to do this plz make a video on how to do this css effect.
I want to learn🙏