As Front-end web developers, pixels can be both our friends and worst enemies. Making everything to look nice and sharp for anyone who uses any of the websites we work on, but we need to keep file sizes down for performance. There is pretty way to go about handling patterns and designs on web pages —
CSS-doodle is a library of tools that create art using CSS. CSS-doodle is a web component, just like any other HTML tag
css-doodle. The component will generate a grid of divs by the CSS rules inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph on your web pages. CSS-doodle can be use to create some awesome repeated patterns.
How to use CSS-doodle:
css-doodle. This element is targeted by the library and the contents we add will determine the pattern generated which can also be wrap within a
The syntax of
css-doodleis based on CSS and provided several extra utility functions and shorthand properties for:
- JS API.
Using the CSS Grid layout, the number of rows and columns in the grid is defined by the grid attribute on the element, ranged from 1 to 32. It's default to be 1x1 when no value or 0 is given.
The CSS-doodle component accepts any valid CSS rules. There are special selectors, properties and functions that that you can use to create pretty much any pattern imaginable.
To get started with CSS Doodle head over to https://css-doodle.com There you’ll find code examples and inspiring demos of things you can create with it.
Have fun playing with Css-doodle.