lvddonck
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.
CSS3 Patterns, Explained
Books made from dead trees, eh? Things from the past! Haven’t you heard we’ve got that spangly new internet thing now?
The top 25 books for web designers and developers
Create awesome retro designs with Photoshop and CSS
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.
Original Hover Effects with CSS3
Blur Menu with CSS3 Transitions
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.
20+ Enhancing CSS3 tools and generators
As introduced/coined by Ethan Marcotte in both his article " Responsive Web Design " as well as his best-selling book , one needs three elements to make a site responsive: A flexible/fluid grid Responsive images Media queries There are plenty of other great articles that cover motives , concepts , and techniques regarding responsive web design, so we'll keep the focus of this article on some top tools that will help you become responsibly responsive. Advertisement <a href="http://ad.doubleclick.net/jump/fut.gb.net/features;kw=CSS;kw=CSS3;kw=Design;kw=JavaScript;kw=Responsive web design;kw=Tools;tile=1;sz=300x250;ord=2013032938?" target="_blank"><img src="http://ad.doubleclick.net/ad/fut.gb.net/features;kw=CSS;kw=CSS3;kw=Design;kw=JavaScript;kw=Responsive web design;kw=Tools;tile=1;sz=300x250;pos=2;ord=2013032938?"
21 top tools for responsive web design
Webdesign
Lichtreclame
Pearltrees videos
Help