Over the past few months in-between endless bouts of client work and personal projects I’ve also started to try my hand the dark art that is iOS icon design. It’s something I’m hugely interested in but I’ve always doubted whether I had the pure Photoshop skill to be able to create anything on a par with the best.
While I certainly don’t think I’ve quite reached those heights yet, but I’m pretty pleased with the two icons I’ve come up with here. They’re not for any particular app, more just an experiment in lighting, texture and detailing. Sadly at normal iOS sizes a lot of this detail is lost, which is a shame, but I’ve really enjoyed creating them at the larger 512px size.
Hopefully I’ll get to create an actual icon for a published app soon!
Whilst working on the Electric Bicycle Network’s website I decided I wanted to enhance the the presentation of the images used on the site with an inner shadow so that it looked inset from the border surrounding it.
The normal way of achieving this would be to apply the inner shadow to the source images themselves, an easy job in Photoshop. However, as the client would be uploading and changing these images themselves, this wasn’t really an option. Most clients don’t have access to software like Photoshop, and besides they’re not designers so why should we expect them to do tasks like that?
So my first thought on how to solve the problem was “CSS3!” (which happens a lot these days!). So I applied the styles to the <img> tag, reloaded the page and “BOOM!”. Nothing. The images looked their normal selves, and after checking I hadn’t made an error I realised I’d have to do some Googling to find out why these effects weren’t showing up.
It didn’t take long to browse through the W3C spec and find this little gem, which explains everything.
In terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).
So as the <img> tag always appears above the background, either it’s own or a container, there was no way you could see the inset box shadow on that element.
My solution
Now I’m going to say up front my solution does require a wrapper (in my case an <a> tag). I don’t like adding presentational markup as a general rule, but luckily for my purposes this was fine, as the images needed to link through to other pages anyway, so I simply hijacked the link’s tag for my own nefarious purposes. It also uses CSS3 of course, so IE 8 and less, you’re outta luck (as usual).
Effectively what we’re doing here is creating a new DOM element via CSS (the ::before part) and applying the required styles to that. A bit of absolute positioning puts the new element over the top of the image, completing the effect. You can extend this further by applying :hover styles too, making it quite flexible.
In this example the ‘border’ around the image is purely presentational, but I left it in there to show the inset effect off better. You can take it further by adding a 1px box-shadow or border to the bottom of the image with a colour lighter than the border, to give the effect of light shining off the inset edge (same as that popular technique to make text seem inset).
Conclusions
Since writing this post, I’ve done a bit more research and found there are other methods, such as using z-index to move things around. This is always the case with new techniques, there isn’t always one ‘right’ answer, but I’ve found the above to be very flexible and easy to implement and I hope you’ll find that too.
I’ve also noticed differences between Firefox and Safari/Chrome on how much space the 100% height of the pseudo element takes up, usually too little on Safari and too much on Firefox. This can usually solved by applying some measure of negative margin to the <img> tag, or by specifying an exact width and height for the pseudo element. I’ve done this to my example above just to keep it consistent across browsers. As they always say, your results may differ!
Lawfully Chic is a fashion, art and travel blog run by Mishcon de Reya. I designed and built the site for Well Studio, the agency that looks after Mishon’s portfolio of websites.
The Film Unit takes the prize as my first ever WordPress site designed and built from scratch in just a few days (the client was desperate!). It was a great learning experience, both for WordPress and for Actionscript 3 as I built a custom video player for the site too.
