from: http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

The Clearfix Technique

Depending on the context of the floated elements a better technique to contain floats may be the clearfix technique. The clearfix technique is a bit more complex but does have better support as compared to the overflow technique.

The clearfix technique is based off using the :before and :after pseudo-elements on the parent element. Using these pseudo-elements we can create hidden elements above and below the parent containing the floats. The :before pseudo-element is used to prevent the top margin of child elements from collapsing by creating an anonymous table-cell element using the display: table; declaration. This also helps ensure consistency within Internet Explorer 6 and 7. The :after pseudo-element is used to prevent the bottom margin of child elements from collapsing, as well as to clear the nested floats.

Adding the *zoom property to the parent element triggers the hasLayout mechanism specifically within Internet Explorer 6 and 7, which determines how elements should draw and bound their content, as well as how elements should interact with and relate to other elements.

Taking the same example from above you can see how the floats are contained and the elements are able to live outside of the parent element.

1
2
3
4
5
6
7
8
9
10
11
12

.box-set:before,
.box-set:after {
  content: "";
  display: table;
}
.box-set:after {
  clear: both;
}
.box-set {
  *zoom: 1;
}

Effectively Containing Floats

Which techniques to use boils down to the content at hand and your personal preference. Some people prefer to stick strictly with the clearfix technique as it is consistent across the board. Others feel the clearfix technique is a bit too much code in some cases and prefer a mix of techniques based on the content. What you decide to use is up to you, just make sure it is well documented and easily identifiable either way.

One common practice is to assign a class to the parent element which includes the floats needing to be contained. Using the clearfix technique for example, Dan Cederholm helped coin the class name group. The group class name can then be applied to any parent element needing to contain floats.

1
2
3
4
5
6
7
8
9
10
11
12

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  *zoom: 1;
}

In the examples above, the clearfix styles would not live under the box-set class. Instead, the class of group would need to be added to the parent element containing the floats.

With so many new trends advancing every year it can be difficult keeping up with the industry. Website designers and frontend developers have been deeply ingrained into the newer CSS3 properties, determining the ultimate browser support and quirky hacks. But there are also brilliant CSS2 code snippets which have been unrequited in comparison.

For this article I want to present 50 handy CSS2/CSS3 code snippets for any web professional. These are perfect for storing in your development IDE of choice, or even keeping them saved in a small CSS file. Either way I am sure designers & developers can find some use for some of the snippets in this collection.

Recommended Reading: 20 Useful CSS Tips For Beginners

1. CSS Resets

Basic CSS browser resets are some of the most common snippets you’ll find online. This is a customized snippet by myself which is based off Eric Meyer’s reset codes. I have included a bit for responsive images and set all core elements to border-box, keeping margins and padding measurements aligned properly.

2. Classic CSS Clearfix

This clearfix code has been around the Web for years circulating amongst savvy web developers. You should apply this class onto a container which holds floating elements. This will ensure any content which comes afterwards will not float but instead be pushed down and cleared.

3. 2011 Updated Clearfix

From what I can tell there isn’t a major difference in rendering between this newer version and the classic version. Both of these classes will effectively clear your floats, and they should work in all modern browsers and even legacy Internet Explorer 6-8.

4. Cross-Browser Transparency

Code Source

Some of the newer CSS3 properties have pampered us into thinking they may be applied everywhere. Unfortunately opacity is one such example where CSS still requires some minor updates. Appending the filter property should handle any older versions of IE with grace.

5. CSS Blockquote Template

Code Source

Not everybody needs to use blockquotes inside their website. But I feel these are an excellent HTML element for separating quoted or repeated content within blogs or webpages. This basic chunk of CSS offers a default style for your blockquotes so they don’t appear as drab and bland.

6. Individual Rounded Corners

Most developers are familiar with the CSS3 rounded corners syntax. But how would you go about setting different values for each of the corners? Save this code snippet and you should never run into the problem again! I’ve included both a condensed version and a longer base with each corner radius broken down into a different property.

7. General Media Queries

Code Source

This is an excellent template which you can find on CSS-Tricks for other bits and pieces of media queries. However I’ve copied their example in full which includes tons of real mobile devices. These codes will even target retina-based devices using min-device-pixel-ratio.

8. Modern Font Stacks

Code Source

It is difficult brainstorming your own CSS font stacks for designing new webpages. I hope this snippet may alleviate some torture and give you a few templates for getting started. If you want to find more examples check out CSS Font Stacks which is one of my favorite resources.

9. Custom Text Selection

