Neomorphic Calculator 🧮 + Dark Mode 🖤
source link: https://dev.to/kerthin/beautiful-neomorphic-calculator-dark-mode-6jm
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Introduction
Over the past year or even more, it is difficult not to pay attention to how interest in Neomorphism is rapidly growing in web design. And indeed, it is difficult to pass by such an unusual approach in the development of interfaces. Also, many developers have been posting their work on various resources for a long time, demonstrating how using simple shadows you can create beautiful and unusual elements. So I also decided to keep up.
Therefore, today I would like to present to you my calculator made in the style of Neomorphism. It also has a Dark Theme, which you can launch using the switch in the upper right corner.
You can download the project from my Github repository or CodePen.
Kerthin
/
calculator-templateSait
A calculator made in the style of neomorphism.
Description
The project is a working calculator made in the style of neomorphism.
Use technology.
The following technologies were used to create this project:
Task-Manager
Software platform
Preprocessors
Package manager
Languages
Plugins
To develop the project through gulp, I used the following types of NPM plugins:
Plugin
Status
Description
Intended for generation of css source maps which will be necessary at debugging of a code.
Minify PNG, JPEG, GIF and SVG images with imagemin
Prefix CSS with Autoprefixer
Pngquant imagemin plugin
Minify JavaScript with UglifyJS3.
Rigger is a build time include engine for Javascript, CSS, CoffeeScript.
Gulp plugin to minify CSS
The UNIX command rm -rf for node.
File watcher that uses super-fast chokidar and emits vinyl objects.
This Gulp plugin enables you to compile your Pug templates into HTML or JS.
Full Page Demo
Dark Mode
CodePen
(See in the format 0.5x)
Responsive
The site is adapted for screen resolutions such as:@media 414px@media 375px@media 320px
The End
Well, that's it. The project is very small, so there is no need to write large texts here. Thank you for paying attention to my article. Goodbye.
I can advise you to subscribe to my Twitter, I also post my works there.
P.S.
After each mathematical action, press the equal sign.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK