8 amazing tricks you can do with CSS3 without using image

Since, CSS3 overcomes many design solution for modern web. So we can use to them to ultimate level as to get maximum advantage of them. Currently images are a important factor (sometimes for design) however, they are also one of the factor to increase page loading time (depend on size of image). So I've got 8 amazing ways to overcome the use of images in design factor. However, their browser capability must be analyzed before usage. Have a look.

CSS arrow

See the Pen Animation to Explain CSS Triangles by Chris Coyier (@chriscoyier) on CodePen.

The pen above explains the concept of CSS arrow.

CSS arrow give a feel of speech bubble and adds a plus point in design. However, before the introsuction of pseudo selectors we use to have images to create these triangular shaped arrows, but now we can create them using pure CSS. cssarrowplease is a great tool to create a customized arrow that can be used instead of image.

CSS fold

That corner fold that give feel of paper fold was once create using images. But now we can create it using simple CSS3. The CSS3 fold is based on that same concept of borders, just a changed trick has evaluated into fold. I used the concept of folding in my last Blogger template, Fifa Madness.

See the Pen CSS3 paper fold by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

While the thing you should make sure is that you should not have any border or shadow dropping out, because that will mess up your fold.

Specific side border-radius

The border-radius has now some specific selection of side. Without circling out all four side you you can curve any of desire side using CSS3. border-radius.com is the best tool to get quick border radius.

Border Image

I get shocked whenever I observe that a very few designers uses this property since it reduces a use of big image a small image. I'm not going in depth of usage, you can learn more about border-image on w3schools. But I can explain how it reduces use of image.

Lets imagine a container need a stylish frame like this

The above image have file size 44KB but instead if you will use a single circle and integrate with border-image, then only 12KB will be consumed. Wow a big difference. These small calculations makes up a healthy site.

CSS Icons

Yes, it is possible (on some extend) to create an icon based on pure CSS (CSS3 for sure). I can't promise to have all icons in CSS3 but on some extend some famous icons have already been drawn on CSS canvas. Like Gmail. These icons can be too complicate to made, however they do reduce the use of image.

CSS3 gradient

For a long time, gradient is been used in designs to give multiple color effect. Before CSS3 it displayed as image, but in CSS you can create various style of gradient. There are two types of gradient you can make that is linear and radical. These gradient can be customized in various ways as described on W3Schools.

Flat Shadow

BE refers to Blogger Ever

You can create flat shadow using the CSS3 property of box-shadow, by repeating it again and again you will achieve your desire shadow. To create it I've described in detail  of flat design shadow in Photoshop and in CSS3.

Gray scale image

Hover on the image above and you will observe a gray-scale effect. I've noticed across the web that instead of using a simple filter property, people are using two images. One for color image and second for gray scaled. On hover they are doing some sort of function to achieve the same result. Using filter you can easily get this and can decrease a use of one image. The filter property is described before in one of my post.