CSS-Tricks

Burst Title

Chris Coyier — Fri, 20 Jan 2012 03:51:19 +0000

During the previews for a movie I saw recently, there was an advertisement for an Oprah-related something or another. I wasn't paying attention because I was trying to get out my phone so I could snap a picture of it. Which I failed to do. There was these neat title screens that I thought would be fun to recreate with CSS. They looked like... well they looked like this:

//AN_Xml:

View Demo Download Files

//AN_Xml: //AN_Xml:

Turns out you can do it rather semantically. Just a header tag with an anchor link inside. Admittedly, it would be cool to do it with just the header tag but I wasn't able to figure out a way to get the layers all right with the text on top without the extra element.

//AN_Xml:

CSS-Tricks

//AN_Xml:

h1 {
//AN_Xml:  text-align: center;
//AN_Xml:  color: white;
//AN_Xml:  text-transform: uppercase;
//AN_Xml:  padding: 1px;
//AN_Xml:  font-family: 'Raleway', cursive;
//AN_Xml:  font-weight: 100;
//AN_Xml:  position: relative;
//AN_Xml:  background: -webkit-linear-gradient(left, black, #eee, black);
//AN_Xml:  background: -moz-linear-gradient(left, black, #eee, black);
//AN_Xml:  background: -ms-linear-gradient(left, black, #eee, black);
//AN_Xml:  background: -o-linear-gradient(left, black, #eee, black);
//AN_Xml:}
//AN_Xml:h1:before {
//AN_Xml:  content: "";
//AN_Xml:  position: absolute;
//AN_Xml:  left: 50%;
//AN_Xml:  top: -50px;
//AN_Xml:  width: 600px;
//AN_Xml:  margin-left: -300px;
//AN_Xml:  margin-top: -220px;
//AN_Xml:  height: 600px;
//AN_Xml:  background: -webkit-radial-gradient(50% 50%, ellipse closest-side, #444, black);
//AN_Xml:  background: -moz-radial-gradient(50% 50%, ellipse closest-side, #444, black);
//AN_Xml:  background: -ms-radial-gradient(50% 50%, ellipse closest-side, #444, black);
//AN_Xml:  background: -o-radial-gradient(50% 50%, ellipse closest-side, #444, black);
//AN_Xml:  z-index: -1;
//AN_Xml:}
//AN_Xml:h1 a {
//AN_Xml:  background: black;
//AN_Xml:  display: block;
//AN_Xml:  padding: 20px;
//AN_Xml:  text-decoration: none;
//AN_Xml:  letter-spacing: 30px;
//AN_Xml:  color: white;
//AN_Xml:}

//AN_Xml:

I listed out all the vendor prefixes here because using them is required in "real" usage and I worry about people copying and pasting pseudo code. But if you want to play around with this and don't want to deal with all that, the Dabblet demo doesn't need them as it uses Prefix Free.

//AN_Xml:

I also added some animations to the demo just for fun.

//AN_Xml:

View Demo Download Files

//AN_Xml:

Burst Title is a post from CSS-Tricks

CSS1k

Chris Coyier — Wed, 18 Jan 2012 22:21:03 +0000

Back in the day, the CSS Zen Garden was a place to showcase the power of CSS. A single page was redesigned in vastly different ways with no change to the HTML. The CSS1k project (head up by Jacob Rask) is in that same vein only you are limited to only 1k of CSS. Fun, but the purpose is to get you thinking about how to be efficient and size economic with CSS.

//AN_Xml:

Direct Link to Article — Permalink…

CSS1k is a post from CSS-Tricks

ShopTalk Episode 2

Chris Coyier — Wed, 18 Jan 2012 22:13:30 +0000

In which we talk shop with guest Paul Irish. Sponsored by LessAccounting.

//AN_Xml:

Direct Link to Article — Permalink…

ShopTalk Episode 2 is a post from CSS-Tricks

SpriteRight Giveaway

Chris Coyier — Tue, 17 Jan 2012 20:06:54 +0000

There is a new Mac app called SpriteRight for doing CSS sprites that is pretty darn nice. I'm a fan of both SpriteCow (beautiful interface, design your own sprite) and SpriteMe (automatic combining of sprites, gives you real CSS). I feel like SpriteRight hits the nail on the head by combining the best features of both of these tools, doing it better, and doing more.

//AN_Xml:

Here's their intro video:

//AN_Xml:

It's normally $9.99, on sale for $4.99, but if you want to get it for free, I have some codes you can redeem in the Mac App Store. I will send the first five folks who record an audio question for ShopTalk and send it in. Doesn't even have to be a question, could just be a topic or hot tip you'd like to hear us talk about on the show.

//AN_Xml:

SpriteRight Giveaway is a post from CSS-Tricks

YouTube Popup Buttons

Chris Coyier — Sat, 14 Jan 2012 19:19:31 +0000

There is a certain style of button on the latest YouTube design (most easily found in the footer) where the default state of the button has a very subtle bevel to it, but on :hover and :focus states the button pops up, eager to be clicked.

//AN_Xml:

Default state

//AN_Xml: //AN_Xml:

//AN_Xml:

:hover / :focus state

//AN_Xml: //AN_Xml:

//AN_Xml:

:active state

//AN_Xml: //AN_Xml:

I think this design works well in the context of YouTube's footer. 1) The default state is very subdued, meaning these buttons aren't competing for attention on a site where almost everything else is. 2) You still get the very rich/obvious experience of pushing a button 3) They imply a different functionality than the other links in the footer (press these, and something will happen, press a link, be taken away to another page). They make good on that implication as well, each of those buttons opens up a panel of settings right beneath.

