Many of you have probably seen my CSS3 patterns gallery . It became very popular throughout the year and it showed many web developers how powerful CSS3 gradients really are. But how many really understand how these patterns are created? The biggest benefit of CSS -generated backgrounds is that they can be modified directly within the style sheet. This benefit is void if we are just copying and pasting CSS code we don’t understand.
Books made from dead trees, eh? Things from the past! Haven’t you heard we’ve got that spangly new internet thing now?
This article first appeared in issue 216 of .net magazine - the world's best-selling magazine for web designers and developers. The word retro derives from the Latin prefix retro-, meaning backwards or in past times. It’s a culturally outdated or aged style that has since become functionally or superficially the norm once again. It generally implies a vintage of at least 15 years. We can be tempted to use a retro style in our work simply because it feels cool or different, or because it follows a current trend. But before we dive into our sketchbooks or delve into Photoshop, it’s important to examine why we’re contemplating using the style, and whether it really suits the brief.
The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. View demo Download source Please note that this will only work properly in modern browsers that support the CSS3 properties in use.
There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we'll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering. View demo Download source There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements.
CSS3 is an enhanced version of the Cascading Style Sheets specification, and it comes with many enchanting features that revolutionize Web layout and design, as well as other advantages. But it has some disadvantages as well, and tackling them requires smarts. CSS3 is new on the market, so there is still a lot to improve. The major problem is that the properties are browser-specific and cannot be easily implemented across browsers.