CSS-Tricks

Adaptive Images

Chris Coyier — Thu, 01 Sep 2011 03:50:21 +0000

Project from Matt Wilcox for serving the right images to the right devices (i.e. small images to small browser windows, large images to large browser windows). Small browser windows, regardless of bandwidth considerations, shouldn't get a giant image scaled down they should get an image just the size they need it.

This is similar to an earlier project by the Filament Group, but this takes more of a "just works" approach in that it doesn't require you to do anything special or even create the different versions of the images yourself.

Direct Link to Article — Permalink

Adaptive Images is a post from CSS-Tricks

Fold Out Popups

Chris Coyier — Wed, 31 Aug 2011 22:52:26 +0000

The trick with using hidden checkboxes/radio buttons, the :checked pseudo class selector, and adjacent sibling (~) combinators really enables some neat functional possibility with pure CSS¹. If you need a primer, we recently used this to build a functional tabbed area.

Let's exploit it again to build "fold out popups". That is, links/buttons you can click to reveal tooltip-like rich HTML popup content.

View Demo Download Files

HTML Structure

We need a checkbox for the on/off clickable functionality (don't worry, it's hidden). Then right after it is a label. Like any good label, the for attribute matches the inputs id attribute. That way we can click it to toggle the checkbox.

The label contains within it a number of spans. The .box span is the container for the rich HTML popup. In other words, put whatever you want in there. Well, whatever you want that are inline elements. It's tempting to use a div and header tags and stuff, but some browsers don't dig that and will render those things outside of the label instead of within. Making the .box outside of the label wouldn't be too big of a deal, as we could chain ~ selectors to get it to hide/show anyway, but having them within means we'll be able to position the popup relative to the position of the label, like a "popup" should.


//AN_Xml:
//AN_Xml:   Click me!
//AN_Xml:   
//AN_Xml:       Super cool popup content
//AN_Xml:   
//AN_Xml:

CSS Basics

Our goal with the .box is to absolutely position it relative to the label it's within, so it pops up attached to it. By default, it will be hidden by having zero opacity. We'll also scale it down to nothing, skew it, and add transitions. Then when we reveal it by way of the checkbox becoming checked, we'll scale it back up, remove the skew, and make it visible by bringing the opacity back up to 1.