Some newer web browsers will allow you to define the highlight color on your webpage. This is set to light blue by default, but you can setup any color value which tickles your fancy. This snippet includes the typical ::selection target along with vendor prefixes for Webkit and Mozilla.

10. Hiding H1 Text for Logo

I first noticed this technique being implemented on the old Digg layout. You can setup an H1 tag which also has your website’s name in plaintext for SEO purposes. But using CSS we can move this text so it isn’t visible, and replace it with a custom logo image.

11. Polaroid Image Border

Code Source

Applying this basic snippet will allow you to implement .polaroid classes onto your images. This will create the old photo-style effect with a large white border and some slight box shadows. You’ll want to update the width/height values to match that of your image dimensions and website layout.

12. Anchor Link Pseudo Classes

Code Source

Most CSS developers know about the anchor link styles and :hover effects. But I wanted to include this small code snippet as a reference for newcomers. These are the four default states for an anchor link, and also a few other HTML elements. Keep this handy until you can memorize some of the more obscure ones.

13. Fancy CSS3 Pull-Quotes

Code Source

Pull-quotes are different from blockquotes in that they appear off to the side of your blog or news article. These often reference quoted text from the article, and so they appear slightly different than blockquotes. This default class has some basic properties along with 3 unique font families to choose from.

14. Fullscreen Backgrounds with CSS3

Code Source

I should note that this code will not work properly in older browsers which do not support CSS3 syntax. However if you’re looking for a quick solution and don’t care about legacy support, this is the best chunk of code you’ll find! Great for adding big photographs into the background of your website while keeping them resizable and fixed as you scroll.

15. Vertically Centered Content

Code Source

Using the margin: 0 auto technique it is very easy to embed content into the horizontal center of your page. However vertical content is a lot harder, especially considering scrollbars and other methods. But this is a pure CSS solution which should work flawlessly without JavaScript.

16. Force Vertical Scrollbars

When your page content doesn’t fill the entire height of your browser window then you don’t end up getting any scrollbars. However resizing will force them to appear and append an extra 10-15 pixels to the width of your window, pushing over your webpage content. This snippet will ensure your HTML element is always just a little bit higher than the browser which forces scrollbars to stay in place at all times.

17. CSS3 Gradients Template

CSS3 gradients are another wondrous part of the newer specifications. Many of the vendor prefixes are difficult to memorize, so this code snippet should save you a bit of time on each project.

18. @font-face Template

Code Source

Here is another bit of CSS3 code which isn’t the easiest to memorize. Using @font-face you may embed your own TTF/OTF/SVG/WOFF files into your website and generate custom font families. Use this template as a base example for your own projects in the future.

19. Stitched CSS3 Elements

Code Source

20. CSS3 Zebra Stripes

Code Source

Possibly the best item to include zebra stripes is within a table of data. It can be difficult when users are scanning 40 or 50 rows to determine exactly which cell is lined up to which row. By adding zebra stripes on default we can update odd rows with varying background colors.

21. Fancy Ampersand

Code Source

This class would be applied to one span element wrapped around your ampersand character in page content. It will apply some classic serif fonts and use italics to enhance the ampersand symbol. Try it out on a demo webpage and see how you like the design.

22. Drop-Cap Paragraphs

Typically you’ll notice dropped capitals appear in printed mediums, such as newspapers and books. However this can also be a neat effect in webpages or blogs where there is enough extra room in the layout. This CSS rule is targeting all paragraphs but you may limit this based on a single class or ID.

23. Inner CSS3 Box Shadow

The box shadow property has offered immense changes into how we build websites. You can portray box shadows on nearly any element, and they all generally look great. This piece of code will force inner shadows which is a lot harder to design around, but in the right cases it looks pristine.

24. Outer CSS3 Box Shadow

In relation to the inner CSS3 shadows I also want to present an outer shadow code snippet. Note the 3rd number in our syntax represents blur distance while the 4th number represents the spread. You can learn more about these values from W3Schools.

25. Triangular List Bullets

Code Source

Believe it or not it is actually possible to generate triangle-shaped bullets solely in CSS3. This is a really cool technique which does look awesome in respected browsers. The only potential issue is a major lack of support for fallback methods.

26. Centered Layout Fixed Width

Code Source

I know earlier it was mentioned how to setup horizontal positioning. I want to jump back in with this quick snippet for horizontal positioning, which is perfect to be used on fixed-width layouts.

27. CSS3 Column Text

Code Source

CSS3 columns would be nice to see in website layouts, but the reality is how we can split up text based on column styles. Use this snippet to place any number of columns inline with your paragraphs, where text will split evenly based on your column number.