//AN_Xml:

Here's a remake of them. Start with a button:

//AN_Xml:

And the base styles including all three states:

//AN_Xml:

.button {
//AN_Xml:   border: 1px solid #DDD;
//AN_Xml:   border-radius: 3px;
//AN_Xml:   text-shadow: 0 1px 1px white;
//AN_Xml:   -webkit-box-shadow: 0 1px 1px #fff;
//AN_Xml:   -moz-box-shadow:    0 1px 1px #fff;
//AN_Xml:   box-shadow:         0 1px 1px #fff;
//AN_Xml:   font: bold 11px Sans-Serif;
//AN_Xml:   padding: 6px 10px;
//AN_Xml:   white-space: nowrap;
//AN_Xml:   vertical-align: middle;
//AN_Xml:   color: #666;
//AN_Xml:   background: transparent;
//AN_Xml:   cursor: pointer;
//AN_Xml:}
//AN_Xml:.button:hover, .button:focus {
//AN_Xml:   border-color: #999;
//AN_Xml:   background: -webkit-linear-gradient(top, white, #E0E0E0);
//AN_Xml:   background:    -moz-linear-gradient(top, white, #E0E0E0);
//AN_Xml:   background:     -ms-linear-gradient(top, white, #E0E0E0);
//AN_Xml:   background:      -o-linear-gradient(top, white, #E0E0E0);
//AN_Xml:   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
//AN_Xml:   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
//AN_Xml:   box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
//AN_Xml:}
//AN_Xml:.button:active {
//AN_Xml:   border: 1px solid #AAA;
//AN_Xml:   border-bottom-color: #CCC;
//AN_Xml:   border-top-color: #999;
//AN_Xml:   -webkit-box-shadow: inset 0 1px 2px #aaa;
//AN_Xml:   -moz-box-shadow:    inset 0 1px 2px #aaa;
//AN_Xml:   box-shadow:         inset 0 1px 2px #aaa;
//AN_Xml:   background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
//AN_Xml:   background:    -moz-linear-gradient(top, #E6E6E6, gainsboro);
//AN_Xml:   background:     -ms-linear-gradient(top, #E6E6E6, gainsboro);
//AN_Xml:   background:      -o-linear-gradient(top, #E6E6E6, gainsboro);
//AN_Xml:}

//AN_Xml:

View Demo Download Files

//AN_Xml:

Special thanks to Dennis Sa who sent me a JSbin of some Matte Buttons he was working on which made me think of the YouTube buttons and get started on all this.

//AN_Xml:

Trevor Gerzen applied transitions to them, if that's to your liking.

//AN_Xml:

YouTube Popup Buttons is a post from CSS-Tricks

Shop Talk Episode 1

Chris Coyier — Fri, 13 Jan 2012 00:07:33 +0000

The inaugural episode of Shop Talk where Dave and I are joined by Jonathan Snook and we answer a bunch of listener questions. Sorry about the sniffles and other rough edges, we'll get better as we go. Sponsored by LessAccounting.

//AN_Xml:

Direct Link to Article — Permalink…

Shop Talk Episode 1 is a post from CSS-Tricks

Troubles with HTML5

Chris Coyier — Thu, 12 Jan 2012 22:55:40 +0000

Microsoft funds Pixel Lab to make an HTML5 version of Cut The Rope originally by ZeptoLab.
Nerds call it out for using some Flash.
Robby Ingebretsen writes really interesting article explaining why.

//AN_Xml:

Direct Link to Article — Permalink…

Troubles with HTML5 is a post from CSS-Tricks

Responsive Data Table Roundup

Chris Coyier — Wed, 11 Jan 2012 17:18:07 +0000

There has been a bunch of takes on responsive data tables since I first published about it.

//AN_Xml:

View Demo

//AN_Xml: //AN_Xml:

The idea of the original was to abandon the grid layout of the table and make each cell it's own line. Each of those lines is labeled with a pseudo element. This creates a much taller table, requiring more vertical scrolling, but does not require horizontal scrolling. It's easier to browse the data without losing context of what's what. The downside is that you might lose the context of data comparison, since you no longer see see cells of data right next to other cells of that type.

//AN_Xml:

Mobifreaks published a very similar idea, which uses the same layout change and pseudo element labeling. They used HTML5 data-* attributes for the labeling, which removes the need to have custom CSS for different tables. I don't buy into the SEO part, but the code is good.

//AN_Xml:

Derek Pennycuff took the original and applied the "mobile first" concept. Instead of starting with table markup it starts with definition list markup, then forces it into a table layout when the screen is large enough to accomodate it. While I love the thinking here, I'm not sure I like what it takes to get it done. The markup is much heavier and (ironically) I don't think it's semantic. Tabular data should be marked up as a table. I think the philosophy behind "mobile first" is keeping things simple and lighter by default and heavier and more complex for larger screens. This demo starts out and stays heavy.

//AN_Xml:

Scott Jehl cooked up two clever ideas. One was to build a chart from the data in the table. In this demo it's pie chart that is much narrower than the complete data table and thus more suitable for small screens.

//AN_Xml:

View Demo

//AN_Xml: //AN_Xml:

Pretty cool, but clearly all tables can't be converted into charts. I'd also argue a data table and a chart are pretty different things. If you are going to go through the trouble of making a chart, it would probably be good to show that to the larger screen as well as it provides context in an useful alternative way. Or at least have an option to see it.

//AN_Xml:

Scott's other idea focuses on the problem that large data tables can stretch out the width of a parent container beyond what a small screen is capable of displaying. So to prevent this, a media query is used to hide the table on small screens, replaced with a small mock-table and a link to view the full table.

//AN_Xml:

//AN_Xml:
//AN_Xml:View Demo
//AN_Xml: //AN_Xml:

Stewart Curry had the idea of just hiding less important columns for smaller screens. One of people's earliest gripes of mobile-specific sites was that just because they are on a mobile device doesn't mean they deserve a less-than-full experience than a user with a larger screen (especially since these devices are totally capable of maneuvering around "full" sites).

//AN_Xml:

View Demo

//AN_Xml: //AN_Xml:

I think Stewart was on to something though. Using small screens to focus information to the most important things is great, it just shouldn't lock away information with no recourse. Maggie Costello Wachs of Filament Group also had the idea of hiding non-essential columns on smaller screens, but also providing a dropdown menu where you can re-enable them if you wish (which you can get to see with horizontal scrolling).

//AN_Xml:

View Demo

//AN_Xml: //AN_Xml:

David Bushell also tackled the idea of not altering the basic table format, but still solving the "too wide" problem. His concept flips the table on it's side and applies overflow-x: auto to the tbody meaning the data cells can scroll left and right if it breaks out of a small screen, but you still always see the headers (as if they were fixed position).

//AN_Xml:

View Demo

//AN_Xml: //AN_Xml:

Brad Czerniak has an idea he calls Rainbow Tables where on smaller screens the grid structure of the table is abandoned and the data cells are squished into each other as tight as they will go, while still being a "row". Then instead of the data be identified by which column it is in, the data is color coded to match a key.

//AN_Xml:

View Demo

//AN_Xml: //AN_Xml:

If you've seen or have an idea for more possibilities for responsive data tables, let us know in the comments below. I'll keep this post updated with all the design patterns for this I know about.

//AN_Xml:

Responsive Data Table Roundup is a post from CSS-Tricks

PROTECT IP / SOPA Act Breaks the Internet

Chris Coyier — Wed, 11 Jan 2012 02:00:14 +0000

Here's a good video to watch explaining the huge problems that could come from PIPA (right on a page where you can do something about it). You've probably heard of SOPA. PIPA is the new SOPA.

//AN_Xml:

Direct Link to Article — Permalink…

PROTECT IP / SOPA Act Breaks the Internet is a post from CSS-Tricks

(Better) Tabs with Round Out Borders

Chris Coyier — Tue, 10 Jan 2012 18:07:20 +0000

The following is a guest post by Menno van Slooten. You might notice we've been down this road before, but I quite like Menno's approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually using less elements.

//AN_Xml:

A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images. First, let's start with some basic markup.

//AN_Xml:

The markup

//AN_Xml:


//AN_Xml:    Lorem
//AN_Xml:    Ipsum
//AN_Xml:    Sit amet
//AN_Xml:    Consectetur adipisicing
//AN_Xml:

//AN_Xml:

This would be about as basic as you can get. Not a lot of elements to work with here, but it will do.

//AN_Xml:

Getting started

//AN_Xml:

To get started, let's get rid of the default

styling and get these babies in line.
//AN_Xml:
//AN_Xml:
- Lorem
- Ipsum
- Sit amet
- Consectetur adipisicing
//AN_Xml:
//AN_Xml:
```
.tabrow {
//AN_Xml:    text-align: center;
//AN_Xml:    list-style: none;
//AN_Xml:    margin: 0;
//AN_Xml:    padding: 0;
//AN_Xml:    line-height: 24px;
//AN_Xml:}
//AN_Xml:.tabrow li {
//AN_Xml:    margin: 0 10px;
//AN_Xml:    padding: 0 10px;
//AN_Xml:    border: 1px solid #AAA;
//AN_Xml:    background: #ECECEC;
//AN_Xml:    display: inline-block;
//AN_Xml:}
```
//AN_Xml:
Selecting a tab
//AN_Xml:
The selected tab should of course be clearly visible.
//AN_Xml:
//AN_Xml:
- Lorem
- Ipsum
- Sit amet
- Consectetur adipisicing
//AN_Xml:
//AN_Xml:
```
.tabrow li.selected {
//AN_Xml:    background: #FFF;
//AN_Xml:    color: #000;
//AN_Xml:}
```
//AN_Xml:
Getting to the bottom of things
//AN_Xml:
Every tab control needs a well-defined bottom edge. It won't do much now, but later it will help emphasize the effect of the selected tab being on top.
//AN_Xml:
//AN_Xml:
- Lorem
- Ipsum
- Sit amet
- Consectetur adipisicing
//AN_Xml:
//AN_Xml:
```
.tabrow {
//AN_Xml:    position: relative;
//AN_Xml:}
//AN_Xml:.tabrow:after {
//AN_Xml:    position: absolute;
//AN_Xml:    content: "";
//AN_Xml:    width: 100%;
//AN_Xml:    bottom: 0;
//AN_Xml:    left: 0;
//AN_Xml:    border-bottom: 1px solid #AAA;
//AN_Xml:    z-index: 1;
//AN_Xml:}
```
//AN_Xml:
Here we introduced our first :after pseudo-element. Basically, :after appends another child to an element. It's not in the DOM (which is why it's called a pseudo element), so it is not a real child but it is completely stylable, as long as you add some content, in this case a single space character.
//AN_Xml:
In my opinion, the terms :before and :after are slightly confusing since the pseudo's aren't actually added before or after the element they apply to, but are inserted as children. This is also why you can't apply :before and :after to elements that can't contain children ("no content" elements), like .
//AN_Xml:
In this case, we use the pseudo element to create a bottom border that doesn't influence the tabs' positioning. We could have just put a bottom border on the

CSS-Tricks

Burst Title

CSS-Tricks

CSS1k

ShopTalk Episode 2

SpriteRight Giveaway

YouTube Popup Buttons

Shop Talk Episode 1

Troubles with HTML5

Responsive Data Table Roundup

PROTECT IP / SOPA Act Breaks the Internet

(Better) Tabs with Round Out Borders

The markup

Getting started

Selecting a tab

Getting to the bottom of things

Above and beyond

Around the bends

Don't be such a square

Cutting corners

Almost there

Pieces of flair