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!

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!

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.

Get Lightly

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!

So what does Chronogr.am do you ask? Basically, once you’re signed in to our app (a requirement of Instagram, we wish you could just see the stream without logging in, or needing an Instagram account) you’ll centre on your geographical location. As we’re quite new there may not be any shared photos in your local area, so simply pan around the world map to find some (here’s a tip as we all live in London, there should be plenty there!). The app updates every 5 seconds, so once there are a few people subscribed to it, images should start to appear in real-time quite frequently. Click on the little marker to see an image thumbnail, rollover the image to see the caption (if the user has added one) and then if you like the pic, click on it to see it much larger.

As you can see, it’s quite a simple app, but the excitement (for us anyway) of seeing the little pins drop down as new images are shared felt pretty cool and I think I can speak for all of my fellow ‘hackers’ that we are very proud of what we got out in just 24hrs. If the app becomes popular, we have plenty of improvements and new ideas to expand upon, so if you have Instagram and like the idea, please sign up and start sharing those photos!

One final note, the rest of the team that worked on Chronogr.am were: Marty Batten, Ryan Conway and Mike Jewell. All clever and talented chaps, so check out their Twitters.

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.

The HTML

<div class="border">
	<a class="shadow"><img src="/path/to/your/image.jpg" /></a>
</div>

The CSS

.border
{
	padding:10px;
	background-color:#ccc;
}

.shadow
{
	display:block;
	position:relative;
}

.shadow::before
{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	-moz-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,0.2);
	box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,0.2);
}

The result

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!