28. CSS Fixed Footer

Code Source

This is actually a lot more useful than it sounds, but appending a fixed footer into your website is quite simple. These footers will scroll with the user and may contain helpful information about your site or unique contact details. Ideally this would only be implemented in cases where it truly adds value to the user interface.

29. Transparent PNG Fix for IE6

Code Source

Using transparent images inside websites has become a very common practice. This started with gif images, but has evolved into alpha-transparent PNGs. Unfortunately older legacy versions of Internet Explorer have never supported the transparency. Adding this brief CSS snippet should clear up the problem.

30. Cross-Browser Minimum Height

Developers who have needed to work with min-height know all about the shady support. Many newer browsers can handle this perfectly, however Internet Explorer and older versions of Firefox do have trouble. This set of codes should provide a fix to any related bugs.

31. CSS3 Glowing Inputs

Code Source

I really enjoy this basic custom CSS3 class because of how it overwrites the default browser behavior. Users of Chrome & Safari know about annoying input outlines in forms. Adding these properties into your stylesheet will setup a whole new design for basic input elements.

32. Style Links Based on Filetype

Code Source

Quite the obscure bit of CSS but I love the creativity! You can determine the file type of your links using CSS selectors and implement icons as background images. These may include the various protocols (HTTP, FTP, IRC, mailto) or simply the file types themselves (mp3, avi, pdf).

33. Force Code Wraps

Code Source

The typical pre tags are used in layouts to display large chunks of code. This is preformatted text like you would find inside Notepad or Textedit, except you’ll often notice long lines produce horizontal scrollbars. This block of CSS will force all pre tags to wrap code instead of breaking outside the container.

34. Force Hand Cursor over Clickable Items

Code Source

There are lots of default clickable HTML elements which do not always display the hand pointer icon. Using this set of CSS selectors you may force the pointer over a number of key elements, along with any other objects using the class .pointer.

35. Webpage Top Box Shadow

Code Source

Developers may not find a great use for this other than some pleasing aesthetics. But I really enjoy this effect and it’s definitely something unique! Simply append this CSS code targeting your body element to display a dark drop shadow fading down from the top of your webpage.

36. CSS3 Speech Bubble

Code Source

Numerous user interface purposes come to mind when discussing speech bubbles. These could be handy in discussion comments, or creating bulletin boards, or displaying quoted text. Simply add the following classes into your stylesheet and you can find related HTML codes from this CSS3 snippets post.

37. Default H1-H5 Headers

Code Source

I have offered lots of common syntax including browser CSS resets and a few HTML element resets. This template includes default styles for all major heading elements ranging from H1-H5. You may also consider adding H6 but I have never seen a website using all six nested headers.

38. Pure CSS Background Noise

Code Source

Designers have seen this effect added into websites for a long time, although they generally use repeating tile images with alpha-transparency. However we can embed Base64 code into CSS to generate brand new images. This is the case as in the snippet above which generates a small noise texture above the body background, or you can create a customized noise background over at NoiseTextureGenerator.

39. Continued List Ordering

Code Source

I feel this may not be an extremely popular snippet, but it does have its market among developers. There may be situations where you’ll need to continue a list of items but split into two separate UL elements. Check out the code above for an awesome CSS-only fix.

40. CSS Tooltip Hovers

Code Source

There are lots of open source jQuery-based tooltips which you can implement on your websites. But CSS-based tooltips are very rare, and this is one of my favorite snippets. Just copy this over into your stylesheet and using the new HTML5 data-attributes you can setup the tooltip text via data-tooltip.

41. Dark Grey Rounded Buttons

Code Source

As another helpful template for web developers I have included this simplistic CSS3 buttons class. I am using the class name .graybtn which is appropriate for the colors, but this isn’t to say you couldn’t change the styles to match your own website. Check out the hex values inside a color wheel to match similar hues in different color ranges.

42. Display URLS in a Printed Webpage

Code Source

If you run a news website or resource with lots of print material, this is possibly one of the greatest snippets you’ll ever find. Anchor links in your webpage will look and display exactly as normal. However when printed your users will be able to see the link text along with the full hyperlinked URL. This is handy when visitors need to access a webpage you’ve linked but cannot see the URL in a typical printed document.

43. Disable Mobile Webkit Highlights

Depending on your experience working in mobile this snippet may not appear very helpful. But when accessing mobile websites in Safari and other Webkit-based engines, you’ll notice a grey box surrounds elements as you tap them. Just append these styles into your website and it should remove all native mobile browser highlights.

44. CSS3 Polka-Dot Pattern

Code Source

