Drawing graphics purely using HTML and CSS is nothing new. Try taking the Acid2 browser test launched way back in 2005 and you will get the idea. However, it takes a lot of complicated code to achieve an attractive visual worthy of replacing something you can easily draw using your favorite graphics application. But with recent advancements to the CSS standard as well as the evolution of all the major Web browsers, you can now confidently try out some neat tricks that let you render some clean graphics with just a few lines of code.
Gradients
All those gradient generators you had to try out in the past are pretty much obsolete thanks to some special extensions to the “background” property. In its basic form, all it takes is a single line of code:
#gradient { background:linear-gradient(to bottom, black, blue); }
Of course, you can customize the color values to your liking and use hex HTML codes. Give it a try in a live CSS editor and you will instantly see how awesome these gradients are. There is even a radial gradient property too.
Shapes
Shapes should be very simple to make using any basic graphics tool or online app, but using CSS3 to draw them gives you more flexibility and you can still use them as a framework for making buttons. Drawing a green box using CSS is pretty elementary, but what about a green trapezoid? Here’s how to do it:
#trapezoid {
height: 0;
width: 60px;
border-bottom: 60px solid green;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
Before moving on, give this little snippet a try:
.coolshape {
width: 0px;
height: 0px;
border-right: 120px solid transparent;
border-top: 120px solid yellow;
border-left: 120px solid yellow;
border-bottom: 120px solid yellow;
border-top-left-radius: 120px;
border-top-right-radius: 120px;
border-bottom-left-radius: 120px;
border-bottom-right-radius: 120px;
}
Icons
There are a lot of artistic icons on websites, mobile devices and beyond. But some of these vibrant icons are basically just a neat arrangement of shapes with their own assigned colors and gradients. With CSS3, the possibilities are pretty vast since you can draw different shapes and position them however you want. Getting it to work across different browsers is challenging, but once you mastered the new properties, you will end up wanting to make new minimalistic websites that hardly use any graphics. “Can I Use…” is a good site to check out to find out which CSS3 properties work across the major browsers.