Author: Jatin Sharma
Translator: Frontend Xiaozhi
Source: devIf you have dreams and dry goods, search for [Great Move to the World] attention to this wise brush who is still doing dishes in the early morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test sites, materials and my series of articles.
Today I continue to recommend several artifacts to improve our fishing time. Trust me, you will fall in love with them.
1. Neumorphism
Address: https://neumorphism.io/
This website section or div , it can also customize border-radius , box-shadow etc.
2. Shadows Brumm
Address: https://shadows.brumm.af/
It can generate multiple layered shadows for us, a very cool effect, or customize the color from the curve.
3. CSS Clip-path Maker
Address: https://bennettfeely.com/clippy/
This is the one I used the most. In the early recorded CSS videos, many complex effects were generated by this tool for me, and I recommend it.
4. Fancy Border Shape Generator
Address: https://9elements.github.io/fancy-border-radius/#30.36.29.30--.
It generates a very awesome shape by operating border-radius , we can use it as much as we want in the project, and fine-tune it to achieve the shape we want.
5. Cubic Curve
Address: https://cubic-bezier.com/
cubic-bezier for CSS animation.
6. CSS Gradient
Address: https://cssgradient.io/
If your project often needs to use gradients, then you will love this website. I used it for a long time and it was perfect. Here you can also use some tools, such as gradient buttons and so on.
7. CSS Waves Generator
The following three wave generators can generate any type of waves, and those who are still worried about breaking waves can use them.
CSS Waves
Address: https://getwaves.io/
It can generate simple waves and has some custom features.
Gradient Multiple Waves
Address: https://www.softr.io/tools/svg-wave-generator
It can generate multiple gradient waves, which is great.
Multiple Animated Waves
Address: https://svgwave.in/
It can generate multiple gradient waves, but the main feature is that it can also generate real-time animation for this.
8. CSS Grid Generator
CSS grid
Address: https://cssgrid-generator.netlify.app/
It generates great css for the grid, you can customize it with divs, and it also creates child elements for it.
CSS Grid Area
It can generate grid areas. We can name and customize the area according to specific needs.
9. Loading Animated GIFs/SVGs
Address: https://loading.io/
This website can generate multiple loading animations and download them in SVG, GIF, PNG and other formats, but its biggest feature is that you can customize these animations to a new level.
10. Free Icon Library
Flaticons
Address: https://www.flaticon.com/
This library has 5.7M+ vector icons. Any possible icon can be found here, and you can use it.
icons8
Address: https://icons8.com/
This library also has a large number of icons, you can customize them or use the icons directly without downloading it.
Summarize
I hope you have learned something from this article, and if so, please come to Bozanbe.
~~End, I’m a dishwashing, inspirational person who will go home to set up a street stall after retirement. See you in the next issue!
possible bugs of 1618c5d0b8eb39 code after deployment cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .
Original: https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6
comminicate
The article is continuously updated every week, you can search on [The Great Move to the World] Read it as , reply 1618c5d0b8ebb0 [Welfare] are multiple front-end videos waiting for you, this article GitHub has been included, welcome to Star.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。