CSS-Tricks

ShopTalk Episode 3

Chris Coyier — Fri, 27 Jan 2012 04:27:03 +0000

Where Dave and I are joined by Chris Eppstein. Sponsored by LessAccounting and United Pixelworkers (who are offering a 10% discount on shirts with coupon code "shoptalk").

//AN_Xml:

Direct Link to Article — Permalink…

ShopTalk Episode 3 is a post from CSS-Tricks

Animate to an Inline Style

Chris Coyier — Thu, 26 Jan 2012 20:18:23 +0000

You already know that inline styles are "bad practice." Inline styles aren't reusable like CSS in separate files is, and thus, inefficient bloat. Unless of course, when it isn't. There are some instances where inline styles make perfect sense. Perhaps you have an application where user's pick their favorite color, and then you set the background of the body to that. Using an inline style in that case is actually more efficient than external CSS, since it's specific to one user and one element.

//AN_Xml:

Now let's say you want to animate to a value set in an inline style. Say you want to animate a progress bar. You start at zero, and need to go up to any arbitrary value. Perhaps a call to the server tells you how complete an upload is and you set the value from that.

//AN_Xml:

In a post I did nearly a year ago, I lamented that you can't animate to an inline style. You can't declare a keyframe in inline styles and you don't know what final value to animate to in the external CSS. Alas I was wrong, as I didn't know about this bonafide little CSS trick.

//AN_Xml:


//AN_Xml:  Upload is 75% complete.
//AN_Xml:

//AN_Xml:

Here's the trick: just omit the to or 100% declaration from the @keyframe:

//AN_Xml:

@-webkit-keyframes progress-bar {
//AN_Xml:   0% { width: 0; }
//AN_Xml:}
//AN_Xml:@-moz-keyframes progress-bar {
//AN_Xml:   0% { width: 0; }
//AN_Xml:}

//AN_Xml:

Then you call the animation on the progress bar:

//AN_Xml:

.progress-bar > div {
//AN_Xml:  -webkit-animation: progress-bar 2s;
//AN_Xml:  -moz-animation: progress-bar 2s;
//AN_Xml:}

//AN_Xml:

And just like that, the progress bar will animate itself up to the value set by the inline style.

//AN_Xml:

View Demo

//AN_Xml:

Here's a Dabblet if you wanna mess with it.

//AN_Xml:

Special thanks to Michael Paryna who emailed me about this and got me to give it a try.

//AN_Xml:

Animate to an Inline Style is a post from CSS-Tricks

Custom Fonts in Emails

Chris Coyier — Wed, 25 Jan 2012 17:45:31 +0000

A reader writes in:

//AN_Xml:

Would it be possible to draw an entire typeface in CSS to be sent in emails? Our company needs to send out emails to about 20k people to introduce a new brand that we are launching. The emails will be in HTML/CSS. My CEO is very specific about the type of aesthetic he wants to achieve, and this includes using a typeface that is not native to either Mac or Windows computers. We do not want to use images in our email.

//AN_Xml:

First off, it's pretty cool your CEO cares about type and aesthetics at all. It's usually a good thing to have the person steering the ship care about beauty and details down to that level. Let's consider the options.

//AN_Xml:

The first thing that comes to mind in custom fonts these days is @font-face. The browser support for it is pretty darn good. Unfortunately, browser support isn't what we need here, it's email client support. According to some research by Campaign Monitor, @font-face is only working Apple's Mail.app and the Mail app on iOS. You could try to make the progressive enhancement case to your CEO, but at that low level of support might be a tough sell.

//AN_Xml:

Another thing you mentioned was trying to recreate the font through CSS somehow. Maybe something like this. I've even played around with this concept a little bit specifically with the idea of image-free emails in mind. This is the realm of big-pixel-art though. Recreating a font pixel by pixel with no anti-aliasing, as you are surely aware, is a fool's errand.

//AN_Xml:

In reality I think there are two solutions.

//AN_Xml:

The first is to reconsider this sentence: "We do not want to use images in our email." Why not? It seems like you are OK with sending HTML emails since you're specifically looking for clever solutions and text emails are capable of very little cleverness short of ASCII art. People use images in emails all the time. Admittedly, the fact users often have to specifically choose to view them is a bit of a turn off, but using proper ALT text on the images makes the email still work even if they never do that.

//AN_Xml:

The second is to give up on this custom font in email thing. Not to sound defeatist here, but your branding will not be ruined by the lack of a specific typeface in an email. Anywhere where you all agree it is critical (e.g. a slogan?), use an image, otherwise, use a nice readable font that works OK in pairing with your brand typeface and move on with more important tasks.

//AN_Xml:

Personally, I think I'd go with @font-face despite the current low support. Actively developing what you want to work helps build the desire momentum needed to get product vendors (in this case email clients) to improve their products and give us better CSS support.

//AN_Xml:

Custom Fonts in Emails is a post from 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

Public Service Announcement: Careful With Your Nested Border-Radii

Chris Coyier — Tue, 06 Dec 2011 16:19:53 +0000

When you have and element within another padded element, both with different backgrounds and both with border-radius, make sure the inside element's border-radius is a bit less than the outer element.

Otherwise it makes kind of a too-thick "hump" around the edges.

Both have border radius of 20px;

Inside element's border radius reduced to 17px

There probably is some fancy math you could do to figure out the perfect values, but I find eyeballing it works pretty well.

This post brought to you by DICK™ (Details Improve Creative worK).

Public Service Announcement: Careful With Your Nested Border-Radii is a post from CSS-Tricks

CSSFrag

Chris Coyier — Mon, 25 Jul 2011 18:41:27 +0000

Shaun Inman with a Safari extension (and Firefox port) that impliments the (not real) fragment identifiers proposal. Essentially: same-page document links that don't need the ID/hash-tag thing. Alternatively, you target with a CSS selector:

http://example.com/lorem.html#css(.content:nth-child(2))

Direct Link to Article — Permalink

Advertise here with BSA

CSSFrag is a post from CSS-Tricks