Hyperlinks and buttons are a functional yet in general boring aspect of a website or web application. They tend to provide very little feedback when you interact with them. This doesn't have to be the case, it's very easy to add some simple styling to let the user know that they have either interacted with or can interact with an element. Pseudo-classes And Selectors ... Pseudo-classes for links have been in CSS for many years and for the most part people just reset them all to be the same color and text-decoration....
In the past, the W3C debated whether page transitions belong in our CSS stylesheets, under the domain of web designers, or in our code, under the domain of web developers. After much lobbying by both designers and developers, they created a working draft for transitions. Once this specification is officially adopted, CSS3 Transitions will become a standard tool in web browsers. Until that time, we had to rely on vendor prefixes for this feature. NOTE: IE9 does not support the CSS3 Transitions...
The progress bar has been used on the web ever since we realized that not everything would load instantly for everyone. These bars serve to notify the user about the progress of a specific task in your website, such as uploading, downloading, loading an app etc. It used to be impossible to create a progress bar animation without the use of JavaScript but thanks to CSS3 we're now able to perform animations, add gradients and some multi-color element inside a div. In fact HTML5 has also a special progress...
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...
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...
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...
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,...
CSS3 introduced a novel concept, the ability to specify multiple, layered background images. This allows you to build up an image using smaller parts to create a more complex image. This feature allows you to have one single element instead of one for each image, it also means you don't have to worry about z-indexing as it is automatic. In this tutorial we'll be creating an animated header using layered background images. We're going to then apply an animation to position everything and add some interactive...