Confused About REM and EM?

Jeremy Church:

While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.

Jeremy tends to favor em, because of the ability to control an area of a design. As in, scale the type in that specific area relatively. I have tended to like rem because of the ability to scale type across the entire page easily, but I’ve gotten into issues where that wasn’t good enough control so I could see moving back to em for that reason.

Direct Link to ArticlePermalink

Confused About REM and EM? is a post from CSS-Tricks

from CSS-Tricks

Float Labels with CSS

You’ve probably seen this pattern going around. It’s an input that appears as if it has placeholder text in it, but when you click/tap into that input, that text moves out of the way and allows you to type there. It’s rather clever, I think. Brad Frost has a really good post on it, detailing the pros and cons and such.

Many of the demos I’ve seen involve JavaScript. The other day I was checking out at, saw their technique for it, and I thought of a way I could pull that off without JavaScript. So here we are.

Here’s how the one looks:

And here’s my take:

See the Pen Label Pattern with just CSS by Chris Coyier (@chriscoyier) on CodePen.

It’s not quite as sexy as the Nest ones, were the text is fading out as the label is sliding up. Certainly possible with some JavaScript, but we’re going to stick with pure CSS here. Still might be possible though. I’ll leave that challenge up to you.

Some Quick Reminders

There are two reasons you might consider doing this:

  1. It might be able to save space. Because the input and label are combined, it takes up less space. When an input is in focus, you do still need to show both the label and input, but you can get that space by either using some of the space the input was already using, or by growing the area temporarily only for the focused input.
  2. It makes the input one big button. Not that inputs aren’t already, and not that labels aren’t when they have a proper for attribute, but there is something kinda nice about a big rectangle that tells you what it wants that you click/tap. Might make for a nice experience particularly on mobile.

I’d say, generally, that always-visible labels are probably “better” – but this is a clever idea and done right, may be useful occasionally. There is always a risk of screwing this up and hurting accessibility too, so take care. One downside to this pattern: we can’t use placeholder in addition to the label, which can be helpful (e.g. a label of “Phone Number” and a placeholder hint of “(555) 555-5555”).

The Trick (1 of 3) – The label is the placeholder

There is a <div> that contains both the <label> and <input> (which you need to do anyway because inputs within forms need to be in block level elements) that has relative positioning. That allows absolute positioning within it, which means we can position the label and input on top of each other. If we do that with the input on top, but with a transparent background, you’ll be able to see the label right underneath it while still being able click into it.

    <input id="name" name="name" type="text" required>
    <label for="name">Your Name</label>