.box {
//AN_Xml:	position: absolute;
//AN_Xml:	left: 0;
//AN_Xml:	top: 100%;
//AN_Xml:	z-index: 100;
//AN_Xml:
//AN_Xml:	/* Prevent some white flashing in Safari 5.1 */
//AN_Xml:	-webkit-backface-visibility: hidden;
//AN_Xml:
//AN_Xml:	-moz-border-radius:    20px;
//AN_Xml:	-webkit-border-radius: 20px;
//AN_Xml:	border-radius:         20px; 
//AN_Xml:
//AN_Xml:	width: 260px;
//AN_Xml:	padding: 20px;
//AN_Xml:	opacity: 0;
//AN_Xml:
//AN_Xml:	-webkit-transform: scale(0) skew(50deg);
//AN_Xml:	-moz-transform:    scale(0) skew(50deg);
//AN_Xml:	-ms-transform:     scale(0) skew(50deg);
//AN_Xml:	-o-transform:      scale(0) skew(50deg);
//AN_Xml:
//AN_Xml:	-webkit-transform-origin: 0px -30px;
//AN_Xml:	-moz-transform-origin:    0px -30px;
//AN_Xml:	-ms-transform-origin:     0px -30px;
//AN_Xml:	-o-transform-origin:      0px -30px;
//AN_Xml:
//AN_Xml:	-webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
//AN_Xml:	-moz-transition:    -moz-transform    ease-out .35s, opacity ease-out .4s;
//AN_Xml:	-ms-transition:     -ms-transform     ease-out .35s, opacity ease-out .4s;
//AN_Xml:	-o-transition:      -o-transform      ease-out .35s, opacity ease-out .4s;
//AN_Xml:}
//AN_Xml:
//AN_Xml:.popUpControl {
//AN_Xml:	display: none;
//AN_Xml:}
//AN_Xml:.popUpControl:checked ~ label > .box {
//AN_Xml:	opacity: 1;
//AN_Xml:	-webkit-transform: scale(1) skew(0deg);
//AN_Xml:	-moz-transform:    scale(1) skew(0deg);
//AN_Xml:	-ms-transform:     scale(1) skew(0deg);
//AN_Xml:	-o-transform:      scale(1) skew(0deg);
//AN_Xml:}

The actual CSS for the box has some additional styling, but this the important functional stuff. Snag the download that accompanies this tutorial for the complete set of CSS.

Changing Text of Button When Open

This isn't vital to the idea here, but another neat trick in this demo is changing the text of the button when the popup is open. This works by actually hiding the text inside the button when :checked and inserting new text. The basics:


//AN_Xml:
//AN_Xml:   Default text
//AN_Xml:

[type=checkbox]:checked ~ label span {
//AN_Xml:   display: none;
//AN_Xml:}
//AN_Xml:[type=checkbox]:checked ~ label:before {
//AN_Xml:   content: "Text to show when checked";
//AN_Xml:}

Yet another "hack" (bad, as generated content isn't very accessible or selectable). But hey, we're still having fun right?

¹ Yeah but... JavaScript

This definitely walks "separation of concerns" line. Even though I've created this in "pure" CSS, I actually think this type of behavior is probably better suited to JavaScript. And by "use JavaScript", this is what I would actually do:

Toggle a class name for "open" and "closed" on the .box, rather than use the checkbox.
Change the text through the JavaScript, not use CSS generated content.

But everything else should stay in the CSS. The styling, the transitions, the transforms... That stuff is style not functionality.

Boy I'm a hypocrite hey?

Credit

Thanks to Victor Coulon who sent me this idea that I riffed on for this.

Fold Out Popups is a post from CSS-Tricks

AnythingZoomer Plugin

Chris Coyier — Tue, 30 Aug 2011 16:52:13 +0000

My AnythingZoomer jQuery demo has been plugin-ized by Mottie (who also maintains the AnythingSlider). It has some new features and is easier to work with by nature of being a plugin.

Direct Link to Article — Permalink

AnythingZoomer Plugin is a post from CSS-Tricks

SitePoint Podcast #127

Chris Coyier — Sat, 27 Aug 2011 15:17:56 +0000

Listen to Louis Simoneau and I yak about CSS.

Direct Link to Article — Permalink

SitePoint Podcast #127 is a post from CSS-Tricks

Sideways Headers

Chris Coyier — Fri, 26 Aug 2011 18:25:34 +0000

Christian Heilmann had an interesting CSS predicament the other day. The idea was to make header tags rotated 90-degrees and align along the left of a blog of content rather than at the top.

So, like this.

Easy, right?

Should be pretty easy right? Just absolutely position the header in the upper left (so it doesn't take up any vertical space) and then rotate it from it's upper left corner 90 degrees with CSS transforms. Yeah... that's cool, but here's the problem: a lot more browsers support absolute positioning than support transforms. That's problematic, because in the case of those browsers, the headers will now be sitting on and obfuscating content.

Bad!

How I Would Do It: Feature Detection

I think the best way to handle this is to do feature detection with Modernizr. Make a quick custom build that tests for transforms, load it up at the top of the page, and then only apply the absolute positioning and transforms (and other tweaks) when you are in a browser that can deal with it.

And so...

The complete CSS:

aside {
//AN_Xml:    position: relative;
//AN_Xml:}
//AN_Xml:
//AN_Xml:aside h3 {
//AN_Xml:    background: #369;
//AN_Xml:    color: #fff;
//AN_Xml:    padding: 5px 10px;
//AN_Xml:    margin: 0 0 10px 0;
//AN_Xml:}
//AN_Xml:
//AN_Xml:/* Class name via Modernizr */
//AN_Xml:.csstransforms aside {
//AN_Xml:    border-left: 34px solid #369;
//AN_Xml:
//AN_Xml:    /* Make a little room */
//AN_Xml:    padding-left: 10px;
//AN_Xml:}
//AN_Xml:.csstransforms aside h3 {
//AN_Xml:
//AN_Xml:    /* Abs positioning makes it not take up vert space */
//AN_Xml:    position: absolute;
//AN_Xml:    top: 0;
//AN_Xml:    left: 0;
//AN_Xml:
//AN_Xml:    /* Border is the new background */
//AN_Xml:    background: none;
//AN_Xml:
//AN_Xml:    /* Rotate from top left corner (not default) */
//AN_Xml:    -webkit-transform-origin: 0 0;
//AN_Xml:    -moz-transform-origin:    0 0;
//AN_Xml:    -ms-transform-origin:     0 0;
//AN_Xml:    -o-transform-origin:      0 0;
//AN_Xml:
//AN_Xml:    -webkit-transform: rotate(90deg);
//AN_Xml:    -moz-transform:    rotate(90deg);
//AN_Xml:    -ms-transform:     rotate(90deg);
//AN_Xml:    -o-transform:      rotate(90deg);
//AN_Xml:}

View Demo Download Files

The weakness left in this technique is that if the header is longer than the space available, it doesn't push down the aside's height to compensate. There really just isn't a way to do that with just CSS (you can't set the height of something to match the width of something, basically). For the record, you could use JavaScript to do it.

Can we do it without Modernizr?

Christian et al. didn't want to use Modernizr (for reasons I can't possibly comprehend ;). Lennart Schoors, in the comments of his post, came up with this technique, where the paragraph elements themselves were also transformed (moved). By default, there is a bunch of empty space at the top of the aside, and the transform moves them back up to fill that space. Without transforms, the gap is still there, making room for the absolutely positioned header. Pretty smart!

The one shortcoming I can see is that it targets paragraph elements specifically. In a real environment you might not be able to count on that, so you are either writing a selector to cover all possible elements to move, or using an non-semantic wrapper. Also, this is subject to the same weakness as I described about header length above.

Improvements welcome!

Sideways Headers is a post from CSS-Tricks

Pop From Top Notification

Chris Coyier — Thu, 25 Aug 2011 14:39:42 +0000

Have you seen that design pattern where a notification pops down from the top of the browser window, then slides away? We can rock that in pure CSS.

View Demo Download Files

We'll just make a div:


//AN_Xml:    You smell good.
//AN_Xml:

Then we'll style it and put it on the top of the screen:

#note {
//AN_Xml:    position: absolute;
//AN_Xml:    z-index: 101;
//AN_Xml:    top: 0;
//AN_Xml:    left: 0;
//AN_Xml:    right: 0;
//AN_Xml:    background: #fde073;
//AN_Xml:    text-align: center;
//AN_Xml:    line-height: 2.5;
//AN_Xml:    overflow: hidden;
//AN_Xml:    -webkit-box-shadow: 0 0 5px black;
//AN_Xml:    -moz-box-shadow:    0 0 5px black;
//AN_Xml:    box-shadow:         0 0 5px black;
//AN_Xml:}

Let's animate it

With a keyframe animation, we can "hide" it above the browser window and bring it down for a short while:

@-webkit-keyframes slideDown {
//AN_Xml:    0%, 100% { -webkit-transform: translateY(-50px); }
//AN_Xml:    10%, 90% { -webkit-transform: translateY(0px); }
//AN_Xml:}
//AN_Xml:@-moz-keyframes slideDown {
//AN_Xml:    0%, 100% { -moz-transform: translateY(-50px); }
//AN_Xml:    10%, 90% { -moz-transform: translateY(0px); }
//AN_Xml:}

Er... let's consider other browsers quick

But let's consider browsers that don't have transforms and animations for a second. For those, we'd want to default to just showing the notification bar at all times, with the ability to dismiss it.

So we'll make a custom build of Modernizr to test for transforms and animations, load that up, then we can write CSS to test for those features and only fire off the animations if we're in a browser that supports them.

.cssanimations.csstransforms #note {
//AN_Xml:    -webkit-transform: translateY(-50px);
//AN_Xml:    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
//AN_Xml:    -moz-transform:    translateY(-50px);
//AN_Xml:    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
//AN_Xml:}

The 1.0s in there is the delay before the animation runs. Best to wait a minute to make the notification more noticeable.

Now we'll add a close button into the HTML:


//AN_Xml:    You smell good. [close]
//AN_Xml:

And a tiny bit of JavaScript at the bottom of the page so that the non-supporting browsers can close the notification.

CSS-Tricks

Adaptive Images

Fold Out Popups

HTML Structure

CSS Basics

Changing Text of Button When Open

1 Yeah but... JavaScript

Credit

Anything​Zoomer Plugin

SitePoint Podcast #127

Sideways Headers

Easy, right?

How I Would Do It: Feature Detection

And so...

Can we do it without Modernizr?

Pop From Top Notification

Let's animate it

Er... let's consider other browsers quick

¹ Yeah but... JavaScript

AnythingZoomer Plugin