10 visual CSS tools to quickly generate CSS fragments, scumbag, want to abandon me again! !

前端小智
中文

Author: Jatin Sharma
Translator: Frontend Xiaozhi
Source: dev

If 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.

image.png

5. Cubic Curve

Address: https://cubic-bezier.com/

cubic-bezier for CSS animation.

image.png

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.

image.png

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.

image.png

Gradient Multiple Waves

Address: https://www.softr.io/tools/svg-wave-generator

It can generate multiple gradient waves, which is great.

image.png

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.

image.png

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.

image.png

CSS Grid Area

It can generate grid areas. We can name and customize the area according to specific needs.

image.png

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.

image.png

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.

image.png

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.

image.png

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.

阅读 2.2k

终身学习者
我要先坚持分享20年,大家来一起见证吧。
62.9k 声望
95.1k 粉丝
0 条评论
62.9k 声望
95.1k 粉丝
文章目录
宣传栏