CSS Neumorphic Login Form Design Tutorial
HTML-код
- Опубликовано: 30 мар 2020
- How to create a Neumorphic login form design using pure CSS and HTML. Neumorphism is an upcoming web and UI design trend which is a combination of Material design and Skeuomorphism.
Source Code: redstapler.co/css-neumorphic-...
SVG Icon: svgicons.sparkk.fr/
******** Follow us on **********
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit
******** Studio Equipment *********
Screen Capture Card: amzn.to/3f4wRzP
Mic: amzn.to/2Uy7dKw
Audio Interface: amzn.to/3pspAyJ
#CSS #WebDesign #Neumorphism 
Наука
Awesome tutorial The 3d effect is super cool , Keep up the good work.👍👌
Neumorphic design is so fckin clean and beauty. I hope see this in some future applications
The way you teach is awesome ,calm and wonderful. You are my one of the best teacher. Thank You!!
So they’ve given this a name now? I remember this stuff in 2004 but in flash instead. Great clean tutorial for the web 👍
This is really nice!
thank you it was great job
Hi, I appreciate your work.
Your voice over is also good.
👍Thanks alot DEAR👍
awesome.... gr8 work 👍🙏
well done job. thanks.
Nice work 👏
Amazing Vid!
Great job man! Keep it up. Love from India
Good work.
Amazing design, thank you for sharing.
Amazing vid
This is very nicce..Thanx sir
can you make a tutorial on how to add actually login system with this and were it shows an account section?
Awesome.
Thanks!
Awesome
Hey! Can you please give me some idea for my second video on the theme of html & css?
Hope you answer me.
It's really cool🔥.. How can we make it user interactive by javascript?
Awesome video ++++++ 😃
It's valuable
It's free to use? Thanks for video!
Has anyone done & checked with the same code?
It doesn't looks like this!!!
Darn, you've given away my favorite lazy design :P
why lazy
i know Im kinda randomly asking but does anyone know of a good place to stream new tv shows online ?
@Avery Raymond i use Flixzone. Just google for it :)
@Ricky Jacoby definitely, been watching on flixzone for since april myself =)
@Ricky Jacoby thanks, I went there and it seems like they got a lot of movies there =) I really appreciate it !!
So neumorphic design is basically just some changes in box shadow?
Add input width 100%
I like this.
.fields input {
width:100%;
border: none;
outline:none;
background: none;
font-size: 18px;
color: #555;
padding:20px 10px 20px 5px;
}
I love it but too bad it's not showing full screen on mobile view. Could that be adjusted?
Yes, you should look into responsive design
The stapler is not red...
Nice
You better use em and rem instead of pixels.
In html it is not coming the form.
why didn't you use css variable?
for colors
I don’t understand how someone could click on the 👎 icon . This video is clear fast and all source code is free to use. Thanks a lot 🙏🏽 what could ask ask more ?
.fielde svg{
height:22px;
margin:0 10px -3px 25px;
}
Can I contact you?
vola ... ok ...
first
I don't like this new design trend. It's so easy to get it wrong and as a result, it will be absolutely unusable.
Love your channel, but I hate this fad.
Aside from the skill this takes to accomplish. It is very bad design. Not knocking your ability as a designer. But this is not usable at all. Consider any one that is visually impaired or color blind.. Or simply.. Old. This won't be usable for them. As designers we have a responsibility to our users to follow good design practices. We shouldn't just go along with the hype and design for the sake of showing off or following new trends. I encourage you to rethink your position and approach to design as I'm afraid you've lost sight of the goal behind UI design, make digital products EASY and DELIGHTFUL to USE.
How does adding literally 2 shadows to your design make it totally unusable for colorblind or old people? Not even counting seriously visually impaired people, since they use screen readers. You literally clicked on Neumorphic Tutorial and complain that the tutorial is about neumorphic design. Geez, get off your high horse.
@@michals3089 It's not what was added, it's what was removed. Inputs need to be defined, legible and easy to use. If you think this meets that requirement, you need to reevaluate your perception of usability. And if you really think this is usable design., prove it. Give me some data, or show me some great app or website out there that uses it.. oh wait, there are none. High horses are earned sir, I've earned mine. Show me yours.
@@LexLutherisBald "inputs need to be defined, legible and easy to use" ok, I know it may be hard to judge on youtube, but I actually followed this tut and my results fully meet your quotas. That's why I'm surprised with your reaction. I know not everyone likes neumorphic stuff and it gets boring VERY fast (hence I guess your defensive reaction). But you still pointed nothing precise that's wrong with it apart from mumbling vague design cliches 😅. Sure - things like font/icon weight and forms' bg color could be improved, but it's nothing major enough to call the whole project a bad design.
Also nice job at ignoring my first comment's question, well done switcharoo asking me to prove you what I just asked about (?) Haha
@@michals3089 Ahh, your response is indicative of your lack of experience, but what would I expect from someone watching a tutorial about how to implement a bad design. I did answer your question, but it seems like the answer went over your head. "It's not what was added, it's what was removed. Inputs need to be defined, legible and easy to use." Show me a functional form using this design style, with clear and actionable error messages, a good approach to form validation and all form handling. You are talking about adding two shadows, I am talking about how this design removes any clear contrast between elements and any space or best practice for functional from handling. If you think this is design cliches, you should not work in design. A good rule of thumb whenever doing something you're not good at is to follow the rules until you understand them, then break them where you can justify it. Not blindly follow a hyped design that doesn't make sense.
I did respond to this initially out of anger as I see this "design trend" being popularized by inexperienced designers that do not have the experience to see the flaws in this as easily. But now I'm arguing with you for the sake of arguing as you seem to be absolutely missing the point here. Design is there to solve problems, not for designers to come up with new things that look good but are idiotic to use.
@@LexLutherisBald My man is writing books in youtube comments. 🤣 Seems like you're just another pretentious, very insecure designer. Yes, all you've written are design cliches. If you think there was anything profound in there, you're the one who lacks knowledge (or at least perspective). Damn, I kinda forgot I'm arguing with a person mad that not everyone is outlining their form input fields with a black sharpie for maximum visibility
Awesome