Saturday, 1 January 2011

LESS CSS Grid

A couple of weeks ago I wrote a flexible, variable-controlled CSS grid in LESS. The idea was this: create a grid that could be customized in just about any and every way imaginable. Although I haven’t done extensive testing, I feel that I was very successful.

The grid is controlled by 3 variables located in top of the document, controlling the total width, number of columns, and spacing between each column. Changing the values of these will give you just about any grid imaginable.

I could go on about it here, but you may as well head over to the project repo on GitHub instead, where I plan to maintain the project. Feel free to fork it — I’m pretty happy with what I’ve got, but as with practically everything on the web, I know it could be better.

Monday, 20 December 2010

CSS3 Progress Bars

Just over a week ago I announced my CSS3 sticky note experiment and the response was amazing. A huge thanks to everyone that shared them! Today I have a new project to share — CSS progress bars.

The Process

One of my big goals was to use as little markup as possible — my target was just one element. Although it took some creativity, I was able to pull it off by making extensive use of CSS’s :before and :after psuedo selectors.

I started off with a <div> with a class of progress-bar as my base. I rounded the corners and gave it a partially transparent, black background. To this added a few subtle box-shadows to give it some depth.

Next, I set up a few global styles for my :before and :after selectors, setting the content: ''; and giving them the size and position I wanted. Then, to the :before selector I added my gradient. At this point, I had a fairly nice looking progress bar, but I still wanted to add the vertical striping. To do this, I used the :after pseudo selector and set the content as follows: content: '|||||||||||||||||';. After that, it was as easy as cranking up the font-size up to 120px, skewing it with a skewX transform, and messing with the letter-spacing until I got the spacing I wanted.

Demo / Download

I’d like to shoot a big thank you to Martin Staněk and his CSS3 striped buttons experiment for showing me how to stripe the bars — they wouldn’t have looked nearly as good without them.

If you’ve got any questions, comments or complaints, tweet me @galengidman.

Monday, 13 December 2010

CSS3 Sticky Note

Back in August, Christian Heilmann over at Nettuts wrote a post in which he created CSS-only sticky notes. While his result was decent, I began to wonder if I could do better.

Process

I started with a container <div> that served as the base for the sticky note. To this I applied a CSS gradient that faded between 3 different shades of yellow (#ffee66 to #f5da41 to #f6ef97). I applied a couple of small box-shadows that gave it some depth.

Next it was time to create the two angled shadows under the note that give it the curled effect. To do this, I used :before and :after pseudo selectors with content: '';. This essentially gave me two elements I could manipulate without crudding up the HTML. I made them I gave them a partially transparent black background using rgba and applied a black box-shadow to give them a blurred look. After that it was simply a matter of positioning them and setting the z-index to -99 so they would show up behind the note.

To give it even more of an authentic look I found a handwritten font on the Google Font Directory that looked pretty good.

Demo / Download

Let me know if you guys can think of anything that could be improved — I’d love to hear your ideas. Tweet me @galengidman!

Also, thanks for the tweet Christian.

Tuesday, 30 November 2010

My Thoughts on the iTunes 10 Icon

Yes, I know I’m coming in really late on this whole thing, but I thought I’d share my thoughts anyway. Here’s what I think.

The argument that the icon haters have been using all along is that it is too standard — that there’s nothing special enough about it to set it apart from the rest of the shiny, web 2.0ish icons in the world.

Well to that I say: Apple is for all practical purposes the inventor of the shiny, glass/plastic style used on the iTunes 10 icon. Therefore, there should be no reason they should not use the style that they came up with!

I’d also like to remind the haters that Apple used the icon as the dot of the “i” in their new social network, Ping. Had the icon been too complicated it would not have looked right in an application as small as that.

So yes, Apple could have done more. There are some great examples on Dribbble of possible replacement icons, but I’m pretty sure that there are better things to get upset about than a perfectly fine icon.

Saturday, 27 November 2010

CSS Idea: border-offset

Step 1: Come up with a super-cool idea for a new CSS property. Done!

Step 2: Share the idea with the world, have it widely acclaimed and become famous.

Uh—

Ok, well I’m just kidding. I know that this idea will probably not earn me fame and fortune (bummer), but I thought I’d write about it anyway. It’s been turning in my mind lately that CSS should really have a border-offset property. Here’s how I think it might work…

.some-class {
    border: 1px solid #000;
    border-offset: 5px;
}

In this case, a black border, 1px thick would be 5 pixels to the outside of the element. You could even do something like this and make the border offset negatively to the inside of the element, like so:

.some-class {
    border: 1px solid #000;
    border-offset: -5px;
}

I’m sure that were this concept to actually come into fruition, it would be included in the border shorthand. I’m thinking that since the addition of border-offset would add another value that could easily be confused with border-width (since they both are measurements), it might work somewhat like the font shorthand where the font-size and line-height are separated by a forward slash. Maybe it would look something like:

.some-class {
    border: [width]/[offset] [style] [color];
}

… or in a real application …

.some-class {
    border: 1px/5px solid black;
}

This would give the element a solid, black 1 pixel thick border offset positively 5 pixels.

I’m pretty sure that there will never be a border-offset property, but I think that it’s a cool idea anyway.