In his The Future is Now talk at An Event Apart in Seattle, WA 2012 Eric Meyer talked about some of the visual effects we can achieve with CSS today. Here's my notes from his talk:
- 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.
- 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.
- Gradients are currently vendor-prefixed but browsers are now converging on a common way of styling them.
- Gradients use a lot of SVG formats. They are actually creating images behind the scenes. You’re just specifying them with text.
- 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.
- 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.
- The first gradient you list in a comma-separated list will be the first one applied. You can even combine gradient with background images.
- 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.
- Transforms don’t apply to inline elements. To apply them you need to send display type to inline-block or block.
- Font smoothing can be used to lighten up text in Webkit browsers. Use –webkit-font-smoothing: antialiased.
- 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.
- All these effects require a lot of CSS rules but you get the benefit of scalable graphics in the browser without images.
- A pre-processor like LESS or SASS does not require you to include vendor fixes –it can add them when compiled.