October gave me the pleasure of completing the Extract Coffee Roasters’ website. Based on a cracking design by Superfantastic, this site gave me another opportunity to stretch my HTML5/CSS3 legs, but more importantly to learn how to use the excellent Big Cartel e-commerce platform to create the consumer shop part of the site.
I’ve used a few different e-commerce platforms and plugins for WordPress but it goes without saying that, so far, Big Cartel’s is the easiest to use and implement. Utilising a simple HTML templating language (and you can create your own template from scratch, even using HTML5) the possibilities are pretty much endless, especially as you can host images and Javascript on your own domain, very useful if you want the shop to look and function similarly to your main site. Only problem I came across was that Selectivizr won’t work on Big Cartel because of the cross domain issue, so you have to be a bit clever with your use of CSS3 pseudo selectors and getting them to work in IE. Overall though, great platform at very reasonable prices.
So if you’re a coffee-lover, and you want to try some of the best artisan coffee out there, I’d highly recommend you check out Extract Coffee Roasters, I don’t think you’ll be disappointed!
Myself and my mate Marty love the way Reeder displays the screenshots of their excellent RSS reader app. So much so, we thought it’d make a great plugin for jQuery, using CSS3 Animations as it’s base. One of the goals for this mini hack day was to first build our own jQuery plugin, which neither of us had really done before, plus with the release of Firefox 5 we thought we could make the animations themselves work on a few more browsers, specifically FF5 and Opera (and any new ones that support CSS3 Animations in the future).
What we had at the end was version 0.1 of Lightly! It’s early days for this plugin, but we’re so happy with the results that we’re planning on a few updates to make it even better. Hopefully in the next few weeks we’ll add image preloading, captions, configurable box shadows (using CSS3 again) and a few other bits n bobs, fixes, etc. For a demo, just check out any of the project images on this site, as I’ve changed over from the great FancyBox to Lightly recently (gotta practice what you preach!).
If you like Lightly, and have used it on a site, or if you have any problems/suggestions, feel free to get in touch with us via our Twitter accounts; me and Marty.
UPDATE
Version 0.2 has been release, now with image preloading.
For most of April I’ve been working on a site for the The Big Feastival, a micro festival to be held on Clapham Common in support of the Jamie Oliver Foundation and The Prince’s Trust. The festival itself is going to be a mix of great music (The Charlatans, Athlete, New Young Pony Club & more) plus an added twist of serving up great food from Jamie’s own Fifteen restaurant and many others including Cafe Spice Namaste, Wahaca, Barbecoa and loads more.
The site was my first (apart from this one of course!) to use media queries in order to make it mobile-friendly, quite a challenge with such a beautiful and intricately designed site. To help me along I created my own CSS framework that scaled down to mobile (from a wide 1140px starting point right down to iPhone-size), but with a more fixed-width approach, which helped manage how many versions of the graphics we had to serve up and also help with things like jQuery image sliders (which require a width to be specified).
The site was designed by the graphical geniuses at Superfantastic, they’ve done a great job on the branding for The Big Feastival and I’m really looking forward to seeing all the work they’ve put in to the marketing collateral itself at the event. Obviously this will involve fleeting glances as I make my way around all the food stalls stuffing my face!
Tickets for the event are on sale now, so go grab a few and I’ll see you there!
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!
Quick turnaround for the Electric Bicycle Network website this week! This new company offers power-assisted cycling that everyone can enjoy on the hols (even unfit buggers like myself), lovely. I built this site for the guys over at Superfantastic
Superfantastic are a world-class team of designers and marketing experts that I’ve had the pleasure of working with on many of the projects featured on this site. One of them was their own website, which I helped to build and launch in December 2010. And my efforts scored me an iPad as thanks, how lovely is that!
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.
Some tasty treats on offer this week as we’ve put the Chicken Republic site live. Designed by Superfantastic, I helped build this African-owned fast food restaurant’s site, I’ve heard the Spiced Chicken is to die for, yum.
