An Event Apart: The (CSS) Future is Now

by Luke Wroblewski June 19, 2012

In his The Future is Now talk at An Event Apart in Boston, MA 2012 Eric Meyer talked about some of the visual effects we can achieve with CSS today. Here's my notes from his talk:

  • CSS specifications are changing so fast today, it's impossible to know exactly where we'll end up in the future.
  • Please put labels around your form fields. If you have a label around a form field, you can add a border and padding. You can omit the 'for' attribute when you wrap an input in a 'label' element. This makes the entire element clickable not just the radio button but the label too.
  • Corner rounding with border radius increases until it hits a point where the element is rounded. So you can set this to a large value.
  • When you apply styles to form elements, Opera will stop pulling from controls from the operating system and start using it’s own form elements.
  • Form elements are difficult to style using CSS: what does padding mean on a radio button? No one has an answer.
  • A text-shadow with no offsets can be used to add a glow behind a text element. You can have a separated list of text-shadows to apply multiple effects. The order in which you list them makes a difference: the one that’s on top is the one that’s listed first. Most people use pixels for shadows but any length is valid.
  • Text-shadow is an un-prefixed property in all browsers now.
  • You can have also use a separated list for box-shadow to apply multiple effects. Box-shadows are drawn outside an element’s border, not behind it. You can see this with a transparent background.
  • It’s possible to exclude certain browsers by omitting vendor pre-fixed properties. But this may change very soon. Mozilla is planning to recognize webkit-prefixes in their mobile browser. This goes against the way vendor pre-fixes should be used but it’s likely to become more common.
  • Box-shadows can be inset inside a border to create a beveled look. With comma separated values you can create a bevel and drop shadow together. Shadow effects can create highlights and glows, too. Interior white shadows can be used as a highlight. No-offset shadows creates a glow.

Gradients

  • Linear gradients move from one color to another at a degree. For example, 90 degrees is vertical. English keywords (instead of degrees) are coming but not widely supported yet.
  • Gradients are moving from the way current way angles work to compass angles. This is the same way animations work in CSS. Likely this will happen when pre-fixes are removed. There is an easy way to convert between these two system: 90-x.
  • Keywords in the new standard tell browsers where you are going "to top". Instead of where coming from in the previous standard: "bottom".
  • Gradients are currently vendor-prefixed but browsers are now converging on a common way of styling them.
  • Percentages can be used to create a set of color stops within a linear gradient. These are not relative to each other they are relative to the whole. There isn’t a way to declare lengths from the end of the axis.
  • You can create hard stops between two colors in a gradient in addition to fades.
  • transparent can be used as a keyword for transparent black. This can darken gradient effects unintentionally.
  • The first gradient you list in a comma-separated list will be the first one applied. You can even combine gradient with background images.
  • When using repeating-linear-gradients browsers are really bad at rounding. Be careful using repeating-linear gradients until bugs get fixed.
  • Gradients use a lot of SVG formats but they are actually creating images behind the scenes. You’re just specifying them with text.
  • Adding background-position when you declare gradients in background means you can place a gradient stripe or multiple stripes anywhere you like in the background.
  • Radial gradients are more complex and can crash browsers. Use carefully.

Additional Tips

  • Text-rendering is supported across multiple browsers. Setting text-rendering: optimizeLegibility tightens up the leading of fonts (at least currently). This is an enhancement so if some browsers don’t support it, that’s ok.
  • Font smoothing can be used to lighten up text in Webkit browsers. Use –webkit-font-smoothing: antialiased.
  • Transforms don’t apply to inline elements. To apply them you need to send display type to inline-block or block.
  • All these effects require a lot of CSS rules but you get the benefit of scalable graphics in the browser without images.