Goodbye Photoshop, Hello CSS3 Pseudo-elements
Good morning, woke up feeling like sharing a little trick that i’ve been implementing in my recent projects…
By now we all know CSS pseudo-elements like ::before and ::after, its great for adding dingbats before headlines or anchors, great for notifications and great for adding that little extra flair to almost anything in a website, without extra markup!
Its about styling that I’ll be talkin about, we all know that graphically bloated websites are a thing of the past, Web Designers, influenced by print, are finally realizing what “less is more” means, the mobile-first philosophy is finally acquiring a decent amount of followers (count me in!) and the top 10 websites of 2012 will most likely be almost fully populated by responsive website (which 2011 didnt see many).
Back to pseudo-elements, more specifically ::before and ::after, i do hope you know what they are if you are reading this, if you dont check http://css-tricks.com/pseudo-element-roundup/ .
Its all about layers, be it layers of objects or layers of effects, i realized that CSS3 today feels like a “chat with Photoshop”, all that is missing are those bloody blending modes (because yes, im an overlay fan), Stick with me here:
You are given 3 layers per markup, the actual object (be it a small span or your html tag), a ::before and an ::after, on each of those, you can set a different color, different shape, different size, different opacity… and stack order, wait did i say opacity and stacking? feels quite photoshopy, doesnt it?
In an era where more and more “CSS3 gradient/shadow/pattern/whatever generators” are popping up like mushrooms, its really easy to replicate your beloved gradient or amazing shadow using lines of code, which brings some questioning regarding browser compatibility and all that, but lets agree here people, that is so 2011…
Okay, enough talking around, check this example: http://jsfiddle.net/YEf2Y/3/embedded/result/
Not much happening there, i agree, but if you look at the css code, there is quite a bit under the hood,
You will find 2 markups with stacking pseudo-elements (using and abusing of transparency) to achieve “photoshop-ish” effects, what im doing is simple, lets take the DIV as an example,
1 - the main object (in this case a fixed width, works just as well fluid) gets a gradient, from half transparent black to full transparent, thanks to http://www.colorzilla.com/gradient-editor/ , and a pair of drop-shadows, specially the quite strong inset shadow (again, rgba, its all about the alpha transparency here!)
2 - the ::before layer gets positioned right behind the object with the same width/height and a padding of your choice so that it bleeds off, and we give it a nice pattern, hosted straight from http://subtlepatterns.com/ , and voila! you have a textured gradient (or a gradiented(?) texture….as you prefer)
3 - the ::after here its optional, but you could easily give that the same width/height as the object, position it between the ::before and the actual object and NO padding, give it a second pattern and you’re left with a nice textured border, pwetty pwetty..
Bear in mind that all this stacking is not possible without the amazing collaboration of the Z-Index property.
So what does all this means?
It means you don’t even need to open (or better yet, depend!) on a software like Photoshop for your graphical needs, bear in mind that im all against website psd mock-ups, what one once called “website paintings”, today is way too easy to http://code.google.com/p/zen-coding/ a clean html5 markup and starting CSSing things out, give your mouse a break (i think every mouse has a trauma of adobe softwares) and say hello to your keyboard (and your http://www.smashingmagazine.com/2010/05/13/css-2-1-and-css-3-help-cheat-sheets-pdf/ if you need one).
Its all about accepting new technologies and their qualities and knowing when to do the move, and above anything, accepting that maybe the approach that you use today are only there due to limitations or lack of proper tools in the past (or maybe they are wrong and we should just rename Photoshop to…iono….Webshop?)