February 19, 2012 • by
Wes Hatch
The dilemma… one of our designers recently presented me with this:
It represents one row in a list of filtered items, or three <li>s to be precise. Depending on how many items are returned, there could be one, two or three in the last row.
Look closely.
See the shadow between each item? See how it spills over onto neighbouring items? If there is a neighbouring element to the right, it casts a shadow on to the element to the left, while the last item in the row has no shadow. Also, the paper background is subtlety different for each slot in the row. Yeah, it all looks great, but how is this going to work in practice? Couldn’t each <li> just have the same background – with the shadow – and uh, we’ll hope it won’t be too weird for the last element in the row? A mere CSS apprentice would probably cave and go this route.
Here’s a neat trick. Rather than slicing up the image and trying to finagle each slice onto the first, second or third element in the row by appending different classes to every <li>, we do the following:
- First, we remove the shadows between items from the image (thankfully, this entails simply deactivating a layer in Photoshop)
- We also leave the image whole, in its entirety. No slicing. This in itself is quick and easy.
- We take this image and assign it as the background to every <li>.
- We offset it in each item using the handy nth-child selector. (What, not supported in IE? No problem, we’ll come to that.)
First, though, let’s define the html structure we’ll use:
<ul class="paper">
<li><div>...</div></li>
<li><div>...</div></li>
<li><div>...</div></li>
...
</ul>
And, some general styles for each li, as follows:
ul.paper li {
background: url('images/paper-list-items.jpg') no-repeat;
float: left;
padding: 10px 0;
margin: 0 -6px -10px -6px;
Note that we have negative margins. This is because I want each element to overlap by 12px (margins only collapse vertically, so -6 and -6 will add to -12px, here). We see that I’ve also set the background image, and have floated each element.
Next, we add the shadow in. We’ll use the child <div> for this purpose – we don’t necessarily want to always see the shadow and want to be able to style it independently, so we don’t use the parent <li> for this. While we’re at it, let’s add some padding and define the dimensions:
ul.paper li div {
background: url('images/list-item-shadow.png') 0 0 no-repeat;
padding: 30px 30px 20px;
width: 200px;
height: 180px;
}
Okay, so at this point every element looks the same. We haven’t done anything fancy just yet, although the shadow that we just added will appear on top of the element to the left because we’re overlapping each <li> a little bit. Now, using the :nth-child selector, we shall make this look and behave as we’d expect.
Basically, the :nth-child selector allows you to target only certain items in a long list of elements. For example, we could add styles to every 2nd element, every 7th element, only odd elements… or whatever we wanted, really, using the some fancy filtering syntax. In this case, we want specific styles for the first, second and third elements. Because this design has 3 elements per row, we’ll want to target every third <li> accordingly. Part of the syntax for targeting the first, second and third elements of a row “n” looks like this:
3n - 2 /* every third element, minus 2 */
3n - 1 /* every third element, minus 1 */
3n /* the 3n means every third element */
And the complete css would then look like this:
ul.results li:nth-child(3n-2) { } /* first in row */
ul.results li:nth-child(3n-1) { } /* second in row */
ul.results li:nth-child(3n) { } /* third in row */
(We don’t actually need to add any styles for the first <li> element in each row (as the default background position is always top / left), but I wrote the filter syntax for completeness).
Let’s now fix the background positioning for each <li>:
ul.results li:nth-child(3n-1) { background-position:50% 0; }
ul.results li:nth-child(3n) { background-position:right 0; }
And finally, let’s ‘nix the shadow background on the first element of every row:
ul.results li:nth-child(3n-2) div { background:none; }
Putting it all together, we use only one big background image and offset it appropriately for each <li>, and we then add a paper-shadow image to only the second and third elements in every row:
ul.results li:nth-child(3n-2) div { background:none; }
ul.results li:nth-child(3n-1) { background-position:50% 0; }
ul.results li:nth-child(3n) { background-position:right 0; }
I also mentioned that this will work with IE. Well, the solution isn’t anything fancy, I’m afraid. Here, I’m just including selectivzr.js to add CSS3 selectors to IE. Now, you can CSS away!
February 2, 2012 • by
Wes Hatch
I’m just in the final throes of completing a site, and it feels great. However, I recently took a moment to survey the bulk of the code I had generated, and I reflected upon the avenues for improvement and refinement. While such a thing is probably not wise immediately prior to signing off on something (as it could potentially lead to untimely code refactoring), I did identify a number of redundancies in my CSS that I thought could be easily cleaned up.
The site design calls for many elements arranged into columns and rows, for which I was using floated <li>’s to generate. The difficulty is that the elements were of unknown (and variable) height, giving rise to a common problem when floating elements: they don’t clear nicely and thus won’t arrange themselves into neat rows.
Early on in the development process, I had solved this issue with a little CSS3 sugar. I like to use the following rule to create “self-clearing” rows:
.somecontainer li { width:220px; margin-left:30px; float:left; }
.somecontainer li:nth-child(3n+1) { clear:left; margin:0; }
What this particular bit of CSS does, then, is to create rows of 3 elements each, where each element is 220px wide and avoids getting stuck as per the image, above. How this works is by setting the first element of every row (i.e. every “third element plus one”… which works out to be first in the next row) to clear:left. Great, now it doesn’t get caught and clears as it should. Likewise, we could also create rows of only two elements with this bit of simplified CSS:
.anothercontainer li { width:340px; margin-left:40px; float:left; }
.anothercontainer li:nth-child(2n+1) { clear:left; margin:0 }
Notice the larger <li> widths to accommodate 2 elements as opposed to 3, but the total width works out to be the same. Okay, this is all fine and dandy, but the problem I was facing is that I had had these declarations everywhere, in use with many different containers (“.somecontainer”, “.anothercontainer”, “.yetanotherwithslightvariations”, “.etc-container”). I didn’t like having to rewrite the same rules over and over, with sometimes slight alterations, so I extracted the important bits and rolled them together to get this:
.rowify._2 li { width:340px; margin-left:40px; float:left; }
.rowify._3 li { width:220px; margin:30px; float:left; }
.rowify._2 li:nth-child(2n+1),
.rowify._3 li:nth-child(3n+1) { clear:left; margin:0; }
The slick thing here is that you can give these classes to any <ul> and it will rowify the elements into 2 or 3 per row. For example:
<ul class=”rowify _3″> => instant, self-clearing rows !
<ul class=”rowify _2″> => the same, but with 2 elements!
The underscore is required because strictly speaking you cannot start a css class name with a digit; also, class names need to be at least two characters long, so the underscore helps there, too.
Okay, and finally, this won’t work natively with Internet Explorer versions 8 and older. However, let me recommend the excellent selectivizr, which I use in all my projects. It adds the ability to use CSS3 selectors in browsers that do not natively support them, and then you to do all sorts of crazy aforementioned fun CSS3 stuff.
January 5, 2012 • by
Wes Hatch
We are very fortunate to be hosting an electronics workshop in our studio (a.k.a. the Woodshop). I’ll be running things, while tech whiz Adam Brown will be providing the technical expertise. We’re going to be doing basic soldering techniques as well as showing how to read / understand simple circuitry diagrams. And, to what end? Well, so that participants may assemble their very own futuristic light-controlled frequency oscillator. From the future.
This device will make noise–simple tones and such, and the frequency of the tone will be controlled by light (if all goes well). I’m looking forward to what things people do with these. Maybe we can put our mixer to good use….? Anyhow, our hope is that, at the very least, everyone has fun learning how simple circuits work and has a good time. And they will have a good time.
Electronic Noise photo-controlled oscillator workshop
The Woodshop 5445 de Gaspé #105
Sunday January 15 at 3pm-6pm
https://www.facebook.com/events/292935607419054/
January 3, 2012 • by
Colin Vernon
Lots has happened to the extended Stresslimit family in 2011, and I’m not going to try to summarize but I wanted to share a few thoughts and pictures here. A lot of what we do involves sitting at a laptop clicking & typing away, which is not very photogenic, but I’ve pulled out a few image-worthy moments.
First, a blast from the past above—a group brainstorming and process meeting led by UX lead Francis Raymond [standing up; now Senior UX at Huge Inc in NYC] with [from left to right]: designer Kathryn Dreier [also now back in NYC]; controller Eric Fillion [concentrating on his masters in music and small historical Québec record label Tenzier]; programmer and front-end engineer Wes Hatch [continued core Stresslimit team member and expanding to Node.js for our friends Mouna & Melissa at Daily Tous les jours]; founding partner and former president of Stresslimit Justin Evans; project manager Eric Craven [now director at the Digital Literacy project at Atwater library]; photographer & designer Yannick Grandmont [continuing his freelance work with the New York Times and tons of independent music projects]; the empty chair was mine, Colin Vernon, founding partner and acting president of Stresslimit [also director of independent record label No Weapon].
Below, another great moment from this past spring, we have Joey Kudish setting up our js/css teleprompt system on iPad for the live webcast of Bu sur le web with Aurelia Fillion. We had set up a feedback console for the program manager to read real-time twitter & facebook comments, from which he could choose the most relevent and paste into a field that would show up on the teleprompt. The teleprompt itself was a simple html page which would poll the feed of comments selected by the program manager, and display them using the webkit transform to make them appear mirror image—necessary so that the teleprompter mirror would make them readable again to the host.
Another picture-worthy moment was my wife and super UX/UI designer, strategist and theorist Céline Semaan [or celinecelines in the inter-world] leading a panel conversation at South by Southwest in March on emerging Arab identities in the wake of the then fresh Arab Spring revolutions in North Africa and the Middle East. In this photo we can see the four panelists: Jon Philips or Rejon as he is known, Ayah Bdeir of recent Little Bits fame, CélineCélines with the microphone, and Habib Haddad, entrepreneur and founder of Yamli and YallaStartup and CEO of Wamda. To the right we can see Blue Sponge‘s Fady Atallah and wife Mouna Andraos behind him, and the back of technology and democracy activist and speaker Katherine Maher‘s head. Author and friend Julien Smith showed up but didn’t make it into this shot :)
Now we have a bit of a before & after montage of the new Stresslimit office/atelier space—we moved in August/September. On the right you see the woodshop that was occupying the space before, and at the left is The Woodshop [as we are continuing to call it], cleaned and empty, primed and ready to go.
A few personal notes now. First, taking a place of honour in the Woodshop now is a free piano that Wes hooked us up with from a piano repair shop that has a yearly giveaway. It is a Willis Piano, proudly made here in Montreal—locals can see the paint fading from the brick of an old advertisement at Ste-Catherine and de la Montagne as below; I’ve pulled out a detail so we can really see the old sign.
A bit of frivolity: out with the old, in with the new…. running shoes!
And now the most magical amazing thing for last…. in the early hours on December 31st, the last day of the year, my wife went into labour, and it was just a few hours into 2012 that our first daughter, Selah Grey Vernon was born. Here she is just a few minutes after being born:
And below,a bit later at home. I know the last thing the world needs is another “proud parent” spamming the world with pictures of their baby, but it’s worth it for the news just this once :)
December 21, 2011 • by
celinecelines
I can hardly believe it has been already ONE year since the last Creative Commons Salon in Montreal, on Dec. 21st 2010! ONE YEAR!! So much has happened since then, but unfortunately so little in terms of collecting, organizing, and archiving the content that was produced and presented then… I have uploaded all images captured of the event by my friend Marie-Julie Garneau. That is a first step. I will later on upload all power-point presentations to a CCMTL slideshare and share them. Also we have everything on tape! All the footage from all the talks that I’d love some help to digitalize / edit them, so ping me if interested!
CC Salon Montreal in Retrospect, a year later
continue reading
