Тёмный

10 Stunning CSS 3D Effect You Must See 

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

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

Наука

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

 

25 фев 2018

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 562   
@RedStapler_channel
@RedStapler_channel 6 лет назад
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/
@jonaskohl13
@jonaskohl13 6 лет назад
Number 10 was also made with THREE.js and not with CSS
@MuhammadAbdullah-wu2fg
@MuhammadAbdullah-wu2fg 6 лет назад
please please can u tell me whats the source code of Number 8.3D transform element
@MuhammadAbdullah-wu2fg
@MuhammadAbdullah-wu2fg 6 лет назад
please please can u tell me whats the source code of Number 8.3D transform element
@RedStapler_channel
@RedStapler_channel 6 лет назад
tympanus.net/codrops/2013/08/27/3d-shading-with-box-shadows/
@muhammadusman7217
@muhammadusman7217 6 лет назад
Red Stapler, Omg I'm in love with these designs 😃😍 cool bro keep it up!
@jayanths1221
@jayanths1221 6 лет назад
FFS, I can't even get the text to align to the center of the screen..
@mr21_
@mr21_ 6 лет назад
Don't worry.. nobody knows how to do it before displayFlex :D
@shina7418
@shina7418 6 лет назад
:/
@Makwayne
@Makwayne 6 лет назад
stuck at the same thing, hahahah
@briandoesstuff4831
@briandoesstuff4831 6 лет назад
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.
@shiro9399
@shiro9399 6 лет назад
text-align: center; or position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);
@thisisnotok2100
@thisisnotok2100 5 лет назад
Me: yeah I'm a pretty good programmer *watches this video* Me: I suck at programming
@timbraasch1514
@timbraasch1514 5 лет назад
you are sickening me!
@richardc9325
@richardc9325 5 лет назад
Alan Johnston html and css arent programming languages
@dimo9762
@dimo9762 5 лет назад
R C people will never understand
@pjb7490
@pjb7490 5 лет назад
Lol CSS and HTML aren't programming languages so you're still a pretty good programmer mate
@dimo9762
@dimo9762 5 лет назад
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
@okie9025
@okie9025 5 лет назад
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*
@p4l1ch
@p4l1ch 5 лет назад
flex
@Trina18
@Trina18 5 лет назад
for example: div { width: 80%; margin: 25px auto; } try that =)
@zlackbiro
@zlackbiro 5 лет назад
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!
@okie9025
@okie9025 5 лет назад
@@zlackbiro I already use VS Code and have been programming for 3 years now, but thanks :)
@zlackbiro
@zlackbiro 5 лет назад
@@okie9025 You have something to show to us? 😁
@FactopiaWhimsy
@FactopiaWhimsy 5 лет назад
Number 2# effect was made with three.js not CSS *Puts Number 2# on thumbnail*
@pytykus0072
@pytykus0072 4 года назад
Exposing youtubers same
@facu1190
@facu1190 3 года назад
Could you use it? I dont know how to use it
@AdroSlice
@AdroSlice 6 лет назад
Or: How to crash IE.
@harblot
@harblot 5 лет назад
😂😂😂😂😂😂
@MrNerpp
@MrNerpp 5 лет назад
Doesn't matter nowadays they begged to don't use it anymore
@Schmorgus
@Schmorgus 4 года назад
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 :)
@code4all149
@code4all149 4 года назад
Good one! xD
@remiadebayo
@remiadebayo 6 лет назад
I love the sound playing in the back
@Gaer56
@Gaer56 5 лет назад
Thats nothing. I can write "Hello World" in Python
@Grimar87
@Grimar87 5 лет назад
I can do it in Java! Take that @Neddier! :D ;)
@SubscribersWithMemes-kd7fz
@SubscribersWithMemes-kd7fz 5 лет назад
I can do it in every language! take that!!!!
@Marolafighter
@Marolafighter 5 лет назад
@@SubscribersWithMemes-kd7fz do it in brain fuck language
@vasileandreicalin3143
@vasileandreicalin3143 4 года назад
I can write "Hello World" on my elbow.
@kertaw3853
@kertaw3853 4 года назад
I can do this in assembler, take that
@hemipemi
@hemipemi 5 лет назад
Wow, that 3D 404 spinning ball though. Mind blown!
@carlosas646
@carlosas646 6 лет назад
The second one is amazing!
@luis96xd
@luis96xd 5 лет назад
Wow this effects are so amazing! Nice video!
@rishabhtripathi3569
@rishabhtripathi3569 3 года назад
This video shows that how powerful CSS is.
@rayankhan12
@rayankhan12 2 года назад
Woah! You've chosen the wrong word to describe them lol. 'Stunning' is an understatement. They're mind-blowing 😲🤯
@quasarbeyond7828
@quasarbeyond7828 4 года назад
holy~ crap~ super duper Awesome!
@nargizaliyeva9743
@nargizaliyeva9743 3 года назад
Amazing, thank you very much!
@dfordemo981
@dfordemo981 4 года назад
super super duper awesome effects | amazinggggggggggg
@technopoly2596
@technopoly2596 5 лет назад
Wow, simply amazing
@AnilSahu-zx6wk
@AnilSahu-zx6wk 6 лет назад
Rocking dude, and image one is superb superb
@garygoodspeed9699
@garygoodspeed9699 5 лет назад
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 :)
@vietkhoado5662
@vietkhoado5662 3 года назад
Nice. It look so cool
@jacksonwhitfield8746
@jacksonwhitfield8746 5 лет назад
I’m really curious to know how insane the assembly code is for these animations....
@DeepSpaceX
@DeepSpaceX 5 лет назад
Damn that blows my mind!!
@Benescoli
@Benescoli 4 года назад
That's crasy
@Mani-uk9km
@Mani-uk9km 5 лет назад
Really awesome man
@mynameisdeluxer1074
@mynameisdeluxer1074 4 года назад
thank you so much for the controlabel image transition I did it for my website
@neftaliadrian
@neftaliadrian 5 лет назад
Excellent video
@BigDaddy-zp6hz
@BigDaddy-zp6hz 3 года назад
omg amazing
@koyavasudhalakshmi2073
@koyavasudhalakshmi2073 3 года назад
Awesome 👏👏👏
@hejason3195
@hejason3195 6 лет назад
The second effect is awesome!
@facu1190
@facu1190 3 года назад
Could you use it? I dont know how to use it.
@Budding8660
@Budding8660 4 года назад
so cool
@jonugroho6492
@jonugroho6492 3 года назад
Amazing works Bro
@mustafamahmud2977
@mustafamahmud2977 6 лет назад
number 2 was awesome
@shadabgada937
@shadabgada937 6 лет назад
Awesome !!
@forhadrh
@forhadrh 3 года назад
Cool!
@rutvikcandy7153
@rutvikcandy7153 5 лет назад
What a coder you are !!
@khamdamov
@khamdamov 6 лет назад
I had to subscribe, thanks a bunch :)
@adamstuartclark
@adamstuartclark 3 года назад
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.
@arjunkapurindia7835
@arjunkapurindia7835 5 лет назад
Its Wonderful
@gilmar69047
@gilmar69047 3 года назад
Amazing
@MegaInformazione
@MegaInformazione 6 лет назад
Great channel!Subscribed!
@bayuyudhasaputra3169
@bayuyudhasaputra3169 4 года назад
Wow....amazing...
@philipsfreshairmask999
@philipsfreshairmask999 5 лет назад
Damn it, what is this , you are Nirvana king
@yashsinghproductions
@yashsinghproductions 6 лет назад
wow! But how one can do these using only css... I bet Java script is also used...
@yashsinghproductions
@yashsinghproductions 6 лет назад
Charles Vernon (~¡~)
@2ovob4ehko
@2ovob4ehko 6 лет назад
About second wrote that it is Tree.js (3D js framework). CSS, I guess, only for setting background.
@GuiSmith
@GuiSmith 6 лет назад
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!
@RedStapler_channel
@RedStapler_channel 6 лет назад
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 :)
@buttofthejoke
@buttofthejoke 6 лет назад
codepen.io/zadvorsky/pen/PNXbGo
@sajadr9974
@sajadr9974 6 лет назад
amazing bro :)
@a.chillstechnologies9952
@a.chillstechnologies9952 3 года назад
You are great!!!
@psdmaniac
@psdmaniac 4 года назад
Been there, seen that - 8 years ago in Adobe Flash. Progress :)
@AtomkeySinclair
@AtomkeySinclair 6 лет назад
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
@Leon-cd3dx
@Leon-cd3dx 5 лет назад
Amazing !!!
@abcdetsui6406
@abcdetsui6406 6 лет назад
three js image transition is very stunning
@facu1190
@facu1190 3 года назад
Could you use it? I dont know how to use it
@mdqmatias
@mdqmatias 4 года назад
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?
@shrutivandana3765
@shrutivandana3765 4 года назад
Waoo..this is so cool and amazing🤗😘
@monickverma2944
@monickverma2944 6 лет назад
I am so glaf i found it again!!!
@entelekta
@entelekta 4 года назад
Wow 👍
@daryldeguzman8873
@daryldeguzman8873 6 лет назад
background music is cute :D
@sora4671
@sora4671 5 лет назад
Awesome
@shreyanshsingh2859
@shreyanshsingh2859 6 лет назад
Can u plz tell us from where we get code for practice this is really amazing
@newview8925
@newview8925 4 года назад
You are master
@merukit
@merukit 3 года назад
it's literally magic
@minecrafttraveller9682
@minecrafttraveller9682 5 лет назад
Wow nice
@Prajinrock
@Prajinrock 5 лет назад
OMG!! #2 aawessssome///
@facu1190
@facu1190 3 года назад
Could you use it?
@Prajinrock
@Prajinrock 3 года назад
@@facu1190 Nope.. nobody demanded such stuff. its a little dramatic.. but we designers like it.
@drkillerpubg4901
@drkillerpubg4901 5 лет назад
sir tell us what when you make the video about number 2 effect
@boombaby1769
@boombaby1769 5 лет назад
Neat!
@vishalsrivastava3656
@vishalsrivastava3656 5 лет назад
Is this even possible.... i cant even imagine.
@sewaksingh6189
@sewaksingh6189 5 лет назад
which complier u use bro. And can u give no.3 script
@FRONTRUS
@FRONTRUS 3 года назад
*To the everyone reading this* : Sending Virtual hugs to everyone who needs it, Stay Safe!🍃
@yurashtefanko1603
@yurashtefanko1603 3 года назад
Thanks my Brother. Wish the same to you.
@adhivenkatesh3431
@adhivenkatesh3431 3 года назад
Video with the music is very cool , can we adopt these 3D in to our project
@jaydee177
@jaydee177 5 лет назад
The source code is not available on all the animations on the link you provided in the description.
@hoodiesage5930
@hoodiesage5930 4 года назад
What program or text editor are they using?? I'm using Notepad++ and it doesn't run code in-app like that!
@ShivamKumar-cv7jv
@ShivamKumar-cv7jv 4 года назад
Awesome, will you please make a vedio on this tutorial
@valdobertorabelo4344
@valdobertorabelo4344 3 года назад
parabens pelo seu canal sucesso para vc..
@drkillerpubg4901
@drkillerpubg4901 5 лет назад
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
@noahdrisort2005
@noahdrisort2005 4 года назад
Oh my shit, crazy
@0xviel
@0xviel 5 лет назад
is the best
@mohammadrasoulfard-habibi3066
@mohammadrasoulfard-habibi3066 5 лет назад
This is so cool.
@atsumdaniel134
@atsumdaniel134 5 лет назад
these effect stunning but can u post a link to show us how its made?
@noorb374
@noorb374 2 года назад
i could not get controlable image transition , its not working ... do we have to write any other thing in html file
@LaptopTechnew
@LaptopTechnew 6 лет назад
Nice
@jovicaaleksic8549
@jovicaaleksic8549 6 лет назад
Three.js is hardly a CSS effect :) but awesome effects indeed
@moonythm
@moonythm 5 лет назад
@かわいいreo only the second one uses three.js
@anthonyzornig
@anthonyzornig 2 года назад
WOW
@apexhacker346
@apexhacker346 5 лет назад
May you provide some books so i may be able to reference these in the future?
@xXMacedoniaNXx
@xXMacedoniaNXx 4 года назад
Stayed here for the music 💯
@facu1190
@facu1190 3 года назад
Could you use it?
@asaKew_Music
@asaKew_Music 5 лет назад
gap yuq
@VM_PARMAR
@VM_PARMAR 4 года назад
Sir please make video on coding of this effects... 🙏
@YourShaown
@YourShaown 5 лет назад
_nice_
@osquigene
@osquigene 5 лет назад
The 2nd one is so insane it makes all the others look like average css.
@osquigene
@osquigene 5 лет назад
@Dark Code Ah that's cheating, but that's still insanely cool.
@alimyuparham
@alimyuparham 5 лет назад
wow
@archanadurgam3711
@archanadurgam3711 4 года назад
where is the source code it is not getting by clicking image how can i find plz help me
@adrianmbugua8344
@adrianmbugua8344 5 лет назад
All those years learning Flash, Adobe i want my time back
@rizonrahman2455
@rizonrahman2455 6 лет назад
could you please give css code also.I would help us to learn this amazing css code
@IronMan-ou2th
@IronMan-ou2th 6 лет назад
How can i learn these??
@rksilvergreen
@rksilvergreen 6 лет назад
Effects are awesome, but the audio is fantastic. What is that?
@ashutoshpatra440
@ashutoshpatra440 4 года назад
Nice designs may i get source cide of first one i.e slice box
@mecerre7566
@mecerre7566 6 лет назад
Can u help me to do 9th one just for images? I'm sure thats easy.
@umerbalouch1502
@umerbalouch1502 3 года назад
Pleez tell me how to drag and drop the 2nd effect code.
@nihbo5785
@nihbo5785 5 лет назад
What's the source code of number 1,the 3D Slicebox?
@ahmedsherif1199
@ahmedsherif1199 6 лет назад
Wow
@ravik1884
@ravik1884 4 года назад
Hello bro I want to create Google like search engine to search content in my html webpage and get the output need help please
@purnimabarik9705
@purnimabarik9705 6 лет назад
which editor you are using ???
@uixNinja
@uixNinja 4 года назад
Good)
@nishantshinde8826
@nishantshinde8826 4 года назад
by which name should all three be saved in (the Second one)
Далее
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 892 тыс.
CSS Tips And Tricks I Wish I Knew Before
12:12
Просмотров 417 тыс.
Amazing 3D CSS creations from my community
1:09:06
Просмотров 78 тыс.
Subtle, yet Beautiful Scroll Animations
5:04
Просмотров 1,6 млн
Как ОПТИМИЗИРУЮТ ИГРЫ
11:00
Просмотров 354 тыс.
Three.js personal portfolios are amazing...
13:05
Просмотров 437 тыс.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
How to create 3D Website Designs With No Code
4:24
Просмотров 448 тыс.
The Top 10 Websites of 2022 - CSSDesignAwards
24:45
Просмотров 326 тыс.
Куда пропал 3D Touch? #apple #iphone
0:51
Просмотров 909 тыс.