A wonderful collection of some bleeding edge CSS techniques for you to try out. Some of these might not be fully supported, so use in production at your peril!

As time goes by, CSS is becoming more and more powerful. Nowadays, it allows a lot of possibilities. This article is a compilation of fresh, advanced tips and techniques to master your CSS skills.   

cssWarning: Some techniques contained in this article are still considered as experimental. Make sure to check the browser compatibility before you implement them on a production site.

Using SVG for Icons

SVG is supported by all modern browsers and scales well for all resolution types, so there’s no reason to continue using .jpg or .gif images for icons. Note the use of the background-size property to scale the background image on the on container size.

Source: CSS Tricks

Fixed Table Layouts

A widely supported but surprisingly little-known property which changes the way the tables are rendered and gives you a sturdier, more predictable layout.

Source: CSS Tricks

Curve Text Around a Floated Image

The shape-outside is a CSS property that allows geometric shapes to be set in order to define an area for text to flow around.

Here’s the result of the .shape class applied to the image:
curved-text-css

Source: WebDesigner Depot

Intrinsic Ratio Boxes

Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).

Source: AllThingsSmitty

Color Fade on Hover

A very easy way to make your links (or any other element) look better.

Source: Matt Lambert

Style Broken Images

Broken images never look good, but ievery now and then, one or two images on your site are broken. Using some advanced CSS, it is possible to style broken images and provide custom error messages to your visitors.


 

Look what can be achieved with that technique. Way better than browsers’ default, right?
broken-image-css

Source: Bitsofco.de

Empty and Not Empty Attribute Selectors

CSS3 makes it easy to apply different styles to an element regardless of whether a data-* attribute is empty. Have a look at the HTML code below:

And now, our CSS, with specific styling for any div element with an empty data-attr attribute:

Source: Vacheslav Starikov

Comma-Separated Lists

A little snippet to display an unordered list as a comma-separated list. Note the use of :not(:last-child)to ensure that the last list element won’t be followed by a comma.

Source: AllThingsSmitty

Arif Khoja
Arif Khoja is a Developer. He is a Javascript Enthusiatic who loves logical programming and has first hand experience in building a cutting edge internet product using Angular. He is also an open source freak and keen about learning and sharing. He writes Javascript both frontend and backend. He loves learning and sharing tech all the time. He also has a hands on experience in SEO and writes articles about latest emerging technologies.
Arif Khoja on FacebookArif Khoja on GoogleArif Khoja on InstagramArif Khoja on LinkedinArif Khoja on Twitter