form > div {
  position: relative;
form > div > label {
  position: absolute;

The Trick (2 of 3) – the :focus state and the adjacent sibling combinator

The source order of the <label> and <input> wouldn’t matter much here, since semantically they are tied together with the for attribute. But if we put the input first, that means we can leverage it’s :focus state and an adjacent sibling combinator (+) to affect the label when it is focused. Similar in concept to the checkbox hack.

input:focus + label {
  /* do something with the label */

You can do whatever you want with the label. Just find a cool place to move it and style it that is out of the way of typing in the input. My example had two possibilities: one was making it smaller and moving toward the bottom of the input, the other was moving it to the far right side.

form.go-bottom label {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: 0.2s;
form.go-bottom input:focus + label
  top: 100%;
  margin-top: -16px;

The Trick (3 of 3) – the :valid state

Once there is actual text in the input, and the input goes back out of focus, it would be very weird (bad) to see the label and the input text on top of each other. Fortunately in CSS there is a :valid selector that works on inputs when they are in a valid state. That valid state can be “any text at all”, assuming the only thing that makes it valid is having any value at all, which can be achieved like:

<input type="text" required>

Then remember the only reason you could see the label at all was because the input has a transparent background. To hide it, we can use an opaque background instead:

form input:valid {
  background: white;

The rest of this is just fiddling around with design details until you have it just how you like it.


The idea originally came from Matt D. Smith, with this design:

Float Labels with CSS is a post from CSS-Tricks

from CSS-Tricks

Stackicons: Doing More with Icon Fonts

The following is a guest post by by Parker Bennett. While icon fonts are efficient and easy to use and scaleable and all that, one of the classic “strikes” against them is that the icon can only be one color. Parker has a brand new project that solves that issue in a simple and clever way. I’ll let him introduce it for you.

Even though the future of icons will likely be SVG, here in the present, icon fonts still offer a compelling alternative — with super easy styling of color, size, text-shadows, hover effects and more using just CSS. Icon fonts are still awesome.

One big advantage SVG has over icon fonts is full color. But icon fonts don’t have to be limited to just a single color. By overlapping two or more elements we can create unique “multi-color” icons with a contemporary flat look. If you’ve ever done any two-color or screen printing, it’s a similar idea.

I call them Stackicons.


For each color, we use a separate pseudo element, then use absolute positioning to stack them on top of each other. (If you want more than two colors, it will cost you a non-semantic span.)

/* @font-face to load icon font... */

/* horizontal button row: inline-block vs float makes positioning easier using text-align */

/* any class that starts with "st-icon-" */
[class^="st-icon-"] {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  /* child elements absolute */
  position: relative;
  /* remove inline-block white-space */
  margin-right: -.16em; /* 5px */
  /* if not already universally applied */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* padding here for text, icons replicate this using size and position:absolute - padding makes touch-target bigger */
  padding: 0.143em;
  /* units used in font: 1em = 2048, icons 2400 wide, so icons are 1.171875em (2400/2048). Add padding x2 to get size: */
  height: 1.45788em;
  width: 1.45788em;
  font-size: 1.815em;
  /* text hidden old-school */
  text-align: left;
  text-indent: -9999px; }

/* position:absolute stacks pseudo elements - extra &lt;span> in markup = 2 extra pseudo elements */
[class^="st-icon-"] span:before,
[class^="st-icon-"] span:after {
  display: block;
  position: absolute;
  white-space: normal;
  /* match padding above */
  top: 0.143em;
  left: 0.143em;
  /* undo text hidden */
  text-indent: 0;
  /* inherits size from parent, ems cascade */
  font-size: 1em;
  font-family: "Stackicons-Social";
  font-weight: 400 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  /* screenreaders */
  speak: none;
  /* transitions here */ }

.st-icon-amazon:before {
  /* character code - unicode private use area */
  content: "\e079"; /* black "a" */
  color: black; }

.st-icon-amazon:hover:before {
  color: #626262; }

.st-icon-amazon:after {
  content: "\e080"; /* orange smile */
  color: #ff9900; }

.st-icon-amazon:hover:after {
  color: #ffbd59; }

Using rgba values, we can even do some color mixing to give us more colors. If we really want to push the limits, we can use -webkit-background-clip: text to give icons a -webkit-linear-gradient background.

Yes, it’s a bit on the hacky side: It takes some design forethought, and the ability to generate an icon font. There are more moving parts to manage. But it also offers a lot of flexibility, especially using Sass variables.

This :hover effect would be hard to do in SVG


To show how it works, I made a free, open source icon font, Stackicons-Social, and created a Sass “Construction Kit” to generate the CSS for both single color icons and “multi-color” versions of over 60 social brands.


<!– inline-block: comment-out white space
or don’t close tags, or -5px margin-right –>
Add This Amazon Android Apple Behance Blogger Codepen Delicious Deviant Art Digg Dribbble Dribbble Dropbox Ebay Email Email Evernote Facebook Facebook Flattr Flickr Forrst Foursquare Github Github Gittip Gmail Gmail Google Google+ IMDb Instagram Kickstarter LinkedIn Microsoft Myspace Pandora Paypal Paypal Picasa Pinboard Pinterest Rdio Reddit RSS ShareThis Skype Slideshare Soundcloud Spotify Stumbleupon Stack Overflow Tumblr Twitter Vimeo Vine Windows Windows 7 WordPress Xing Yahoo Yelp YouTube YouTube YouTube Zerply Search Search Menu Menu Menu More… More

View Stackicons-Social

I also created a range of button shapes in the font, from square to circle (plus icon-only), and have classes that override the shape on the fly. Want circular icons? Just add the .st-shape-circle class. iOS style? .st-shape-rounded3.

Try it on CodePen

Putting It Together with Sass

Behind the scenes, there is a group of .scss _partial files that Sass compiles. If you’re comfortable using Sass you can customize things extensively just by changing variables in this “construction kit”:

  • fonts-stackicons-social – Path to stackicons-social font.
  • colors-social–2014 – Color variables for social brands.
  • unicodes-stackicons-social – Font unicode characters abstracted into variables.
  • construction-kit-stackicons-social – This is where we generate default values for icon size, margin, padding, shape, color, hover-style, etc. (Play here.)
  • css-defaults-stackicons-social – This does the CSS grunt work to create each .st-icon-($brand) class.*
  • override-shapes-stackicons-social – Let’s you override the button shape on single-color icons using classes: st-shape-square to st-shape-circle, plus st-shape-icon.*
  • override-colors-stackicons-social – Some examples of “color-styles” for single-color icons to demo different options. Lots of extra CSS, so it’s commented out by default.*
  • multi-color-kit-stackicons-social.scss – Like “construction-kit” above, but for the .st-multi-color class: generates default shape, color-style, etc.
  • multi-color-css-stackicons-social.scss – Like “css-defaults” above, this does the CSS grunt work to generate each multi-color .st-icon-($brand) class.*
  • multi-color-override-shapes-stackicons-social – This allows you to change icon shapes using classes on multi-color icons.*

* Because Sass doesn’t allow us to use variables within variables, this uses a lot of @if statements to generate the .st-icon-($brand) classes. Ugly, but marginally maintainable. There are several @each statements, listing the brands to output. Ideally, you would go through and edit these lists to limit the CSS output to only the brands you need.

Rolling Your Own

There are some great free resources for creating icon fonts, including and I use Adobe Illustrator and Glyphs on the Mac. (Glyphs Mini is a lower cost option that limits the units per em to 1000. They also offer student pricing.) To generate the web font versions, I recommend FontPrep, which Brian Gonzalez just made open source. FontSquirrel is another good free option. (If you’re interested in more workflow details, let me know in the comments.)

You should also check out some random dude (P.J. Onori) and his iconic project. He also has some helpful tips on using icon fonts.

As always, if you have any questions, comments, or corrections you can email me at

Stackicons: Doing More with Icon Fonts is a post from CSS-Tricks

from CSS-Tricks

Make a Movie with Jean-Claude Van Damme!

Strap in! The team at Funny or Die has put together a new video & a contest that is perfect for VFX and they even let me do a little cameo! Oh and it’s starring this one guy named JEAN-CLAUDE VAN DAMME!
Watch Now!

How it works:
Watch the video. Then you shoot a video and add in some pre-keyed shots of Van Damme taking names, then whoever makes the best films wins some gear! Short deadline though, only 2-weeks, good thing they are pre-keyed!

Check out the video and see what Jean-Claude Van Damme has to say about it!

Vía Video Copilot Blog

Grid Experiment


I’ve been finding some extra time to dig deeper into some built-in After Effects plug-ins to create some interesting and unique effects. Here is my new experiment using a very interesting combination of effects (as always) to build a networked title or logo.

We are really making a big effort to create new projects to keep you inspired and thinking in new ways!

I’ll be recording the tutorial this week so expect it soon and be ready for a few unexpected surprises!


Vía Video Copilot Blog

Posting Code Blocks on a WordPress Site

So you’ve installed WordPress and want to blog about code. Yay! You’re a hero and I thank on behalf of myself an coders everywhere. Here’s what you’ll need to do and think about to actually get publishing blocks of code.

The HTML for a "code block"

There is an element specifically for code: <code>. I’d say it’s semantically correct to wrap any and all code in it. Browser’s default stylesheets leave it as inline element, and I’d recommend you …

Posting Code Blocks on a WordPress Site is a post from CSS-Tricks

from CSS-Tricks
via Prabhu