Nowadays, it's possible to create art with CSS. You maybe know it if you read this blog, I share some personal CSS works and also some awesome creations form fantastics developers. In this article I present you some awesome resources you need in order to create your first CSS art. Ready?
While HTML is about defining the content and the structure of a webpage, CSS is about styling the webpage. It means setting colors, fonts, icons, dimensions, margins, paddings, positions, of a webpage’s elements.
To keep it simple, HTML is inert and CSS is fluid.
CSS brings a webpage to life, by applying a coat of paint on its static content, and elevates its purpose through color, space, emphasis and motion. Like art does.
11 ressources to create art with CSS
#1 - Codepen
First and foremost, you need a online platform where you can create and present your CSS arts so that people can also view them.
There are few but I recommand you codepen.io which is a freemium online code editor for testing and showcasing HTML, CSS and JS code snippets.
See the Pen The Brave browser logo in CSS by Daniel (@web-eau-net) on CodePen.
On Codepen, you'll also be able to build your community, find inspiration and techniques to enhance your CSS skills.
#2 - CodeSandbox
If you need to upload images into your CSS project, the best alternative of codepen.io is codesandbox.io
CodeSandbox is a paid online code editor and prototyping tool that makes creating and sharing web apps easier and faster.
#3 - Color Hunt
After setting up your project, you definitely need a good color palette, right?
Picking up the right color is always an important part for any arts/illustrations project.
For this, I recommand you the nice colorhunt.co which is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes.
#4 - Encycolorpedia
Now, let's suppose you want to create a beautiful landscape in CSS. Probably, you need to know the exacts hex code of a landcapse's color.
Lucky you, there is encycolorpedia.com where you can search for it and this awesome tool will give you all relevant results. You will also have a selection of paid pics with your selected color and the color variations.
Fun fact: you can order the matching paint of your color on this site!
#5 - uiGradients
One of the essential things that gives your CSS projects a real and amazing look is gradients.
There also many online tools for gradients and you can pick gradients by your choice from uiGradients.com which is a nice handpicked collection of beautiful color gradients for designers and web developers.
Here, you can rotate the gradients, get the CSS classes of any gradient, adding yours and even download it in a Bitmap format.
#6 - CSS Gradient
Nice but why not create and generate your own gradients?
If you want to create your own gradient, there are lots of free sites available on the internet and one of my favourite one is cssgradient.io which is a free css gradient generator tool. This website lets you create a colorful gradient background for your website, blog, or social media profile.
Besides being a css gradient generator, cssgradient.io is also chock-full of colorful content about gradients from technical articles to real life gradient examples like Stripe and Instagram.
#7 - MarkSheet
To create nice art CSS, you'll probably need to add some transformations in your projects. Transform is one of the most important property that you should know in order to create realistic arts / illustration.
You can learn transform from marksheet.io which is a free tutorial (and always will be) to learn HTML and CSS. It's short (just as long as a 50 page book), simple (for everyone: beginners, designers, developers), and free (as in 'free beer' and 'free speech').
#8 - cssanimation
Animation is another important property amazing CSS illustration for anyone who wants to create art with CSS. To learn animation, there are lots of great tutorials available on Udemy, YouTube etc.
To level up your CSS animation skills, I suggest cssanimation.rocks where you'll find articles, tips and tutorials. Here are some others great ressources:
See the Pen Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh) on CodePen.
#9 - CSS-Tricks
While creating arts with CSS, almost every time you need to make different kind of shapes in your projects.
So, if you want to have a good understanding that how to create shapes using CSS, you must read this article from Chris Coyier himslef The Shapes of CSS where you'll find almost of kind of shapes only made with CSS.
#10 - Clippy
After tranforms and animations, the next level is making complex shapes in CSS arts with clip-path.
This property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.
I've already used the fantastic CSS clip-path maker Clippy for the Brave logo tutorial. I strongly recommand it for your art CSS projects.
See the Pen Clippy - CSS clip-path editor by Bennett Feely (@bennettfeely) on CodePen.
#11 - YouTube channels
To be very honest, a lot of practice is required if you really want to become a master in art CSS. So, you should start with the basic and keep on learning again and again.
I've selected 3 Youtube channels where you can learn and practice CSS:
BONUS - CSS Deck
Need ressources and/or tutorials about CSS? Want to improve your CSS skills with a community?
I'm happy to share with your this great website about CSS: cssdeck.com
Wrapping Up
You have the necessary ressources to make and create your first art in CSS. Take it easy, learning and practising are the best advices I can give you here. Once you've created your first piece of art, don't hesitate to share if in the comments bellow because I'd love earing from you.
I thank Prathkum for his thread which helps me to write this article.
