At An Event Apart in Chicago IL 2013, Lea Verou shared a number of advanced CSS techniques for creating useful design effects in the browser. Here's my notes from her talk Deep CSS Secrets:
- background-attachment can be used to make background images fixed or scroll. There is a new value called local. It stays fixed when scrolling the page but scrolls within a local area. This property can be used to create subtle shadows within a container that appear when you scroll the elements inside it.
- Background-attachment actually has good browser support. Firefox just added support recently.
- Fixed width, fluid background layouts usually rely on sections with wrappers inside that are centered with auto margins. So we’re using extra elements.
- Margin auto takes the space left after removing width and divides it by two. You can express this with a calc function like calc(50% - 700px/2) Once you have this equation, you no longer need the wrapper -just use this function for padding on the section.
- Calc() has ok browser support so if you don’t want to use it, specify very large padding and very large negative margins. It provides the same effect but its a hack.
- You can restrict transitions by CSS properties like width. You can also delay CSS transitions and add multiple transitions per property. This allows you to create a lightbox effect for images where the height and width expand in order. You can use the box-shadow property and set it to a very large pixel value to fade out the background.
- Transitions have good browser support (IE9 and below is an issue) but they degrade gracefully. If transitions are not supported you get an abrupt change. If they are, you get a smooth change.
- Background-origin specifies what background position means. It determines where you start your background-position offsets. It can be set to content-box which takes content padding into effect. You can create zebra-striping of elements with a gradient with two color stops meeting at 50% and background-origin set to content-box.
- Browser support is not great for gradients. But background-origin has better support and you can use background-images or SVG for the same effect.
- You can apply a transform to an outer element but then cancel the transform within an element by applying the opposite transform. This allows you to create unique shapes for images and more. CSS transforms have some of the best browser support of CSS3 features.
- Using the same technique (inner transforms canceling outer transforms), you can make an element rotate in a circular path.
- Applying shadows to speech bubbles doesn’t seem to work well -it only follows the border-radius. If we are willing to deal with spotty browser support, we can use CSS filters. This will shadow everything.
- CSS filters are basically SVG filters with better syntax so you can use SVG filters as a back-up for browsers that don’t support CSS filters.
- How can you blur the part of an image behind another element? Using a filter on an entire element blurs everything in the element. So instead we can use a pseudo-element and position it behind the element.
- To make this work, you need to add the same background image to the element you want to blur. Caveat: this technique requires messy background image effects.
- When you justify text using text-align you often get odd line breaks due to a lack of hyphenation support. CSS hyphenation is coming and requires just one line of code.
- CSS animations can move in steps. You can set the number of steps you want and how long they should last. This allows you to create animated gif like effects using CSS & a sprite.
- You can create semi-transparent animated images using this technique. Browser support for steps() in CSS animations is not great but you when it is not supported, you just see the first image so there is a graceful fallback.