Here we are on a Sunday night, and I'm undertaking a tedious task - trying to draw the HTML5 logo (above) using pure CSS and no images.
As someone with a background in CAD and at least a basic grasp of photoshop, it feels like having both hands tied behind my back and painting a picture with my toes...
Having said that, the task has done what it set out (I hope) to do, and I am infinitely more comfortable with CSS's graphic potential than I was this time two days ago.
It seems that even though CSS's primary use was never intended to be for making colourful shapes, there are enough little loopholes in it that some clever folk started making punchy little elements in an array of shapes.
You have the 4 bordered edges of a traditional "block" shape which can be manipulated to form triangles and trapeziuses, standard squares with "transform" to make rhomboids and diamonds, the radius property to make circles and soft edges.
Then you have the option of using an element's inherent pseudo-elements ::before and ::after to give extra little details, make more complex shapes by overlaying the originals, or even whole new shapes.
https://www.popwebdesign.net/drawing-unconventional-shapes-with-css.html is a great visual explanation of border-based and shadow-based shapes.
CSS-tricks has a good article with examples on using ::before & ::after: https://css-tricks.com/the-shapes-of-css.
And this lady just has fabulous skills as a CSS artiste: https://blog.prototypr.io/how-i-started-drawing-css-images-3fd878675c89.
Is there any real merit in designing shapes purely in CSS? Would it be an indication of a sub-par dev if I was to import images I had drawn in photoshop and place them on a site? I can see it's good to know and useful on occasion (to overlay a "Sale" sticker or similar) to use the CSS, but surely when making graphics using an intuitive graphical interface like photoshop (or even trusty old MS paint) has to be the best option. Open to opinions!
Top comments (1)
CSS is one tool in the toolbox. CSS is good for manipulating simple shapes and text. This is because CSS is tied to the hip with HTML markup. If you want to create more advanced graphics then you need to look into SVG and html5 canvas. If you want to do some fancy illustrations as you see in adobe illustrator then you need to research into svg. If you want drawings with precision accuracy like 3d modeling, then look into canvas. To be an expert in SVG and HTML5 canvas, you need to acquire a specialized skillset. You can take a look at this as an intro to svg : w3schools.com/html/html5_svg.asp.