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

Foresight.js

Chris Coyier — Tue, 03 Apr 2012 15:31:49 +0000

Speaking of bandwidth media queries, this project by Adam D. Bradley looks promising:

//AN_Xml:

Foresight.js gives webpages the ability to tell if the user's device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image is requested from the server. Additionally, it judges if the user's device currently has a fast enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage.

//AN_Xml:

Direct Link to Article — Permalink

Foresight.js is a post from CSS-Tricks

ShopTalk Episode 12

Chris Coyier — Mon, 02 Apr 2012 17:46:26 +0000

This week Dave and I are joined by Dave's co-workers and amigo's Trent Walton and Reagan Ray. We talk about cutting edge front end stuff, client services, topics for a graduate thesis, and more. Brought to you by LessMoney and Front End Design Conference, two web conferences running back to back in Florida this July.

//AN_Xml:

Direct Link to Article — Permalink…

ShopTalk Episode 12 is a post from CSS-Tricks

The JavaScript “Ah ha!” Moment

Chris Coyier — Fri, 30 Mar 2012 19:38:54 +0000

A number of years ago we talked about The CSS "Ah ha!" Moment. That is, the moment in which you learned something about CSS that made it click for you and had the feeling of understanding wash over you. For CSS, mine was realizing that every element on the page was a rectangular box that lay themselves out in a particular manner and that I could affect the size, position and contents of those boxes.

//AN_Xml:

Let's do it again, only for JavaScript! If you feel like you have a decent understanding of JavaScript, what was your "Ah ha!" moment? Or are you still waiting for it?

//AN_Xml:

For me, I had never written a line of JavaScript in my life but I picked up the book Learning jQuery and started reading it on a flight. I had the moment when I realized jQuery was essentially a "find something, do something" library. I already knew CSS, and jQuery used CSS selectors for the "find something" part. "Do something" in jQuery can be as simple as "click", "hide", "show", "slideToggle", etc. Even I can do that, I thought, and I rushed to my hotel room and started playing.

//AN_Xml:

The JavaScript “Ah ha!” Moment is a post from CSS-Tricks

Bandwidth Media Queries

Chris Coyier — Wed, 28 Mar 2012 15:46:29 +0000

They don't exist. But wouldn't that be nice?

//AN_Xml:

Take for instance the markup being discussed for the //AN_Xml: element:

//AN_Xml:


//AN_Xml:
//AN_Xml:  
//AN_Xml:  
//AN_Xml:
//AN_Xml:  
//AN_Xml:   -->
//AN_Xml:
//AN_Xml:  
//AN_Xml:  
//AN_Xml:
//AN_Xml:  
//AN_Xml:  
//AN_Xml:
//AN_Xml:

//AN_Xml:

I'm 100% on board with this idea. Let's serve up images we want to under the circumstances we declare. But is screen width the correct metric to use here? Perhaps it is, why would a screen that is 400px wide ever need an image that is larger than 400px wide? Well I think the retina display on certain new devices are answering that question for us. Those devices may respond to certain width media query but really have twice the pixels available and be able to show much sharper images. Yes, we have device-pixel-ratio media queries for that as well, but I still think we're dancing around the issue.

//AN_Xml:

That issue is: bandwidth. If I'm in a place / on a device that has super slow internet, I'd love to be served a very light web page so browsing is still acceptably fast. If I'm in a place / on a device that has super fast internet, by all means ratchet it up and deliver me more.

//AN_Xml:

Something like:

//AN_Xml:

/* Fair warning: these aren't "real" */
//AN_Xml:
//AN_Xml:@media (min-bandwidth: 25Mbps) {
//AN_Xml:  /* High bandwidth, bring it on! */
//AN_Xml:}
//AN_Xml:
//AN_Xml:@media (max-bandwidth: 10Mbps) {
//AN_Xml:  /* This is only for the viewers with currently slow internet connection speed */
//AN_Xml:}

//AN_Xml:

This doesn't mean ignore screen size. That's obviously relevant when it comes to layout. This extension of media queries would give us a more appropriate tool for media in a world where the size of your device is increasingly unrelated to its bandwidth.

//AN_Xml:

So I wonder: is it possible?

//AN_Xml:

Bandwidth Media Queries is a post from CSS-Tricks