CSS posts

How to code object orientated CSS

It sounds really impossible that a language like CSS can be object oriented but it is possible to implement OOP ideas in CSS to make it into a much more pleasant writing experience whilst along the way making your CSS faster to load. What is object-oriented CSS? ... When you hear “object oriented CSS” you may think that this is somehow a new CSS, a pre-processor or something that was added to CSS but no, object-oriented CSS is the same CSS we have always written; but in a cleaner, dryer way so it's merely...
read more

How to use Animate.css

Let’s face it, the parts of CSS3 that first caught our attention were the animations and transitions. They’re something we never had before without the inclusion of JavaScript. And just because it’s CSS, doesn't mean there aren’t libraries out there to help you. One of them being Animate.css. What is Animate.css? ... Animate.css is a library that comes with dozens of cross-browser fun animations built-in that you can use in your project very easily. It’s the same idea as some of the JavaScript...
read more

How to use currentColor

currentColor is a CSS variable-like feature that's been around for quite awhile now and has reasonably good browser support (it's supported by all modern browsers and their mobile counterparts, and even IE9+, though bugs have been reported in mobile Safari). While most variables are still being used with preprocessors until support becomes more widely established, currentColor can be used as-is. currentColor is super useful under some specific circumstances, and well worth learning (especially...
read more

How to optimize CSS animation with the will-change property

If you have done many animations using pure CSS you have probably noticed a small flicker that happens when an element is animated, you may even have used a hack to stop that from happening. Happily hacks are no longer needed, we a have a new CSS property to help us deal with heavy animations and transitions. Why does the flicker happen? ... When you execute an animation, the animation is performed using the browser's software rendering engine which is usually much slower than your computers GPU (Graphics...
read more

How to use CSS text stroke

CSS3 is evolving in such a way that we can translate pretty much everything we create in Photoshop into CSS code. However one thing we haven't had so far is a text stroke. We can add shadows to text, but until now there was no viable solution for text stroke. Now we have a webkit solution that introduces us to text stroke using only CSS. Browser support ... This property is still experimental and not safe in all browsers but you can also set some defaults that will only act up when the user is using a browser that...
read more

How to use clipping and masking in CSS

CSS is growing more sophisticated all the time, with new tools for us to use. In this article I'll talk about one new feature: clipping with clip-path and masking. clip-path and masking are two properties that push the boundaries of the box model a little further than we've seen before. Browser support ... Happily, browser support is pretty good for clip-path. For desktop browsers it's supported as far back as IE9 (although some older browsers need vendor prefixes, as we'll see). The only real issue...
read more

How to easily use Google Fonts with Sass

In this post, we are going to explore open source fonts and CSS pre-processing. I am going to give you an easy way to add web fonts to any website in just a few lines of code. What are Google Fonts? ... Google Fonts makes it quick and easy for everyone to use web fonts. Google Fonts is a collection of open source fonts that are hosted on Google's servers and with their API, it is easy for anyone to integrate their fonts into any web project. Best of all, it's free. (To learn more and explore the hundreds of fonts available,...
read more

How to use Cute Grids

This is a golden age for frameworks, with dozens for us to choose from. We have great options like Bootstrap and Foundation, but sometimes these frameworks deliver more than we want. Sometimes, all we need is a clean, and responsive grid. Cue: Cute Grids. Why use Cute Grids? ... The idea behind Cute Grids is to get you away from a full featured framework, and focus on just the grid. Cute Grids take a mobile-first approach, so that all of your websites work on mobile as well as desktop. The framework is completely...
read more
Load more