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

Dabblet

Chris Coyier — Fri, 16 Dec 2011 03:18:40 +0000

The best part about Lea Verou's new in-browser HTML/CSS demo tool? It saves your demos to your GitHub account as gists.

Direct Link to Article — Permalink…

Dabblet is a post from CSS-Tricks

Auto Updating IE

Chris Coyier — Thu, 15 Dec 2011 16:51:49 +0000

Big news from Microsoft:

With automatic updates enabled through Windows Update, customers can receive IE9 and future versions of Internet Explorer seamlessly

Windows XP gets IE 8
Windows Vista and 7 get IE 9

Presumably every new release will happen the same way. So when IE 10 goes final the next Windows Update will include that too for the OS's it will run on.

Direct Link to Article — Permalink

Auto Updating IE is a post from CSS-Tricks

Open a Window with Full Size Unscaled Image

Chris Coyier — Thu, 15 Dec 2011 05:46:43 +0000

For the gallery section of this site, I wanted people to have the ability to see the screenshot at its original size. Due to the fluid nature of this site, it's fairly common for the screenshot to be scaled down to fit into its column. So I put together this little solution.

My plan is to open a window the exact size needed to fit the image. Quick, easy, and perfectly good UX in my opinion. All you have to do is this:

window.open(path-to-image);

Actually it's a bit more complex than that. We need to pass in a bunch of parameters to get the window we want. Namely, the kind with as little chrome as possible. A top bar with a close button and that's about it.

window.open(path-to-image, null, 'height=y, width=x, toolbar=0, location=0, status=0, scrollbars=0, resizeable=0');

Example:

The tricky part is figuring out just exactly what height and width values to pass. You can't just ask the image what size it is. Well you can, but it will lie. It will tell you its current size, not its natural size.

var img = document.getElementById('screenshot');
//AN_Xml:
//AN_Xml:img.width;  // current size, not natural size
//AN_Xml:img.height; // current size, not natural size

To get the natural size, we'll create a new image in the magical ether of JavaScript, set its source to the source of the on-screen image, and then test its width and height. It will report correctly as it's untainted by CSS on the page.

var img = document.getElementById('screenshot');
//AN_Xml:
//AN_Xml:var magicEtherImage = new Image();
//AN_Xml:magicEtherImage.src = img.src;
//AN_Xml:
//AN_Xml:var padding = 20; // little buffer to prevent forced scrollbars
//AN_Xml:
//AN_Xml:// Values to use when opening window
//AN_Xml:var winWidth = magicEtherImage.width + padding;
//AN_Xml:var winHeight = magicEtherImage.height + padding;

I use jQuery on my site, so ultimately my code is like this:

$(".view-full-size").click(function() {
//AN_Xml:
//AN_Xml:  var mainScreenshot = $("#main-screenshot");
//AN_Xml:
//AN_Xml:  var theImage = new Image();
//AN_Xml:  theImage.src = mainScreenshot.attr("src");
//AN_Xml:
//AN_Xml:  var winWidth = theImage.width + 20;
//AN_Xml:  var winHeight = theImage.height + 20;
//AN_Xml:
//AN_Xml:  window.open(this.href,  null, 'height=' + winHeight + ', width=' + winWidth + ', toolbar=0, location=0, status=0, scrollbars=0, resizable=0'); 
//AN_Xml:
//AN_Xml:  return false;
//AN_Xml:
//AN_Xml:});

You can see it in action on single gallery pages like this.

Obviously it doesn't do much on mobile, so I just remove the button with a media query.

Open a Window with Full Size Unscaled Image is a post from CSS-Tricks