Gene Locklin

Responsive Split Layouts

Gene Locklin — Sat, 17 Dec 2011 04:41:26 +0000

Here are three completely overly complicated techniques for creating responsive split layouts. I don't know how it all started. I'm sure it was a post on Forrst. I just got kind of carried away.

These are proof of concept techniques, all achieving the same end result through completely different means. They may not be useful for what they are, but I believe that they still can serve a purpose. They were fun to create, anyway.

Gravatar Style Tucked Corners

Gene Locklin — Sun, 11 Dec 2011 21:02:57 +0000

This post is a collaborative effort between myself, Joshua Hibbert, Scott Parry and Last Rose Studios via forrst.com.

The effect is achieved using pseudo elements. Unfortunately, until we can nest generated content, only two corners can be created without adding another element to the mix. In this example, the bottom corners are created using the footer element. It's rare that that there is only one element on a page, so this shouldn't be a big deal.

There's still a bit of discrepancy between browsers, especially in the way Mozilla handles shadows, but I think it's a good start.

Gradient Borders

Gene Locklin — Sun, 11 Dec 2011 01:14:32 +0000

Here are three and a half techniques for adding gradient borders to elements. I've used images for the example, but the techniques can be used on anything.

The first example, .gradient, can be attributed to a post on Forrst by Cody Swann. The effect is achieved by adding two pseudo elements to either side and solid borders on top and bottom. it's probably the least flexible of the techniques.

The second and third examples, .faux-gradient-fixed and .faux-gradient-responsive are achieved by generating a gradient background for and then adding padding to an element.

The final example, .faux-gradient-responsive-two is achieved by adding a pseudo element background with a negative z-index to an element.

I have no idea if these have been recreated anywhere else. The web definitely has it's innovators. For the most part, though, it seems to be a 100^th monkey situation around here.

Adaptive Background Grid

Gene Locklin — Wed, 23 Nov 2011 15:34:06 +0000

Here's an example of how awesome CSS3 media queries can be.

When I'm working, I always use a grid of some sort, to make sure everything is staying on the baseline. Usually, I either set a grid image to show on hover, as Harry Roberts suggested in his article, Technical Web Typography, Guidelines and Techniques, or I set it up to toggle a class to my HTML, with an absolutely positioned link somewhere on the page.

No matter how I go about it, I always consider staying on the baseline. I hate visiting a site that doesn't. It makes my head hurt. Usually, I end up wasting 10 minutes going into web inspector and fixing the type.

I was browsing Lea Verou's CSS3 Pattern Gallery, when I came across this pattern. It's close to the image that I usually use for my background grid, so I thought I'd modify it and see what happened.

The result isn't very impressive looking, but it's sized in EM's, making it scaleable. Now, using media queries, I can scale my background up as my text scales up.

CSS Biohazard Symbol

Gene Locklin — Fri, 18 Nov 2011 01:06:50 +0000

Biohazard symbol created with css3. I built it at 960px and scaled it down for mobile, but I didn’t spend much time on the < 960px versions. I just halved the math, and halved it again. The smallest iteration is a little lacking, but It’s time to move on. I may come back to it. Probably not though.

CSS Radioactive Symbol

Gene Locklin — Fri, 11 Nov 2011 18:07:20 +0000

Add Depth to Your Webpage

Gene Locklin — Wed, 09 Nov 2011 20:31:09 +0000

Here's an easy to add depth to your webpage using pseudo elements. We add ::before to the body, with a height of 10px and a negative margin equal to the height. Normally this would hide the element, but the spread on the box shadow shows through. It's important that we give the element a width over 100%. If we don't, it leaves a pixel or two without a shadow. Finally, we add overflow:hidden to the body. And Depth. Easy.

Damn it Feels Good to be a Gangsta

Gene Locklin — Fri, 14 Oct 2011 16:36:44 +0000

I suffer from high ideaphoria. Really, it's my work that suffers. It's very rare that I sit down and work all the day on one project. Or ten. I have a total Wikipedia mentality. I start a project and get distracted, and then get distracted from that, and squirrel!

This post was my squirrel for the day. I've used an outdated version of the Multi-column Layout Module. Inside that, I've intentionally thrown the grid off a bit. I've never seen a Sun, but while I was Googling for pictures of the paper, I found that it always looks a bit of a mess. It kind of hurt my brain to do it, but it felt more authentic.

Props to Hip Hop Quoted.