I was a bit taken back when initially finding this snippet online. But it is a really interesting method for generating CSS3-only BG patterns on the fly. I have targeted the body element as default but you could apply this onto any container div in your webpage.

45. CSS3 Checkered Pattern

Code Source

Similar to the polka-dots above we can also create a full seamless checkerboard pattern. This method requires a bit more syntax to get working, but it looks flawless in all CSS3-supported browsers. Also you can change the color values from white and black to match that of your own website color scheme.

46. Github Fork Ribbon

Code Source

As a big user on Github this basic code snippet blew my mind. You can quickly generate Github corner ribbons in your webpage using CSS3 transform properties. This is perfect for open source plugins or code packs which have a popular following on Github. Also great for hosted HTML/CSS/JS demos if you have an active Github repo.

47. Condensed CSS Font Properties

Code Source

The main reason web developers don’t always use this condensed font property is because not every setting is needed. But having an understanding of this shorthand may save you a lot of time and space in your stylesheets. Keep this snippet handy just in case you ever want to shorten the formatting of your font styles.

48. Paper Page Curl Effect

Code Source

This page curl effect can be applied to almost any container which holds website content. Immediately I thought about image media and quoted text, but really this could be anything at all. Check out the snippet’s live demo page for a better grasp of how these page curls function.

49. Glowing Anchor Links

Code Source

CSS3 text shadows offer a unique method of styling your webpage typography. And more specifically this snippet is an excellent resource for custom creative links with glowing hover effects. I doubt this effect can be pulled off elegantly in the majority of websites, but if you have the patience to get it looking nice you are sure to impress visitors.

50. Featured CSS3 Display Banner

Code Source

Generally you would need to setup a background image to duplicate this effect in other browsers. But in CSS3-supported engines we can generate dynamic banners which hang off the edge of your content wrappers, all without images! These may look good attached onto e-commerce products, image thumbnails, video previews, or blog articles, to list just a few ideas.

More

Here are more articles published in the pass you may be interested in:

• CSS Back to Basics: Terminology Explained
• 20 Useful CSS Tips For Beginners
• 11 Top CSS Editors – Reviewed
• How to Keep Your CSS3 Code Markup Slim
• Reviewing CSS Style Priority Level
• A Guide to CSS3 pseudo-classes

Final Thoughts

The frontend style language for websites has grown into a majority controller on the World Wide Web. The W3C has put out public specs for HTML5 and CSS3, deeming them as the default languages for constructing websites. Both experienced and new developers should be able to enjoy this collection and hopefully find some useful codes.

All readers should be able to copy and save any of these snippets without a required attribution. Mostly all CSS codes released today are held under open source licenses and offered free, based on the publication. I don’t claim to offer every possible CSS code you could ever want, but I’m hoping we got pretty darn close! If you have thoughts or questions about this collection feel free to share with us in the comments discussion area below.

Update(s):

• #01 (27-05-2013) – There was some CSS code errors that turned “bottom” to be displayed as “bottombottom”. It was caused by a WordPress plugin. We had (temporarily) put a fix to it, and will look into other syntax highlighting solutions. Thanks to readers who reported the bug in!

from: http://www.hongkiat.com/blog/useful-css-tricks-you-might-have-overlooked/

If you have been a frontend web developer for a while, there is a high chance that you have had a moment when you were trying to find out how to code something and realised after a bit of googling, that “there is CSS for that”. If you hadn’t, well you are about to.

This post is a collection of such CSS codes, that can give you features like turn an element sticky, give you dashed line underlining capabilities, flow the text of your page in a special shape, or achieve parallax effect. Some of them are widely supported while others are on their way for full support by all browsers.

1. Numbering headings and subheadings

Say you got a set of headings and subheadings in your document and you are numbering them manually or via a script. Instead, you can use CSS counters to do this. There is already an in-depth post on it here. And since it is from a CSS2 spec, you can bet that it is supported by all browsers, except perhaps IE 6.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/GJRLWj/’>GJRLWj</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

2. Spice Up Plain Underlines

Sometimes we want to underline with a nice dotted or dashed line instead of a solid one. Since there is no option for that, we settle for border-bottom. But border-bottom is not a good solution if the text you are underlining wraps.

CSS3 specified not one but three new properties for text decoration text-decoration-color, text-decoration-line, and text-decoration-style which can be shorthanded into the good old text-decoration.

You can use those to style underline, overline, even make text blink, and more. As of April 2015 only Firefox supports this property, but you can enable “experimental web platform features” to use it on Chrome.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/YXzMQw/’>YXzMQw</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

