Constructs

For Susan Robertson of A List Apart, doing CSS audit is like doing a detective job. You can look at the site’s code and dig deeper by seeing how many stylesheets are being called, how they affect the site’s performance and how the CSS itself is written. Your goal is to improve the codebase and make your site run faster.

In her article, she has shared the reasons and benefits to do CSS audit. Some of these benefits include reduced file sizes, guidelines consistency, standardised code and increased performance of the website. Hit the button below to see tips on how to do CSS audit and more.

View More

Guy Routledge has released his new video, this time about text and typography in CSS. In this episode, he covers CSS text attributes that makes for better typography and the best times to use them. Here is a gist of CSS text attributes and values discussed in the video. We hope it will be helpful for both web designers and developers in bringing forth good typography practice when building websites.

• text-align
• text-decoration
• text-indent
• text-overflow
• text-rendering
• text-shadow
• text-transform
• font-family
• font-size
• font-style
• font-weight
• font-variant
• font shorthand
• line-height
• letter-spacing
• word-spacing
• word-wrap
• white-space

Hit the button below to watch, and tell us what you think.

Watch the video

The three most popular CSS Preprocessors at the moment are SASS, LESS and Stylus. In this Queness article, author Paula Borowska elaborates what makes CSS preprocessors great by presenting some side-by-side comparisons between SASS/LESS codes and regular CSS codes. This is a good introductory article to the world of CSS Preprocessors for readers with intermediate CSS knowledge.

Read More

Time for another feature of Codepen demo! This time, Chris (@Colouryum) has created this awesome SVG hover effect to his SVG bulb by using only pure CSS. By applying style to four selectors, the bulb will be animated according to time values assigned in the CSS transition property when on hover. In the second link, he has also created the same SVG hover effect for responsive version.

View Demo   View Responsive

In her search form demo, Paula Borowska will be showing four different takes on how you can spruce up a search input with the help of CSS transitions. Nothing too crazy – there are about four different search box styles – styled with background fade, expand input on hover, increasing icon size on hover and button will appear on hover. Find out more by hitting on the buttons, please!

View More   View Demo

Chris Coyier showed us the mechanics behind Lucas Bebber’s stunning CSS effect called Glitch. Chris created three copies of the desired area via pseudo elements and these copies are positioned right on top of each other and they can be controlled individually. View more to see his complete guide to create the CSS glitch effect. Also check out Chris’s own version of the effect at the end of the article.

See how it’s done

There are many ways to center things in CSS and it depends on the situations and creativity of the front-end developer, which can sometimes be quite confusing. Thanks to Chris Coyier, he has created a complete guide for centering things in CSS. Also covered in the article is how to CSS center things in different situations for vertical and horizontal modes respectively, and also for both modes at the same time. Very useful.

View More

Filter.css is used to apply image filters, patterns and colour blending, especially useful for making full image background appear better. To apply the CSS image filter effects, you’ll simply need to add class name. For example, class="grid" applies a grid filter to the desired area in an HTML file. David Furlong has prepared five examples in the demo page showing blurred and overlay filters among all. You can also combine several filter classes for more design control. Visit the link for a list of applicable class names and demo.

About FILTER.CSS   See the filters in action