CSS3 posts

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

Introducing viewport units

With the introduction of CSS3 we’ve seen huge advancements in web technology, and the last few years have felt like golden ones for anyone working on the Web. One great addition that hasn’t been talked up enough is viewport units. They’re anew kind of CSS3 unit that allow you to size elements relative to the viewport. Browser support ... The browser support for viewport units is surprisingly good. There’s full support in all the latest desktop browsers. IE has had full support since IE9 (although...
read more

Introducing CSS variables

If there is one thing a language needs to qualify as a programming language, it’s variables; they’re incredibly useful, save us a bunch of work and typing, and improve coding all-round. This is exactly what CSS didn’t have. Pre-processors like Sass and Less used them, but vanilla CSS never had variables. Until now. They’ve been on the horizon for a while, but only recently have variables started to be implemented in CSS, let’s take a look at how they work. Browser support ... Currently CSS...
read more

How to create a flip effect with CSS3 transforms

Over the last couple of years CSS has evolved more than we could ever imagined. Styling and layout are now entirely in our hands, although the best thing about CSS3 in my eyes are the Transforms, particularly the 3D ones. With transforms we can move elements through a 3D world, and today I’ll demonstrate this by creating a flip effect. Browser support ... The browser support for 3D transforms is a little lacking, but on the whole not too bad. It’s supported by all webkit browsers using the webkit prefix,...
read more

Feature detection with CSS @supports

Since its arrival, browser support for CSS3 has been variable, making feature detection not just a good idea but best practice. Although this detection is usually done with JavaScript, ideally it would be done within CSS which is where @supports comes in. CSS @supports allows us to have simpler and cleaner feature detection that doesn't rely on other technologies, and works even if JavaScript is disabled. Browser support ... Unfortunately as with so many cool technologies, there is the issue of browser...
read more

15 Online resources for learning web design

There is no doubt that Web design can sometimes be a little intimidating, not only is there so much to learn but the environment is ever changing and it seems as if every day there is something new that you need to learn if you want to stay up-to-date. Don't know where to start? Don't worry we have compiled some of the best resources on the web for learning web design. Some of the suggestions offered here are free while some come at a small cost. Some focus only on HTML while others will teach you anything from HTML,...
read more
Load more