3. Quoting A Quote

First of all, there is no need to bother with typing the correct curly quotes for short quotations because there is HTML for that: the <q> tag that indicates inline quotations.

The <q> tag also takes care of quoting the inner quotes with single quotes. So, where is the “there is ‘CSS’ for that” moment in this?

Lets say you don’t want the default double quotes or you have more than one level of nested quotes, you can define your quote preferences for the quote element with CSS by using the CSS2 quotes property.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/VLwNzv/’>VLwNzv</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

4. Managing Unruly Tables

You may have come across a big table with varying content size per cell which refuses to remain within a width you have specified, no matter what you try. Tame that table with the table-layout property (for equal column height, follow this link).

To be specific, the fix is in the table-layout: fixed; value. When you assign a fixed layout for the table, the table and the cell width are determined by the width of the table or of the first row of cells (which can be defined by the user) and not by the content. This is supported by all browsers.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/NqWmvw/’>NqWmvw</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

5. Make It Sticky

Sticky elements are elements on a page that will not be scrolled out of view. In other words it sticks to a visible area (viewport or scrolling box). You can create this with CSS using position: sticky;.

They act like relatively postioned elements before any scrolling and later like fixed elements once a scrolling threshold is reached. For now, only Firefox supports it.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/zGYXEX/’>zGYXEX</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

6. Get Your Text In Shape

Do you want the text on your page to nicely curve over some image you displayed beside it? You can try CSS Shapes. To implement CSS shapes, we can make use of three properties shape-outside, shape-margin and shape-image-threshold. As of April, 2015 CSS Shapes is supported by webkit browsers.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/RPNNQG/’>RPNNQG</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

7. Mandatory Fields

If you got a form there is a high chance that some fields in it are required while others aren’t. You will need to let the users know which is which. The CSS for this is :required :optional pseudo classes. All modern browsers support them.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/EjxJLB/’>EjxJLB</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

8. Picky With Colors

If you don’t like a certain color, like blue, we can color the selected area with some other color and the ::selection pseudo element is the CSS for that. This is supported by all modern browsers.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/eNYoPo/’>eNYoPo</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

9. Did I Check It?

In a situation where a checkbox has been checked, it would be nice to have another indication apart form the tiny checkmark inside the default checkbox to denote that the item has been checked.

There is CSS for that which exploits the bond between the immediate siblings, two elements side by side. CSS has adjacent sibling selector denoted by the plus + sign,and we can use it to to target the label beside the checkbox. But what about targetting the checked checkbox first? There is the :checked pseudo class for that.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/BNaEOm/’>BNaEOm</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

10. Like A Storybook

Then, wouldn’t it be nice if the first “O” in the “Once upon a time” looks pretty? We can make it look pretty, after all there is CSS for that. Here is where ::first-letter pseudo element comes to the rescue. It targets the first letter of the first line of the targeted element. Read more about it here.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/bdGPWd/’>bdGPWd</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

11. Would You Like To Know More?

An element may have class X or data Y or some other value to an attribute. If we ever need to display such an attribute value of an element near it, we can use the content:attr(X). It retrieves the value of attribute X of the element, then we can show it beside the element.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/bdGXWr/’>bdGXWr</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

12. A Little Bit More To The Left

Centering elements for CSS beginners is quite a feat. Different elements require different set of CSS properties to center them. We will look into one example out of many that is available in the world wide web, so that you can remember again that there is CSS to center things.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/jPEEmZ/’>jPEEmZ</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

13. Disclose File Format Of Links

Ever seen a small image near a link indicating what that link is? A PDF? or a DOC? Yes, there is CSS to achieve that. The content:url() is what we will use to display the image behind the links.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/gpbbKW/’>gpbbKW</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

14. Trigger Parallax Effect

The parallax effect is an effect used to describe the seemingly slow movement of background relative to the foreground. This effect is popular in websites which implement parallax scrolling. There are different ways to implement it, the example below works in Firefox with background-attachment: fixed;.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/XbJJaO/’>XbJJaO</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

15. The Power Of CSS Animations

Probably not a huge “there is CSS for that” moment, because you all are most probably aware of CSS animations by now. But a little reminder is of no harm. There are many uses for CSS animations but here is one for a simple coloring exercise.

See the Pen <a href=’http://codepen.io/rpsthecoder/pen/Jdooyg/’>Jdooyg</a> by Preethi (<a href=’http://codepen.io/rpsthecoder’>@rpsthecoder</a>) on <a href=’http://codepen.io’>CodePen</a>.

50 Useful CSS Snippets Every Designer Should Have