The latest articles on DEV Community by Wing (@wingleung). https://dev.to/wingleung https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F159308%2Fc2e16137-26d7-40ac-bd86-72320dc4dfe1.jpeg https://dev.to/wingleung en Wing Fri, 17 Jan 2020 07:11:03 +0000 https://dev.to/wingleung/neumorphism-soft-ui-sass-mixin-1cn5 https://dev.to/wingleung/neumorphism-soft-ui-sass-mixin-1cn5 <p>Just a little sass mixin to help implement neumorphism or soft ui styling. It take a color and set box-shadows based on that given color.</p> <div class="ltag_gist-liquid-tag"> </div> <h3> What is neumorphism? </h3> <p>"The neomorphic effect is a combination of the current famous flat UI and the old skeuomorphic principles! The components have a dark box-shadow on the bottom and a light box-shadow on top; the combination of both creates the effect of the elements pushing themselves through your display." <br> ~ <a href="https://medium.com/@s.jagoori/design-trends-neumorphism-59a9ba9d9284">Design trends: Neomorphic design<br> </a></p> <h3> Demo </h3> <p><iframe src="https://codesandbox.io/embed/neumorphism-sass-mixin-kzc1o?module=/neumorphic-mixin.scss"> </iframe> </p> css productivity uiweekly ux