Articles > CSS


15 essential Sass mixins

There are  a whole host of Sass mixin libraries out there: Bourbon is a personal favourite, Compass is hugely popular. But sometimes, actually always, it’s better to pick and mix your mixins to suit yourself. It’s never good to rely too heavily on a tool, and if you think Sass mixins begin and end with the @include statement then you should probably try writing out a few of your own. Sass mixins are available for a huge range of tasks, here’s 15 that no developer should be without: box-sizing...

How to make a ghost button in CSS3

With Halloween just a few days away, this seems like the perfect time to explain how to create an incredibly simple ghost button, in pure CSS. These buttons are referred to as ghost buttons because they have just an outline and let whatever is behind them show through. They’re incredibly popular with startups, because they have a minimal simplicity that fits that style of site. They’re also super easy to make, and can add real impact with just a few lines of CSS. To build one, the first thing you need...

How to use CSS3 animation

In CSS3 we have two ways of creating animations: We have CSS Transitions that allow us to create some simple effects for things like hover; and we also have CSS Animations for more complicated effects. We can in fact create pretty much any animation we want using pure CSS and since it works with keyframes it uses a system we are already used to seeing in software like After Effects and Flash. In this article I'll get you through the basics of animating with vanilla CSS.   Browser support ... CSS Animations...

How to use CSS3 transforms

CSS has developed exponentially in a relatively short time. From a language that began with simple style choices, we’ve developed a sophisticated way of laying out content. CSS3 has tons of amazing features, and one of the key aspects is the ability to modify an element using CSS Transforms.   Browser support ... Browser support for transforms is actually fairly extensive; 2D transforms are supported by all major browsers, including IE9 and above; 3D transforms are supported by all modern...

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...

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...

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...

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...
Load more
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress