Tag Archives: CSS3

CSS Zen Garden Returns

May 15, 2013 by Matt | Posted in Design No Comments

It’s been ten years since CSS Zen Garden launched with its goal to excite and inspire people to build creative designs with the much more limited tools CSS offered at the time. A decade later, it’s back. Given how the CSS landscape has changed since the original CSS Zen Garden, it will be interesting to see what people create with the new requirements.

So for the tenth anniversary, the Zen Garden is open for business once more. I’ve thrown the codebase on Github, given the dusty copy a refresh, started the conversion of the site to HTML5, and brought all of the existing designs kicking and screaming into the modern age. The work isn’t done yet, but it’s a darn sight closer to how we would build it these days. If you see an area that needs help, consider sending a patch. (Here’s the current list of issues to resolve, for example.)

10 Years [Mezzoblue]

HTML and CSS: Develop with Tomorrow’s Standards Today by Brian P. Hogan

Apr 3, 2013 by Matt | Posted in Design No Comments

I recently unearthed a review copy of a book that somehow got lost in the shuffle a couple of years ago, HTML5 and CSS3: Develop with Tomorrow’s Standards Today by Brian P. Hogan, which is too bad, since it’s one of the better books I’ve seen on the subject. It’s a comprehensive primer on the changes in HTML5 and CSS3. I enjoyed reading through the book after I unburied it last week.

It features a chapter on logically marking up page structure with the new semantic tags (header, nav, section, article, etc.), which explains the contexts they should be used in with a hands-on example of restructuring a blog without excessive divs. A lot of online tutorials make the error of suggesting the aside element for a blog sidebar, which the book helpfully points out as wrong. The section element is the proper tag for the job, as it denotes an arbitrary section of the page, whereas aside is for broken-out sections of your article content, such as pullquotes or diagrams.

From there the author moves on to some CSS3 tricks using newly-added selectors. He shows some simple methods to add zebra-striping to tables with pseudo-classes and add visible URLs to links via a print stylesheet with :after. There’s a brief section demonstrating media queries, as well some on the new JavaScript APIs—localStorage and history pushState, for example. There’s even a bit on using cache manifests to set up offline access.

Oh, and the deprecations. HTML5 deprecates a good many tags and attributes. There is a section listing those, as well as some modern alternatives, such as opening links in new windows without the deprecated target attribute. It can be done cleanly and semantically by using JavaScript, without impacting the user’s ability to middle-click a link and open a new tab…which far too many sites still do today. If you do that, you need to read this book just for that reason.

Pure CSS Blockquote Styling

Apr 24, 2012 by Matt | Posted in Design, Featured 51 Comments

Ever since the days of print, it has been common to style quotations and cover blurbs with oversized quotation marks floating along the left side. The practice is alive and well in the internet age, though the technique usually used is a background image.

It’s 2012, already! Why are we still relying on pictures of typographical symbols? Let’s do it with the power of CSS!

Let’s start with some simple HTML. Before we can style anything, we need to create our blockquote. While we’re at it, a cite element is a nice, semantic way to attribute the quote to its originator.

Continue reading →

How to Flip a Page Upside-Down with CSS

Apr 3, 2012 by Matt | Posted in Design One Comment

For April Fool’s Day this year, I decided to do an amusing CSS trick instead of my usual fake news story. I turned the entire web site on its head, using a simple CSS3 attribute, and added a bit of JavaScript to jump down to the bottom (or top?) to complete the effect.

The CSS is simple, though of course it won’t work for Internet Explorer, except for the very latest version.

#flipdiv {
    width: 100%;
    height: 100%;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

Now you want to wrap everything inside your <body> element with a new <div>. (You have to style the div instead of the body itself, as you get some weird box model issues otherwise.) It would look something like this:

<body>
<div id="flipdiv">
...everything else...
</div>
</body>

If you want to automatically scroll down to the new top of the page, a.k.a. the bottom, you can use a little JavaScript snippet to bump it down.

<script type="text/javascript">
window.onload = scrollDownToTheTop;
function scrollDownToTheTop() {
window.scrollTo(0, document.body.scrollHeight);
}
</script>

Silly, but not bad for an April Fool’s joke.

CSS3 Gradients Are Simply Amazing

Nov 24, 2011 by Matt | Posted in Design No Comments

I’ve been working with CSS3 gradients a bit lately, and they’re the best thing in CSS since border-radius. It’s just so much easier to add a line of CSS and fiddle with a couple of color hex codes than to mess around in Photoshop until you get the perfect gradient, and then go through the Save for Web dialog before setting it as a background image. They also work well with my preference to design things by playing around in a text editor, rather than mocking things up in Photoshop. (i.e. the 37signals philosophy.)

CSS Gradients also add some additional versatility, in that they can stretch to fill dynamically-sized page elements, unlike tiling background images, which can of course only scale along one axis. (And it just seems to much less hacky than loading up a tiling image for a fairly simple effect. Pixel shims, anyone?)

I had held off using CSS gradients, since they were “a fancy new CSS feature unsupported by a lot of browsers,” until I recently realized that not only did all of the modern browsers support them, but many of the browsers were already supporting them without the vendor prefix. IE support is still iffy, only working properly in IE10, but what does Internet Exploder do right?

If you’re not already using CSS gradients, you should definitely read up on them. There’s a good article over at the venerable CSS-Tricks.

The W3C Has Released the First Working Draft of CSS4

Oct 7, 2011 by Matt | Posted in Design No Comments

Yes, you read that properly. The W3C has released the first specs for CSS4. Now that most modern browsers are well on their way to supporting CSS3, the W3C is getting started on the next “layer” of CSS.

The Selectors Level 4 document already has one feature that is unfortunately missing from CSS3: parent selectors. You will finally be able to do things like selecting all a elements that have an img element inside them, with this syntax: $a > img { ... }. The draft also mentions “nth-column” selectors, for styling all of the cells in a specific table column.

Of course, it’s probably going to be awhile until we start seeing browsers supporting this on a usable level.

Before anyone comments about the CSS3 spec not being “finished,” note that W3C specs are not prescriptive. They’re not “finished” until they’re pretty much supported by the major browsers, and changes have been made based on the implementation. A couple of the documents for CSS3, Selectors Level 3 and CSS Color Module Level 3, are already under the Completed Work section of their website.

How To Create a Stylish Button Entirely with CSS3

Apr 27, 2011 by Matt | Posted in Design No Comments

Web designers have been making dynamically-sized buttons using the “sliding doors” trick for awhile now, but isn’t that technique so 2003? Wouldn’t it be cooler to construct buttons using only CSS?

Line25 has a fresh tutorial on How To Create a Stylish Button Entirely with CSS3.

Next we can begin styling the button with a coloured background, this is where CSS gradients come in handy. Two colour swatches are converted into gradient syntax for both Mozilla and Webkit browsers using the handy CSS Gradient Generator, then a fallback option of a flat colour is added for non-supporting browsers.

The tutorial only uses the -moz and -webkit gradient properties, but someone in the comments included ones for Opera, Internet Explorer 10 and the W3C’s proposed syntax for the actual CSS3 spec.

CSS3 Multiple Backgrounds

Mar 28, 2011 by Matt | Posted in Design No Comments

CSS3 has a nifty feature that I wasn’t aware of until recently: multiple backgrounds per element. This was something I used to wish for frequently before I got used to faking it by nesting DIVs and assigning them single backgrounds. Chris Coyier’s CSS-Tricks blog pointed this neat part of the spec out.

The syntax is easy, you just comma separate them. I find it’s easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. What isn’t obvious while looking at the syntax is which image is on top in the vertical stacking order when those images overlap. The spec is clear in this regard and browser implimentations follow. The first is on top and they go down from there.

The syntax looks something like this:

/* Fallback for older browsers */
background: url(fallback.png) 0 0 no-repeat;

/* Multiple backgrounds! */
background:
url(top.png) 0 0 no-repeat,
url(middle.png) 100px 0 no-repeat,
url(tile.png);

Is that cool or what?

If having missing images just isn’t acceptable for your site, you can use a little “hack” to load a fallback background. Placing the first background property seen in the above code snippet will allow for graceful degradation, as older browsers will simply ignore the newer version of the background declaration. It has the disadvantage of loading it anyway with newer browsers, though. I think a better option is using the single-property for design-critical images that need to load in any browser and using the other for progressively enhancing elements.

CSS3 Rounded Corners

Jan 14, 2010 by Matt | Posted in Design 2 Comments

Want to round the corners of an element without messing around with images and tricky CSS? You can do it with pure CSS, but, of course, it won’t work in Internet Explorer. (Or Opera, for that matter.) Fortunately, the effect devolves gracefully.

As an example, to round the corners of a button by 6px:

#myButton {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

The first property is for Firefox and other Mozilla browsers, the second is for WebKit browsers like Safari and Chrome, and the third is for future browsers that actually support the official property that will be part of the CSS3 standard. (IE9, oddly enough, is rumored to eventually support this.)

Need to round just one corner?

-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
border-top-left-radius: 6px;

The CSS3 “Super-Awesome Button”

Dec 10, 2009 by Matt | Posted in Design No Comments

Tired of messing around with image files to create tasteful (and expandable) button graphics? Why don’t you just use some CSS3 techniques to build them on the fly? Smashing Magazine’s Pushing Your Buttons With Practical CSS3 describes how to use box-shadow, text-shadow, and border-radius to create buttons out of pure CSS. Then they take things a little further with some animated WebKit glow effects.

Oh, and the article also shows how to create the custom buttons that Google uses for WebKit browsers.

What would be do without Smashing Magazine?

Tag Archives: CSS3

TweetRoll