As you may have read, outside of gradients, you can’t change a background-image with CSS transitions. Or can you? At InControl Conference last week, Greg Rewis spoke about Transitions, Transforms and Animations. A question was asked about showing one background-image on load and transitioning to another in a subsequent pseudo-state. You can always change the [...]

This morning I awakened with a question in my twitter stream from @deebeefunky. He was frustrated by the fact that when he sets a blur on box-shadow, it shows on two sides of the box. He wants it to show on only one side. Of course, that got me thinking. I did come up with [...]

Australia. Parliament. Joint Standing Committee on Foreign Affairs, Defence and Trade, author, issuing body

I only wrote a chapter in this new book, The HTML and CSS Workshop: A New, Interactive Approach to Learning HTML and CSS, but it is a new book and my name is on it and it’s on Amazon, so it’s still ???? cool. I wrote the chapter on Themes, Colors, and Polish. Here’s what […]

See how easy it is to create an equal heights, responsive CSS pricing table using the power of CSS Flexbox.

See the two ways to add a sticky horizontal menu to your site, plus 7 beautiful examples of this pattern out in the wild.

As time goes by, CSS is becoming more and more powerful and nowadays it offers lots of possibilities to create visually stunning websites. This article is a compilation of fresh, advanced CSS tips and techniques to master your web design and front-end web development skills. Each technique features sample code snippet, demo, and explanations. Warning: …

Advanced CSS Tricks and Techniques Read More »

When building a website, using a CSS framework is a real time saver as it provides you with tools every web designer and front-end developer needs when crafting a site (other than good web hosting). A CSS framework is a software framework created to allow for easier, more standards-compliant web design using HTML/CSS. Many popular …

Best CSS Frameworks for Building Better Websites Read More »

Using modern CSS techniques, it has never been easier to create a loader/spinner of any kind. This article showcases over 40 different techniques and styles.

I think that CSS would be greatly helped if we solemnly state that “CSS4 is here!” In this post I’ll try to convince you of my viewpoint.

I am proposing that we web developers, supported by the W3C CSS WG, start saying “CSS4 is here!” and excitedly chatter about how it will hit the market any moment now and transform the practice of CSS.

Of course “CSS4” has no technical meaning whatsoever. All current CSS specifications have their own specific versions ranging from 1 to 4, but CSS as a whole does not have a version, and it doesn’t need one, either.

Regardless of what we say or do, CSS 4 will not hit the market and will not transform anything. It also does not describe any technical reality.

Then why do it? For the marketing effect.

I think that announcing a new CSS version will bring desperately-needed attention to CSS, and will help the people evangelising CSS in the field make an impression on web developers who are otherwise not very interested in it.

Web developers are profoundly influenced by the cult of the new. The best way of getting their attention is announcing a new version of something, and that’s exactly what we would be doing here.

I have been given to understand that the CSS WG might be willing to support this narrative and confirm the existence of CSS4 — if we web developers can make a strong enough case that it will be beneficial to CSS. Today I am starting to build such a case.

Head, torso, long tail

Influenced by Ilya Grigorik’s excellent performance.now() presentation, I segment web developers into a head, a torso, and a long tail. CSS4 would help the latter two groups.

• The head consists of clued-in web developers who closely follow what’s going on in our field
• The torso consists of those that have some clue what they’re doing and read up on their craft from time to time
• The long tail covers a wide range of web developers, from those who are fairly close to the torso to those that churn out interminable sites without understanding why using 7.8M of JavaScript per site is a really bad idea.

(These segments form by self-selection. Any web developer can become part of the head, but it takes more effort than being part of the long tail. Not everyone feels the need to put in that extra effort, and thus the three segments come into being.)

CSS is, and has always been, part of the head’s world. The head does not need CSS4 because it already follows CSS closely, goes to conferences, reads blogposts and articles about upcoming features, and knows what’s happening.

The torso does this to a much lesser extent, and the long tail doesn’t care one way or the other — they found all the answers when they selected their current toolchain. It’s them that we seek to influence by announcing CSS4.

In practice, all current outreach efforts such as conference presentations and blog posts or articles are aimed at the head. Not that the torso or long tail wouldn’t understand them, but they generally don’t seek them out. I would like to give them an incentive to do so.

In my opinion, “CSS4 is here!” would provide that incentive.

What do you think?

If you read this blog post you likely belong to the head. Based on your own experience you might not see the point of CSS4 because it doesn’t solve your problems. But CSS4 is not aimed at you; it’s aimed at the torso and the long tail.

When considering the pros and cons of CSS4, don’t reason from your own experience. Please put yourself in the shoes of someone whose time is limited, or who has never learned to pay a lot of attention to technical evangelisation. Will they be helped?

On the other hand, if your job, or your passion, includes evangelising CSS, you should definitely reason from your own experience. Will slapping on a “CSS4 compatible” tag help you?

So these are today’s questions. Will the announcement of CSS4 — new! shiny! cool! — spur on the torso and long tail to learn more about CSS? Will it help those who are already putting a lot of time and sweat into technical articles and presentations to reach a wider audience? Will it make a difference?

I think it will.

What do you think?

And if you agree with me, would you be willing to write something about it? That would show the CSS WG that there is developer support for this idea.

If we want CSS4 to be a thing it is necessary to define it a little more. However, that does not mean it’s necessary to divide all existing CSS modules into CSS3 and CSS4 buckets. This article discusses these issues, and goes through some of the feedback to my original article.

Responses

My article led to a few responses. Louis Lazaris disagrees with me, and thinks we should stick to the individual modules, as we do today. I leave it to Dan Q to summarise my disagreement:

Nobody’s going to buy a book that promises to teach them “CSS3 Selectors Level 3, Fonts Level 3, Writing Modes Level 3, and Containment Level 1”: that title’s not even going to fit on the cover. But if we wrapped up a snapshot of what’s current and called it CSS4… now that’s going to sell.

In a comment, Ilya Streltsin points out that there are too many CSS modules, which makes them less suitable for high-level teaching and marketing. A list of twelve modules is inherently more boring than “CSS4.”

Still, Louis isn’t entirely wrong. We need to say something about what CSS4 is. Chris Coyier and Timothy Miller have some ideas that I’ll get back to below.

I think we should pick two or so modules that would become poster children for “CSS4,” mostly to raise awareness and enthusiasm among web developers who don’t follow CSS too closely.

CSS4 is undefined

Picking two or so modules is not the same as going through all of CSS and deciding which parts are CSS3 and which are CSS4. Therefore Johan Ronsse’s fears are unfounded:

As a teacher of sorts, I for one don’t want to explain the difference between CSS3 and CSS4 to junior web devs. There is simply no point. CSS is just CSS. We should be happy that it’s stable. We should be happy that we dropped the 3.

CSS modules are not CSS3 or CSS4; they’re just CSS. The term “CSS4” is meant to draw people to your teaching, but once you have their attenton you largely drop the term and just teach them what they need to know.

Instead of attempting to define it, we should airily refer to CSS4 but be rather vague about what it means exactly. That allows people to project their own feelings and ideas onto it. CSS4 is here, and it means whatever you want it to mean. Now come and learn. It’s cool!

Remember: this is a marketing exercise; not a technical description of CSS.

Setting minds at ease

Nonetheless, in order to prove that CSS4 is cool we need a few example modules. “Learn CSS4! It allows you to do X and Y!” Which modules should we pick?

When I was a history teacher, long ago, I learned one valuable trick: when writing tests for students, always start with a simple question that all of them know the answer to. The purpose is to put the students’ minds at ease and make them feel they know at least something about the topic.

For instance, if they have to learn the chapter on the French Revolution, start the test by asking “In which year did the French Revolution take place?” The chapter prominently states the answer, 1789, in the first two paragraphs, so you can be reasonably certain that almost all students have actually learned this by heart. So they’ll sigh a breath of relief, give the correct answer, and gain more confidence for the rest of the test.

I feel we should do something similar f0r CSS4. One of the modules we tout as “CSS4” should be one that even people who’re not all that good in CSS have used and know a little bit. That’ll make them feel that they already know something about the subject, so the rest shouldn’t be too hard. It will draw them in.

CSS4 — the known parts

Chris Coyier created a draft list, and Timothy Miller added a few ideas. The first module Chris mentions is Flexbox, but he notes it may be too old. Sadly, I must concur. Flexbox would have been a brilliant “set-your-mind-at-ease-CSS4-is-not-as-hard-as-you-think” module, because almost everyone has heard of it, and plenty of people who are otherwise not terribly into CSS have used it.

Unfortunately it’s really too old: if we’d use it as our poster child people might lose the suspension of disbelief that’s necessary for the CSS4 trick to work. “Huh? Flexbox? But that’s been around for ages!”

Grid is the obvious next option. It’s not too old, and some people have heard of it and use it. On the other hand, I learned doing research for the book that there are some web developers who feel they don’t have to learn Grid because they already know Flexbox. And both are for layout, right? So why learn two?

As an argument this does not make any sense, but the fact that this ideas is floating out there means using Grid as a poster child might backfire. (I’m not sure; I’m just guessing here. But my gut feeling says that Grid is the wrong module.) Update: I changed my mind: grid should definitely be part of CSS4.

For now I settled on CSS custom properties (or variables) as my choice. They are in use, but they’re not yet old news. More importantly, custom properties allow local scope in CSS, and that is quite important to JavaScripters and might draw them to the right articles and teachings.

I’m not quite sure yet if this is the best module — I’m open to arguments. But I have to say something, and this is where I stand right now.

CSS4 — the unknown parts

In addition to the well-known set-your-mind-at-ease module we should also have soemthing that’s really, really new. The idea would be to tout two modules as “CSS4.” People would lose their fear after recognizing custom properties, while the other module would intrigue them, and they’d be excited to learn about it.

But which module? I’m not sure. Chris mentions Houdini, CSS nesting, variable fonts, and offset paths as possibilities. Timothy adds media queries level 4 to the list. Chris also says:

Lemme just say I will personally spearhead this thing if container queries can get done and we make that a part of it.

Container queries would be suitable. Developers who predominantly use JavaScript would like to have them.

Unfortunately they’re not there yet. So although they’re an excellent choice for a future module (“CSS4 will eventually include container queries”), they won’t help us right now.

So ... does anyone have a useful suggestion for a new CSS module that is not well known yet, applies to more than just a subset of CSS, and that we can start teaching right now? (Lack of general applicability is my problem with variable fonts and offset paths.)

Houdini? I’m afraid its complexity will detract from learning simple CSS, so I’m not sold. Level 4 media queries? I feel there’s too little difference with level 3.

So I don’t know right now. I’ll continue to think about this, and meanwhile I’d appreciate hints and ideas.

I’m writing the Box Model chapter of the new book and came to the point where I had to treat negative margins. To my surprise, I found that there is no systematic treatment of negative margins anywhere. So I had to figure it out for myself. Below is my initial draft of the negative margin section.

The latest specification only says: “Negative values for margin properties are allowed, but there may be implementation-specific limits.” and leaves it at that. Not extremely helpful. MDN is mostly silent as well, and Rachel Andrew’s big overview article doesn’t mention negative margins at all.

That’s odd, especially since negative margins are a very old functionality that I might even have used in my very first CSS test somewhere back in 1998. (Unless I used position: relative; I can’t remember.)

But anyway, here is, apparently, the first-ever systematic treatment of negative margins in simple situations.

Negative margins in CSS

It is possible to give margins a negative value. This allows you to draw the element closer to its top or left neighbour, or draw its right and bottom neighbour closer to it. Also, there is an exception we’ll get to in a minute.

Here is our test element: a simple container with three paragraphs in it. Note that the paragraphs have a width of 250px. This is extremely important, due to the exception we’ll get to in a minute.

Negative margin-top and -bottom

To start, let’s give the first paragraph a -15px margin-bottom. Essentially, when the browser calculates the point where the second paragraph should start, it moves that point 15px upward. From then on the browser lays out all paragraphs as normal.

Therefore the second paragraph, being the bottom neighbour of the first one, is draw 15px closer to the first paragraph. The margin between the second and third paragraphs remains intact; the browser calculates it normally. Thus, the rest of the vertical rhythm is preserved.

This trick is useful for subtle tweaks, where the content of one element should slightly overlap the content of the one above it.

Now let’s give the second paragraph a -15px margin-top. As you see, this yields exactly the same effect. Again, the second paragraph is moved upward by 15px, and the subsequent paragraphs follow.

Margin collapsing

Also note that margin collapsing behaves different when you use negative margins. This, at least, is specified in CSS 2.1:

In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.

In the last example, the first paragraph still has its default margin-bottom of 1em (Chrome; can’t find Firefox’s value).

Normally, the browser would take the first paragraph’s margin-bottom and the second one’s margin-top, figure out which one is larger, and apply that margin between the two, which would yield max(-15px,1em) = 1em. That’s not how it works, though.

In case of negative margins we take the absolute values of the two adjoining margins (15px for the second paragraph; 1em for the first), and deduct the smaller (15px) from the larger (1em). This yields about 1px (depending on the font size, of course).

Thus, negative margins are actually allowed to pull elements closer to their neighbours without being hindered by regular margin collapsing.

Now we treated negative margin-top and -bottom fully. It’s an occasionally useful effect.

Negative margin-left and -right

Negative margin-left and -right work the same, provided the element has a width. Here we apply margin-left: -10px and margin-right: 10px.

As you see, the first paragraph is now offset 10px to the left, while retaining its width. Thus, its right edge also moves 10px to the left.

The second paragraph with the negative margin-right is unaffected. The negative margin-right would influence any element to the right of the second paragraph, but there aren’t any.

To show negative margin-right in its full glory, let’s float the paragraphs, so that they have a right neighbour. Here is the reference element.

Now we’re going to sprinkle some negative margins on the paragraphs.

As you see, the second paragraph is now drawn 10px closer to the first one due to the first’s negative margin-right. This is exactly the same effect as with a negative margin-bottom.

Also note that the second paragraph has a negative margin-top, which means it is offset 10px upward. The third paragraph has a negative margin-bottom, which has no effect, since it does not have a bottom neighbour.

Remember: margin collapsing does not work on margin-left and -right; just on -top and -bottom. Therefore we do not have to worry about it in this case.

If we give the second paragraph a margin-left: -10px, the same happens. Just like with top and bottom, left and right are interchangeable for this effect.

So far, negative margin-left and -right behave exactly like negative margin-top and -bottom.

width: auto and negative margin-right

Now let’s change the behaviour of negative margin-right by giving the paragraphs width: auto. They do not have a fixed width any more; instead they fill up their parent element completely while respecting its padding. That’s how width: auto works.

The paragraph with margin-left: -10px is still offset 10px to the left, but its width grows. Thus, its right edge is not offset but stays where it is.

The negative margin-right now does the same thing. It offsets the paragraph’s right margin by 10px to the right, and the paragraph’s width increases, causing its left edge to stay where it is. This only happens when an element has width: auto. As we saw before, elements with a fixed width behave quite differently.

Finally, the third paragraph has both. Both its left and its right margins are offset by 10px, essentially negating the container’s padding: 10px;.

This is by far the most common use case for negative margins. You give a container a padding so that its contents have some breathing space. However, you want the header to span the entire container, ignoring the padding. Negative margins are the way to go.

These are the header styles; the container has padding: 10px

h5 {
	margin-left: -10px;
	margin-right: -10px;
	padding-left: 10px;
	margin-top: 0;
	margin-bottom: 0;
	background-color: grey;
	color: white;
	/* no width, so defaults to width: auto */	
}

Again, this is only possible if the header has width: auto. Fortunately that’s the case in 99% of real-world use cases.

This is how negative margins behave in simple situations. Now that I established a baseline I can look into how they behave in flexboxes and grids.

In a recent issue of my newsletter, I briefly discussed many (if not all?) of the different ways you can retrieve a DOM element's dimensions via JavaScript.

These include getBoundingClientRect()'s width and height properties, offsetWidth and offsetHeight, window.getComputedStyle(), the document.styleSheets object, and scrollWidth and scrollHeight.

The post DOM Element Dimensions and CSS Transforms appeared first on Impressive Webs.

Over on CSS-Tricks, Chris breaks down what some in the industry have said on the possibility that there will one day be a CSS4. The latest article that Chris references is one by a well-respected member of the community, Peter-Paul Koch ("PPK").

In brief, PPK believes in initiating some sort of marketing gimmick wherein we basically try to repeat the success of the buzz surrounding "CSS3" by pushing the name "CSS4".

The post CSS4 is a Bad Idea appeared first on Impressive Webs.

I’ve been coding websites for a long time but even I was a little puzzled when I came across a Hacker News comment where the commenter described their own makeshift CMS that involves using your own file system. The most interesting part to me was when the person said they add CSS to pages on their personal projects by means of HTTP headers.

I had heard of this technique before and the person does say in the comment that this doesn’t work in every browser. But I decided to do some research to figure out how one might do this and why this would be easier than just dropping in one or more <link> elements in the HTML.

The post Adding CSS to a Page via HTTP Headers appeared first on Impressive Webs.

IEEE / Institute of Electrical and Electronics Engineers Incorporated

IEEE / Institute of Electrical and Electronics Engineers Incorporated

IEEE / Institute of Electrical and Electronics Engineers Incorporated

IEEE / Institute of Electrical and Electronics Engineers Incorporated

I was always interested in color science. In 2014, I gave a talk about CSS Color 4 at various conferences around the world called “The Chroma Zone”. Even before that, in 2009, I wrote a color picker that used a hidden Java applet to support ICC color profiles to do CMYK properly, a first on […]

Have you ever visited a website and been stunned by a beautiful hover effect? Or have subtle UI animations left you feeling impressed with a site’s design? It may seem like a small detail, but hover animations can have a …

Did you know that you can use CSS to create beautiful animations and interesting effects? Combined with HTML and JavaScript, or even on its own, CSS can be extremely powerful. You’d be surprised at what developers can create. From simple …

As time goes on, web design is getting more innovative. Rather than just displaying information, websites are works of art, featuring complex animations, unique layouts, and micro-interactions. So many of these things are possible through CSS.

CSS gives style …

CSS effects can be a great way to add some visual interest to your website. A common web design mistake is making a website that’s too static. One little parallax animation can do wonders to make your design more interesting …

Sometimes a cool glitchy, distorted effect is the perfect addition to your web design. Maybe you’re creating a tech site, a developer’s portfolio, or something completely experimental. Distortion effects are an unconventional but interesting way to grab visitors’ attention …

Building a full calendar UI is tough work. There are major differences between calendars on the web and calendars for mobile apps, so it’s good to study examples and see what’s out there.

After scouring through CodePen, I’ve organized …

CSS Grid is one of the most powerful tools available to developers. The simple module allows you to create entire website layouts, responsive galleries, and other cool effects. With enough creativity, you can do a lot of interesting things using …

If you want to give your website a little extra flair, you’ll definitely want to investigate and utilize CSS animated buttons. These bits of code add a layer of interactivity to your website that most site visitors will appreciate. Plus, …

Rachel Andrew guides us through a tour of the last fifteen years in CSS layout, as manifested in articles here on 24 ways. From the days when Internet Explorer 6 was de rigueur, right up to the modern age of evergreen browsers, the only thing you can be sure of is that the web never stands still for long.

I’ve written nine articles in the 15 years of 24 ways, and all but one of those articles had something to do with CSS. In this last year of the project, I thought I would take a look back at those CSS articles. It’s been an interesting journey, and by reading through my words from the last 15 years I discovered not only how much the web platform has evolved - but how my own thinking has shifted with it.

2005: CSS layout starting points

Latest web browser versions: Internet Explorer 6 (at this point 4 years old), IE5.1 Mac, Netscape 8, Firefox 1.5, Safari 2

Fifteen years ago, my contributions to 24 ways started with a piece about CSS layout. That article explored something I had been using in my own work. In 2005, most of the work I was doing was building websites from Photoshop files delivered to me by my design agency clients. I’d built up a set of robust, tried-and-tested CSS layouts to use to implement these. My starting point when approaching any project was to take a look at the static comps and figure out which layout I would use:

• Liquid, multiple column with no footer
• Liquid, multiple column with footer
• Fixed width, centred

At that point, there were still many sites being shipped with table-based layouts. We had learned how to use floats to create columns some four years earlier, however layout was still a difficult and often fragile thing. By developing patterns that I knew worked, where I had figured out any strange bugs, I saved myself a lot of time.

Of course, I wasn’t the only person thinking in this way. The two sites from which the early CSS for layout enthusiasts took most of their inspiration, had a library of patterns for CSS layout. The Noodle Incident little boxes is still online, glish.com/css is sadly only available at the Internet Archive.

This thinking was taken to a much greater extreme in 2011, when Twitter Bootstrap launched and starting with an entire framework for layout and much more became commonplace across the industry. While I understand the concern many folk have about every website ending up looking the same, back in 2005 I was a pragmatist. That has not changed. I’ve always built websites and run businesses alongside evangelizing web standards and contributing to the platform. I’m all about getting the job done, paying the bills, balancing that with trying to make things better so we don’t need to make as many compromises in the future. If that means picking from one of a number of patterns, that is often a very reasonable approach. Not everything needs to be a creative outpouring.

Today however, CSS Grid Layout and Flexbox mean that we can take a much more fluid approach to developing layouts. This enables the practical and the creative alike. The need for layout starting points - whether simple like mine, or a full framework like Bootstrap - seems to be decreasing, however in their place comes an interest in component libraries. This approach to development partly enabled by the fact that new layout makes it possible to drop a component into the middle of a layout without blowing the whole thing up.

2006: Faster Development with CSS Constants

Latest web browser versions: Internet Explorer 7, Netscape 8.1, Firefox 2, Safari 2

My article in 2006 was once again taken from the work I was doing as a developer. I’ve always been as much, if not more of a backend developer than a frontend one. In 2006, I was working in PHP on custom CMS implementations. These would also usually include the front-end work. Along with several other people in the industry I’d been experimenting with ways to use CSS “constants” as we all seemed to call them, by processing the CSS with our server-side language of choice.

The use case was mostly for development, although as a CMS developer, I could see the potential of allowing these values to be updated via the CMS. Perhaps to allow a content editor to change a color scheme.

Also in 2006, the first version of Sass was released, created by Hampton Catlin and Natalie Weizenbaum. Sass, LESS and other pre-processors began to give us a more streamlined and elegant way to achieve variables in CSS.

In 2009, the need for pre-processors purely for variables is disappearing. CSS now has Custom Properties - something I did not foresee in 2006. These “CSS Variables” are far more powerful than swapping out a value in a build process. They can be changed dynamically, based on something changing in the environment, rather than being statically set at build time.

2009: Cleaner Code with CSS3 Selectors

Latest web browser versions: Internet Explorer 8, Firefox 3.5, Safari 4, Chrome 3

After a break from writing for 24 ways, in 2009 I wrote this piece about CSS3 Selectors, complete with jQuery fallbacks due to the fact that some of these selectors were not usable in Internet Explorer 8.

Today these useful selectors have wide browser support, we also have a large number of new selectors which are part of the Level 4 specification. The changes section of the Level 4 spec gives an excellent rundown of what has been added over the years. Browser support for these newer selectors is more inconsistent, MDN has an excellent list with the page for each selector detailing current browser support and usage examples.

2012: Giving Content Priority with CSS3 Grid Layout

Latest web browser versions: Internet Explorer 10, Firefox 17, Safari 6, Chrome 23

My 2012 piece was at the beginning of my interest in the CSS Grid Layout specification. Earlier in 2012 I had attended a workshop given by Bert Bos, in which he demonstrated some early stage CSS modules, including the CSS Grid Layout specification. I soon discovered that there would be an implementation of Grid in IE10, the new browser shipped in September of 2012 and I set about learning how to use Grid Layout. This article was based on what I had learned.

The problem of source versus visual order

As a CMS developer I immediately linked the ability to lay out items and prioritize content, to the CMS and content editors. I was keen to find ways to allow content editors to prioritize content across breakpoints, and I felt that Grid Layout might allow us to do that. As it turned out, we are still some way away from that goal. While Grid does allow us to separate visual display from source order, it can come at a cost. Non-visual browsers, and the tab order of the document follow the source and not the visual display. This makes it easy to create a disconnected and difficult to use experience if we essentially jumble up the display of elements, moving them away from how they appear in the document. I still think that an issue we need to solve is how to allow developers to indicate that the visual display should be considered the correct order rather than the document order.

The Grid Specification moved on

Some of the issues in this early version of the grid spec were apparent in my article. I needed to use a pre-processor, to calculate the columns an element would span. This was partly due to the fact that the early grid specifications did not have a concept of the gap property. In addition the initial spec did not include auto-placement and therefore each item had to be explicitly placed onto the grid. The basics of the final specification were there, however over the years that followed the specification was refined and developed. We got gaps, and auto-placement, and the grid-template-areas property was introduced. By the time Grid shipped in Firefox, Chrome, and Safari many of the sticky things I had encountered when writing this article were resolved.

2015: Grid, Flexbox, Box Alignment: Our New System for Layout

Latest web browser versions: Edge 13, Firefox 43, Safari 9, Chrome 47

Grid still hadn’t shipped in more browsers but the specification had moved on. We had support for gaps, with the grid-row-gap, grid-column-gap and grid-gap properties. My own thinking about the specification, and the related specifications had developed. I had started teaching grid not as a standalone module, but alongside Flexbox and Box Alignment. I was trying to demonstrate how these modules worked together to create a layout system for modern web development.

Another place my thinking had moved on since my initial Grid article in 2012, was in terms of content reordering and accessibility. In July of 2015 I wrote an article entitled, Modern CSS Layout, Power and Responsibility in which I outlined these concerns.

Some things change, and some stay the same. The grid- prefixed gap properties were ultimately moved into the Box Alignment specification in order that they could be defined for Flex layout and any other layout method which in future required gaps. What I did not expect, was that four years on I would still be being asked about Grid versus Flexbox:

“A question I keep being asked is whether CSS grid layout and flexbox are competing layout systems, as though it might be possible to back the loser in a CSS layout competition. The reality, however, is that these two methods will sit together as one system for doing layout on the web, each method playing to certain strengths and serving particular layout tasks.”

2016: What next for CSS Grid Layout?

Latest web browser versions: Edge 15, Firefox 50, Safari 10, Chrome 55

In 2016, we still didn’t have Grid in browsers, and I was increasingly looking like I was selling CSS vaporware. However, with the spec at Candidate Recommendation, and it looking likely that we would have grid in at least two browsers in the spring, I wrote an article about what might come next for grid.

The main subject was the subgrid feature, which had by that point been removed from the Level 1 specification. The CSS Working Group were still trying to decide whether a version of subgrid locked to both dimensions would be acceptable. In this version we would have declared display: subgrid on the grid item, after which its rows and columns would be locked to the tracks of the parent. I am very glad that it was ultimately decided to allow for one-dimensional subgrids. This means that you can use the column tracks of the parent, yet have an implicit grid for the rows. This enables patterns such as the one I described in A design pattern solved by subgrid. At the end of 2019, we don’t yet have wide browser support for subgrid, however Firefox has already shipped the value in Firefox 71. Hopefully other browsers will follow suit.

Level 2 of the grid specification ultimately became all about adding support for subgrid, and so we don’t yet have any of the other features I mentioned in that piece. All of those features are detailed in issues in the CSS Working Group Github repo, and aren’t forgotten about. As we come to decide features for Level 3, perhaps some of them will make the cut.

It was worth waiting for subgrid, as the one-dimensional version gives us so much more power, and as I take a look back over these 24 ways articles it really underlines how much of a long game contributing to the platform is. I mentioned in the closing paragraph of my 2016 article that you should not feel ignored if your idea or use case is not immediately discussed and added to a spec, and that is still the case. Those of us involved in specifying CSS, and in implementing CSS in browsers care very much about your feedback. We have to balance that with the need for this stuff to be right.

2017: Christmas Gifts for Your Future Self: Testing the Web Platform

Latest web browser versions: Edge 16, Firefox 57, Safari 11, Chrome 63

In 2017 I stepped away from directly talking about layout, and instead published an article about testing. Not about testing your own code, but about the Web Platform Tests project, and how contributing to the tests which help to ensure interoperability between browsers could benefit the platform - and you.

This article is still relevant today as it was two years ago. I’m often asked by people how they can get involved with CSS, and testing is a great place to start. Specifications need tests in order to progress to become Recommendations, therefore contributing tests can materially help the progress of a spec. You can also help to free up the time of spec editors, to make edits to their specs, by contributing tests they might otherwise need to work on.

The Web Platform Tests project has recently got new and improved documentation. If you have some time to spare and would like to help, take a look and see if you can identify some places that are in need of tests. You will learn a lot about the CSS specs you are testing while doing so, and you can feel that you are making a useful and much-needed contribution to the development of the web platform.

2018: Researching a Property in the CSS Specifications

Latest web browser versions: Edge 17, Firefox 64, Safari 12, Chrome 71

I almost stayed away from layout in my 2018 piece, however I did feature the Grid Layout property grid-auto-rows in this article. If you want to understand how to dig up all the details of a CSS property, then this article is still useful.

One thing that has changed since I began writing for 24 ways, is the amount of great information available to help you learn CSS. Whether you are someone who prefers to read like me, or a person who learns best from video, or by following along with a tutorial, it’s all out there for you. You don’t have to rely on understanding the specifications, though I would encourage everyone to become familiar with doing so, if just to be able to fact check a tutorial which seems to be doing something other than the resulting code.

2019: And that’s a wrap

Latest web browser versions: Edge 18, Firefox 71, Safari 12, Chrome 79

This year is the final countdown for 24 ways. With so many other publications creating great content, perhaps there is less of a need for an avalanche of writing in the closing days of each year. The archive will stay as a history of what was important, what we were thinking, and the problems of the day - many of which we have now solved in ways that the authors could never have imagined at the time. I can see through my articles how my thinking evolved over the years, and I’m as excited about what comes next as I was back in 2005, wondering how to make CSS layout easier.

About the author

Rachel Andrew is a Director of edgeofmyseat.com, a UK web development consultancy and creators of the small content management system, Perch; a W3C Invited Expert to the CSS Working Group; and Editor in Chief of Smashing Magazine. She is the author of a number of books including The New CSS Layout for A Book Apart and a Google Developer Expert for Web Technologies.

She curates a popular email newsletter on CSS Layout, and is passing on her layout knowledge over at her CSS Layout Workshop.

When not writing about business and technology on her blog at rachelandrew.co.uk or speaking at conferences, you will usually find Rachel running up and down one of the giant hills in Bristol, or attempting to land a small aeroplane while training for her Pilot’s license.

More articles by Rachel

A simple CSS-only marquee effect for a menu based on Francesco Zagami's Dribbble shot.

CSS-Only Marquee Effect was written by Mary Lou and published on Codrops.

Panel Brian Turley (twitter blog) Joe Eames (twitter github blog) Merrick Christensen (twitter github) AJ O’Neal (twitter github blog) Charles Max Wood (twitter github Teach Me To Code Rails Ramp Up) Discussion 02:11 - CSS Gripes Sass Scalable and Modular Architecture for CSS (SMACSS) CSS3 16:32 - Preprocessors/Compilers LESS Sass Stylus Compass Chris Eppstein 20:34 - Basic Features of CSS Preprocessors nib mix-ins 23:02 - Usefulness 27:15 - Mathematics w/ Variables Susy 28:54 - Animation Using CSS animations 31:12 - Nesting 35:40 - Build Processes grunt.js 42:20 - Distinction Prefixing 47:35 - Tightly Coupled Picks Old Man’s War by John Scalzi (Joe) X-Wing Miniatures Game (Joe) Dave Crowe (Merrick) Utah Software Craftsmanship Group (AJ) Effective JavaScript by David Herman (AJ) SD Card (Chuck) New Media Expo (Chuck) Consumer Electronics Show (Chuck) iOS Development Podcast (Chuck) Grid Systems in Graphic Design by Josef Muller-Brockmann (Brian) IFTTT (Brian) Book Club Effective JavaScript by David Herman Transcript MERRICK:  You have more technical problems than any other nerd I know. [Hosting and bandwidth provided by the Blue Box Group. Check them out at bluebox.net.] [This episode is sponsored by Component One, makers of Wijmo. If you need stunning UI elements or awesome graphs and charts, then go to Wijmo.com and check them out.] CHUCK:  Hey everybody and welcome to Episode 42 of the JavaScript Jabber show. This week on our panel, we have Joe Eames. MERRICK:  He’s out to a phone call, terrible timing. CHUCK:  We also have Merrick Christensen. MERRICK:  That’s me. CHUCK:  AJ O’Neal. AJ:  Yo! Yo! Yo! Coming at you live from the snow sphere of Provo, Utah. CHUCK:  And we have a guest, that’s Brian Turley. BRIAN:  That’s right. I’m a designer friend of AJ’s. CHUCK:  We’re talking about CSS today so we brought in a designer to set us all straight. And I’m Charles Max Wood from devchat.tv. And like I said, we’re talking about CSS today. One of the things I think that’s interesting about CSS is that it converges with JavaScript. Well, there are a couple of things but one is systems like LESS, that kind of compile, they give you some sane options for dealing with some of the dumb stuff that CSS doesn’t include. Then the other one is, I’ve also wound up fighting designers for selectors in the HTML. And so, I thought we could talk through that a little bit as well. BRIAN:  Hey, Chuck? CHUCK:  Yes? BRIAN:  I think those are two like really good points but I think there’s even more areas we can discuss in terms of how JavaScript and CSS are coupled. Like computed styles from JavaScript and also all the CSS methods from JavaScript. And the fact that your JavaScript sometimes doesn’t work, your UI doesn’t work unless the CSS is set up. I think the two tend to be a lot more coupled than people like to think. CHUCK:  I agree. That’s fair. So, which avenue or which aspect do you want to tackle first? Should we talk about just CSS and where it kind of doesn’t give us what we want? BRIAN:  I would love to complain about CSS. I got some bitterness in that sphere. CHUCK:  I know some people consider it programming but it doesn’t have any of the things that classic programming has like variables and functions or methods or anything like that. And I think that’s where a lot of us get frustrated is that we’re used to being able to reuse things, we’re used to being able to set things up that will define the behavior that we want. And in CSS, you really don’t have that. It’s really just simple markup. JOE:  So, do we consider the CSS languages, like Sass and LESS and all those to be part of CSS because then we talk about actually having those things. CHUCK:  Yes. I don’t know if you can call them CSS.

02:30 - Ben Briggs

• Twitter
• GitHub
• Blog
• cssnano

03:03 - PostCSS

• cssnext
• Postcss.parts

07:16 - What problems was PostCSS designed to solve for developers?

• rework
• autoprefixer

09:46 - Using PostCSS vs Sass

• lost

14:02 - Using Future Features

16:28 - Tool Fatigue

• postcss.org

23:39 - When should people start thinking about using PostCSS?

• stylelint
• rtlcss
• postcss-colorblind

31:24 - Postprocessing

• midas

33:43 - Shipping Apps with Emojis?

36:21 - Where does PostCSS end and where does css-modules begin?

Picks

Chet Corcos: Functional Programming for JavaScript People (Aimee)
Operation Code Scholarship (Aimee)
Web Platform Daily Digest (Ben)
Cadbury Caramel Eggs (Joe)
Hello World Podcast (Joe)
React Rally (Dave)

Panel:

Amiee Knight

Charles Max Wood

Special Guests: 

Kye Hohenberger

In this episode, JavaScript Jabbers speak with Kye Hohenberger. Kye is a developer and co-founder of Side Way. One of Kye’s most notable works and library is Emotion, a CSS and JS library.

Kye talks about what CSS and JS library is about in the context of the Emotion library system. Kye discusses why this is practical for the writing process, in comparison to other types of tools that do similar jobs. Kye explains the how this tool reduces the number of lines of code and is compact and clearer.

In particular, we dive pretty deep on:

• What is a CSS and JS library?
• Controlling CSS with JS, what does this solve?
• Style bugs
• What kind of styling are you using vs. complex styles?
• Media query
• A more declarative style
• Using Sass
• Where do you see people using this?
• Class names and you can apply to anything
• How Emotion works!
• Style tags
• Object styles
• What are some of the problems you are solving
• React Emotion - dynamic styles
• How does this compare to other style components?
• Glamor Styles
• How do you test something like this?
• Just Glamor React with Emotion
• Can people use the Babel plugin
• Pure flag and function calls
• And much more!

Links:

• Emotion.sh
• Emotion-js/emotion
• emotion.now.sh
• @TKH44

Picks:

Amiee

• Article on Medium
• Antibiotics and Steroids
• RX Bars 

Charles

• Disney Emoji Blitz 
• How To Get A Job  -  JavaScriptJabber.com

Kye

• Styled System
• Face Paint
• Aussie Bites 

Panel: 

Charles Max Wood

Aimee Knight

Cory House

AJ O'Neal

Joe Eames

Aaron Frost

Special Guests: Dave Geddes

In this episode, the JavaScript Jabber panelists talk with Dave Geddes about CSS Grids. Dave quit his job about a year ago and has been living the entrepreneur and programmer life since then. Now, he builds mastery games to help people learn CSS. Dave discusses the differences between Flexbox and CSS Grid and how the games that he creates can help people learn CSS Grid in a fun and interactive way.

In particular, we dive pretty deep on:

• CSS Mastery games
• FlexboxZombies.com
• GridCritters.com
• Uses spaced repetition and delayed recall to learn
• CSS Grid
• Flexbox
• CSS Grid as the cake and Flexbox as the frosting
• Edge spec
• What Flexbox can do
• Sub-Grids
• Geddski.com
• Nesting Grids
• Old Grid vs New Grid layout
• Why would you move from Flexbox to CSS Grid?
• CSS Grid tools
• GridByExample.com
• Education and Gamification
• Pick a UI that interests you
• For a discount on Grid Critters: enter JS Jabber for 20% off
• And much, much more!

Links:

• Linode
• FlexboxZombies.com
• GridCritters.com
• Geddski.com
• GridByExample.com
• FreshBooks
• @Geddski

Picks:

Charles

• R Pods Earphones

Aimee

• NEU Cleanse
• “At Age 6, Girls Are Less Likely to Identify Females As ‘Really, Really Smart’”

Cory

• Cory Tweet

AJ

• How to Start a Startup
• Made in America by Sam Walton

Joe

• The Dungeoneers by John David Anderson
• NG Conf

Aaron

• Fire and Fury by Michael Wolff

Dave

• They Are Billions

Panel:

• AJ O’Neal
• Aimee Knight

Special Guests: Greg Whitworth

In this episode, the JavaScript Jabber panelists discuss the effects of JavaScript on CSS with Greg Whitworth. Greg works on Microsoft EdgeHTML, specifically working on the Microsoft Layout team, is on the CSS working group, and is involved with the Houdini task force. They talk about JS engines and rendering engines, what the CSSOM is, why it is important to understand the rendering engine, and much more!

In particular, we dive pretty deep on:

• Greg intro
• What is the Houdini task force?
• Extensible web manifesto
• DOM (Document Object Model)
• Layout API
• Parser API
• Babel
• jQuery
• Back to basics
• JavaScript engine and rendering engine
• What is the CSSOM?
• Every browser has its separate JS engine
• Browsers perspective
• Aimee ShopTalk Podcast Episode
• Why is it important to understand how the rendering engine is working?
• Making wise decisions
• Give control back to browser if possible
• When you would want to use JavaScript or CSS
• Hard to make a hard or fast rule
• CSS is more performant
• Overview of steps
• And much, much more!

Links:

• Parser API
• Babel
• jQuery
• Aimee ShopTalk Podcast Episode
• JavaScript
• @gregwhitworth
• GWhitworth.com
• Greg’s GitHub
•  

Sponsors

• Kendo UI
• Linode
• FreshBooks

Picks:

AJ

• Microsoft Surface
• Microsoft Cursor

Aimee

• Greg’s Talk
• What Your Conference Proposal Is Missing by Sarah Mei

Greg

• Aimee ShopTalk Podcast Episode
• Jake Archibald Tasks Talk

Sponsors

• Sentry- use the code “devchat” for $100 credit
• Netlify
• Clubhouse
• CacheFly

Episode Summary  

In this episode of JavaScript Jabber, the panelists talk with Tommy Hodgins who specializes in responsive web design. He starts with explaining to listeners what it means by a responsive web layout and goes on to discuss the techniques in using JavaScript in CSS in depth.

He elaborates on dynamic styling of components, event-driven stylesheet templating, performance and timing characteristics of these techniques and describes different kinds of observers – interception, resize and mutation, and their support for various browsers. He also talks about how to go about enabling certain features by extending CSS, comparison to tools such as the CSS preprocessor and Media Queries, pros and cons of having this approach while citing relevant examples, exciting new features coming up in CSS, ways of testing the methods, caffeinated stylesheets, along with Qaffeine and Deqaf tools.

Links

• JS in CSS – Event driven virtual stylesheet manager
• Qaffiene
• Deqaf
• Tommy’s Twitter
• Fizzbuzz

Picks

Joe

• The Captain Is Dead

Aimee

• Developer on Call
• Tip – Try to follow a low-sugar diet

Chris

• Tommy’s snippets on Twitter – JS in CSS
• All things frontend blog
• Gulp project

Charles

• Coaching by Charles in exchange of writing Show Notes or Tags

Tommy

• JS in CSS

Una Kravets talks to the panel about CSS and its future. We dive into what Houdini is and how much of it is implemented in the browsers. She explains how the changes outlined in Houdini will improve the user experience on the web and developer experience for web developers.

Panel:

• Aimee Knight
• AJ O’Neal
• Charles Max Wood

Guest:

• Una Kravets

Sponsors:

• Split

____________________________________________________________

"The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today!

____________________________________________________________

Links:

• CSS Houdini
• Working with the new CSS Typed Object Model
• PaintWorklet.registerPaint | MDN
• Is Houdini Ready Yet?
• extra.css
• New horizons in CSS: Houdini and the Paint API
• CSS Houdini Experiments

Picks:

Aimee Knight:

• Things you can do with a browser in 2020

AJ O’Neal:

• SD Card Wallet
• SP 128gb MicroSD
• Rocketek

Charles Max Wood:

• Gmelius (Affiliate link)
• MyPillow
• Chilipad (Affiliate link)

Una Kravets:

• Follow Una on Twitter - @Una
• Una's Podcast - Toolsday
• Web Series: Designing in the Browser
• Having a nice Couch
• Bob's Discount Furniture

This is a quick experiment that reproduces an image from I Love Typography using semantic HTML, CSS 2.1, a little CSS3. Along the way, I learnt about a few modern browser bugs and inconsistencies.

• See the demo: CSS typography experiment.
• See the bugs: Some new CSS 2.1 and CSS3 bugs in modern browsers.

I came across an image on I Love Typography that I thought could be reproduced using only semantic HTML and CSS.

The idea was to reproduce the image from simple markup, and to rely as much as possible on what can be achieved with CSS.

This is the HTML I ended up using.

<p>I love <strong>typography</strong> <em>a lot</em></p>

This is the CSS that controls the presentation of that content.

body {
  padding: 0;
  margin: 0;
  font-family: Times New Roman, serif;
  background: #000;
}

p {
  position: relative;
  width: 1100px;
  padding: 100px 0 0;
  margin: 0 auto;
  font-size: 175px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -13px;
  color: #0caac7;
  transform: rotate(-20deg);
}

/* "i" */
p:first-letter {
  float: left;
  margin: -137px -20px 0 0;
  font-size: 880px;
  line-height: 595px;
  text-transform: lowercase;
}

/* "love" */
p:first-line {
  font-size: 200px;
}

/* "typography" */
p strong {
  display: block;
  margin: -80px 0 0;
  font-weight: normal;
  letter-spacing: -2px;
  text-transform: capitalize;
}

p strong:first-letter {
  margin-right: -30px;
  color: #fff;
}

/* "a lot" */
p em {
  position: absolute;
  z-index: 10;
  top: 100px;
  left: 147px;
  width: 136px;
  overflow: hidden;
  padding-left: 64px;
  font-size: 200px;
  font-style: normal;
  text-transform: lowercase;
  color: #fff;
}

p em:first-letter {
  float: left;
  margin: 130px 0 0 -55px;
  font-size: 80px;
  font-style: italic;
  line-height: 20px;
  color: #fff;
}

/* create the heart shape */
p:before,
p:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 225px;
  left: 120px;
  width: 75px;
  height: 50px;
  background: #000;
  transform: rotate(45deg);
  border-radius: 25px 0 0 30px;
}

p:after {
  left: 138px;
  transform: rotate(-45deg);
  border-radius: 0 25px 30px 0;
}

/* hide the tip of the "t" from "a lot" */
p strong:before {
  content: "";
  position: absolute;
  z-index: 11;
  top: 205px;
  left: 341px;
  width: 7px;
  height: 7px;
  background: #000;
  border-radius: 7px;
}

The final CSS typography experiment approximates the original image in all modern browsers that support the CSS3 properties of border-radius and transform.

Some browsers render type (especially after rotational transformations) better than others. Note that all the screenshots are taken from browsers running on Windows Vista OS.

Browser bugs and inconsistencies

I’ve put together a small test page to highlight some new CSS 2.1 and CSS3 bugs in modern browsers. It includes two new CSS 2.1 bugs in Internet Explorer 8.

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

The CSS file used in the demo page is heavily commented so that you can see which lines of code are responsible for each part of the effects.

Demo: Pure CSS speech bubbles

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

Progressive enhancement with pseudo-elements

With HTML as simple as <div>Content</div> or <p>Content</p> you can produce speech bubble effects like this:

Add a child element, for example, <blockquote><p>Quote</p></blockquote> and you can even produce speech bubble effects like this:

I’d encourage you to adapt the examples to your needs and use any other associated elements available to you in your existing HTML document. The key is to use the :before and/or :after pseudo-elements to produce basic shapes.

By applying CSS3 properties such as border-radius and transform you can produce more complex shapes and orientations. This is how the heart-shape in my CSS typography experiment was created.

Example code

This is an example of how to create a basic speech bubble with a few enhancements. For further examples see the demo page and the heavily commented CSS file that it uses.

/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #000;
  background: #f3961c;
  border-radius: 10px;
  background: linear-gradient(top, #f9d835, #f3961c);
}

/* creates triangle */
.triangle-isosceles:after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f3961c transparent;
}

A note on progressive enhancement

This approach is one of progressive enhancement. Styles are built up in layers from simple coloured boxes, to boxes with a “speech tick” of some kind, to rounded rectangles or circles with gradient backgrounds. Browsers render the styles that they are capable of rendering.

Browsers (such as IE6 and IE7) that do not adequately support CSS 2.1 or those (such as IE8) without support for the necessary CSS3 properties will not look broken; they will simply not get the full speech bubble effect. However…

A warning about Firefox 3.0

Firefox 3.0 supports the necessary CSS 2.1 pseudo-elements but does not support the positioning of generated content.

Some of the examples are close to what I consider to be unacceptably broken in Firefox 3.0. It is the only browser above 2% market share — currently at ~4% as of March 2010 according to NetApplications — that cannot handle even the basic speech bubble effects.

Before applying this technique, consider the importance of Firefox 3.0 support and the percentage of your visitors currently using this browser. Eventually it will become a rare browser but due to it’s partial CSS 2.1 support you should be aware that there is no graceful fallback for Firefox 3.0 when using this technique.

This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript.

Demo: Pure CSS social media icons

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

CSS social media icons

The image below shows you the final appearance in modern browsers.

This experiment starts with a simple list of links, with each link using meaningful text, and then progressively styles each link to take on the appearance of the relevant social media icon. As a result, there should be support for screenreaders or users with CSS disabled.

I’ve also included basic text in the title attribute of each link to provide information for users who may not be familiar with what service a specific icon represents.

This is an experiment that uses CSS 2.1 and CSS3 that is not supported by Internet Explorer 6 and 7, therefore, you shouldn’t expect it to work in those browsers. CSS is not necessarily the most appropriate tool for this kind of thing either.

Example code

The technique I’ve used is much the same as the one used for the Pure CSS speech bubbles.

The HTML is just a basic unordered list of links to various social networking websites or services.

<ul>
   <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
   <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li>
   <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li>
   <li class="flickr"><a href="#non" title="Share on Flickr">Flickr</a></li>
   <li class="delicious"><a href="#non" title="Bookmark on Delicious">Delicious</a></li>
   <li class="linkedin"><a href="#non" title="Share on LinkedIn">LinkedIn</a></li>
   <li class="google"><a href="#non" title="Bookmark with Google">Google</a></li>
   <li class="orkut"><a href="#non" title="Share on Orkut">Orkut</a></li>
   <li class="technorati"><a href="#non" title="Add to Technorati">Technorati</a></li>
   <li class="netvibes"><a href="#non" title="Add to NetVibes">NetVibes</a></li>
</ul>

I’ve applied some general styles to the elements that make up this list.

ul {
   list-style:none;
   padding:0;
   margin:0;
   overflow:hidden;
   font:0.875em/1 Arial, sans-serif;
}

ul li {
   float:left;
   width:66px;
   height:66px;
   margin:20px 20px 0 0;
}

ul li a {
   display:block;
   width:64px;
   height:64px;
   overflow:hidden;
   border:1px solid transparent;
   line-height:64px;
   text-decoration:none;
   /* css3 */
   text-shadow:0 -1px 0 rgba(0,0,0,0.5);
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px; /* standards version last */
}

ul li a:hover,
ul li a:focus,
ul li a:active {
   opacity:0.8;
   border-color:#000;
}

Each icon uses it’s own set of styles. This is the CSS that created the RSS icon.

.rss a {
   position:relative;
   width:60px;
   padding:0 2px;
   border-color:#ea6635;
   text-transform:lowercase;
   text-indent:-186px;
   font-size:64px;
   font-weight:bold;
   color:#fff;
   background:#e36443;

   /* css3 */
   -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
   -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
   box-shadow:0 0 4px rgba(0,0,0,0.4);
   background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443));
   background:-moz-linear-gradient(top, #f19242, #e36443);
   background:linear-gradient(top, #f19242, #e36443);
}

.rss a:before,
.rss a:after {
   content:"";
   position:absolute;
   bottom:10px;
   left:10px;
}

/* create circle */
.rss a:before {
   width:12px;
   height:12px;
   background:#fff;
   /* css3 */
   -moz-border-radius:12px;
   -webkit-border-radius:12px;
   border-radius:12px;
}

/* create the two arcs */
.rss a:after {
   width:22px;
   height:22px;
   border-style:double;
   border-width:24px 24px 0 0;
   border-color:#fff;
   /* css3 */
   -moz-border-radius:0 50px 0 0;
   -webkit-border-radius:0 50px 0 0;
   border-radius:0 50px 0 0;
}

Acknowledgements

This post was inspired by an experiment on insicdesigns that producing a few social media icons using CSS.

This is a remix of another author’s idea of using CSS to make a classic model of our solar system. Here, I’ve relied on CSS pseudo-elements and generated content to render scale models of the solar system from simple markup of the raw information.

There are three demos for this experiment, which is based on Alex Giron’s original Our Solar System in CSS3.

• Basic demo: Reworking of original experiment
• Advanced demo: Scale model of the Solar System
• Advanced demo (keyboard support): Scale model of the Solar System

The basic demo uses only CSS and simple, semantic HTML to relatively faithfully reproduce Alex’s original result.

The advanced demo is a rough scale model of the Solar System. It uses the same HTML as the “basic demo” but makes extensive use of CSS pseudo-elements, generated content, and various bits of CSS3.

The advanced demo (keyboard support) is an attempt to provide keyboard support by introducing slight modifications to the HTML. I’ve commented out the animations in this version of the demo.

Why rework the original experiment?

I was curious to see if the same result could be achieved with simpler HTML, by relying on some newer CSS features.

I experimented a bit further with generated content, shadows, and the way the layout of the solar system is implemented. Doing this exposed me to some of the different ways modern browsers are implementing CSS3. I’ve described some of those differences and bugs below.

A scale model of the solar system

The main demo is a scale model of the solar system. It uses 3 different scales: one for the object diameters; one for the distance of the planets from the sun; and one for the orbital period of each planet.

Semantic HTML and Microdata

The HTML is a list where each list item contains a title and description. I’ve included some HTML Microdata to provide hooks for generated content.

<li id="earth" itemscope>
  <h2 itemprop="object">Earth
  <dl>
    <dt>Description</dt>
    <dd itemprop="description">Earth is an ocean planet. Our home world's abundance of water - and life - makes it unique in our solar system. Other planets, plus a few moons, have ice, atmospheres, seasons and even weather, but only on Earth does the whole complicated mix come together in a way that encourages life - and lots of it.</dd>
    <dt>Diameter</dt>
    <dd itemprop="diameter">12,755 <abbr title="kilometers">km</abbr></dd>
    <dt>Distance from sun</dt>
    <dd itemprop="distance">150×10<sup>6</sup> <abbr title="kilometers">km</abbr></dd>
    <dt>Orbital period</dt>
    <dd itemprop="orbit">365<abbr title="days">d</abbr></dd>
  </dl>
</li>

CSS pseudo-elements and generated content

Pseudo-elements are used to produce the planets, Saturn’s ring, the planet names, and to add the scale information.

Given that the scales only make sense when CSS is loaded it isn’t appropriate to have the scales described in the HTML. Both demos use the same HTML but only one of them is a rough scale model. Therefore, in the scale model demo I’ve used generated content to present the ratios and append extra information to the headings.

header h1:after {content:": A scale model";}
header h2:after {content:"Planet diameters 1px : 1,220 km / Distance from sun 1px : 7,125,000 km / Orbital period 1s : 4d";}

#earth dd[itemprop=diameter]:after {content:" (5px) / ";}
#earth dd[itemprop=distance]:after {content:" (22px) / ";}
#earth dd[itemprop=orbit]:after {content:" (91s)";}

Even more complex 3D presentations are likely to be possible using webkit-perspective and other 3D transforms.

Keyboard support

With a little modification it is possible to provide some form of keyboard support so that the additional information and highlighting can be viewed without using a mouse. Doing so requires adding block-level anchors (allowed in HTML5) and modifying some of the CSS selectors.

Modern browser CSS3 inconsistencies

This experiment only works adequately in modern browsers such as Safari 4+, Chrome 4+, Firefox 3.6+ and Opera 10.5+.

Even among the current crop of modern browsers, there are bugs and varying levels of support for different CSS properties and values. In particular, webkit’s box-shadow implementation has issues.

There are a few other unusual :hover bugs in Opera 10.5 (most obvious in the basic demo). It should also be noted that the :hover area remains square in all modern browsers even when you apply a border-radius to the element.

Border radius

There are also a few other peculiarities around percentage units for border radius. Of the modern browsers, a square object with a border-radius of 50% will only produce a circle in Safari 5, Chrome 5, and Firefox 3.6.

Safari 4 doesn’t appear to support percentage units for border radius at all (which is why the CSS in the demos explicitly sets a -webkit-border-radius value for each object). Safari 5 and Chrome 5 do support percentage units for this property. However, Chrome 5 has difficulty rendering a 1px wide border on a large circle. Most of the border simply isn’t rendered.

In Opera 10.5, if you set border-radius to 50% you don’t always get a circle, so I have had to redeclare the border-radius for each object in pixel units.

It appears that this is one aspect of Opera’s non-prefixed border-radius implementation that is incorrect and in need of fixing.

Box shadow

Safari 4’s inferior box-shadow implementation means that inset shadows are not rendered on the planet bodies. In addition, the second box-shadow applied to Saturn (used to separate the planet from its ring) is completely missing in Safari 4 as it does not support a spread radius value.

Safari 5 and Chrome 5 are better but still problematic. The second box-shadow is not perfectly round as the box-shadow seems to use the pseudo-element’s computed border-radius. Furthermore, Chrome 5 on Windows does not properly support inset box-shadow meaning that the shadow ignores the border-radius declaration and appears as a protruding square.

The use of box-shadow to separate Saturn from the ring isn’t strictly necessary. You can create the separated ring using a border but box-shadow cannot be applied in a way that casts it over a border. Another alternative would be to add a black border around the planet to give the illusion of space between itself and the ring, but all browsers display a few pixels of unwanted background colour all along the outer edge of the rounded border.

I wanted the ring to share the appearance of a shadow being cast on it. Opera 10.5 and Firefox 3.6 get it right. Both webkit browsers get it wrong.

Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required.

• Demo: Multiple Backgrounds with CSS 2.1
• Demo: Multiple Borders with CSS 2.1

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

How does it work?

Essentially, you create pseudo-elements using CSS (:before and :after) and treat them similarly to how you would treat HTML elements nested within your target element. But they have distinct benefits – beyond semantics – over the use of nested HTML elements.

To provide multiple backgrounds and/or borders, the pseudo-elements are pushed behind the content layer and pinned to the desired points of the HTML element using absolute positioning.

The pseudo-elements contain no true content and are absolutely positioned. This means that they can be stretched to sit over any area of the “parent” element without affecting its content. This can be done using any combination of values for the top, right, bottom, left, width, and height properties and is the key to their flexibility.

What effects can be achieved?

Using just one element you can create parallax effects, multiple background colours, multiple background images, clipped background images, image replacement, expandable boxes using images for borders, fluid faux columns, images existing outside the box, the appearance of multiple borders, and other popular effects that usually require images and/or the use of presentational HTML. It is also possible to include 2 extra presentational images as generated content.

The Multiple Backgrounds with CSS 2.1 and Multiple Borders with CSS 2.1 demo pages show how several popular examples of these effects can be achieved with this technique.

Most structural elements will contain child elements. Therefore, more often than not, you will be able to gain a further 2 pseudo-elements to use in the presentation by generating them from the first child (and even last-child) element of the parent element. In addition, you can use style changes on :hover to produce complex interaction effects.

Example code: multiple background images

Using this technique it is possible to reproduce multiple-background parallax effects like those found on the Silverback site using just one HTML element.

The element gets its own background image and any desired padding. By relatively positioning the element it acts as the reference point when absolutely positioning the pseudo-elements. The positive z-index will allow for the correct z-axis positioning of the pseudo-elements.

#silverback {
  position: relative;
  z-index: 1;
  min-width: 200px;
  min-height: 200px;
  padding: 120px 200px 50px;
  background: #d3ff99 url(vines-back.png) -10% 0 repeat-x;
}

Both pseudo-elements are absolutely positioned and pinned to each side of the element. The z-index value of -1 moves the pseudo-elements behind the content layer. This way the pseudo-elements sit on top of the element’s background and border but all the content is still selectable or clickable.

#silverback:before,
#silverback:after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 100px;
}

Each pseudo-element then has a repeated background-image set. This is all that is needed to reproduce the parallax effect.

The content property lets you add an image as generated content. With two pseudo-elements you can add 2 further images to an element. They can be crudely positioned within the pseudo-element box by varying other properties such as text-align and padding.

#silverback:before {
  content: url(gorilla-1.png);
  padding-left: 3%;
  text-align: left;
  background: transparent url(vines-mid.png) 300% 0 repeat-x;
}

#silverback:after {
  content: url(gorilla-2.png);
  padding-right: 3%;
  text-align: right;
  background: transparent url(vines-front.png) 70% 0 repeat-x;
}

The finished product is part of the Multiple Backgrounds with CSS 2.1 demo.

Example code: fluid faux columns

Another application is creating equal height fluid columns without images or extra nested containers.

The HTML base is very simple. I’ve used specific classes on each child div rather than relying on CSS 2.1 selectors that IE6 does not support. If you don’t require IE6 support you don’t actually need the classes.

<div id="faux">
  <div class="main">[content]</div>
  <div class="supp1">[content]</div>
  <div class="supp2">[content]</div>
</div>

The percentage-width container is once again relatively positioned and a positive z-index is set. Applying overflow:hidden gets the element to wrap its floated children and will hide the overflowing pseudo-elements. The background colour will provide the colour for one of the columns.

#faux {
  position: relative;
  z-index: 1;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
  background: #ffaf00;
}

By using relative positioning on the child div‘s you can also control the order of the columns independently of their source order.

#faux div {
  position: relative;
  float: left;
  width: 30%;
}

#faux .main { left: 35%; }
#faux .supp1 { left: -28.5%; }
#faux .supp2 { left: 8.5%; }

The other two full-height columns are produced by creating, sizing, and positioning pseudo-elements with backgrounds. These backgrounds can be (repeating) images if the design requires.

#faux:before,
#faux:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   right: 0;
   bottom: 0;
   left: 33.333%;
   background: #f9b6ff;
}

#faux:after {
   left: 66.667%;
   background: #79daff;
}

The finished product is part of the Multiple Backgrounds with CSS 2.1 demo.

Example code: multiple borders

Multiple borders are produced in much the same way. Using them can avoid the need for images to produce simple effects.

An element must be relatively positioned and have sufficient padding to contain the width of the extra border you will be creating with pseudo-elements.

#borders {
   position: relative;
   z-index: 1;
   padding: 30px;
   border: 5px solid #f00;
   background: #ff9600;
}

The pseudo-elements are positioned at specific distances away from the edge of the element’s box, moved behind the content layer with the negative z-index, and given the border and background values you want.

#borders:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid #ffea00;
   background: #4aa929;
}

#borders:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border: 5px solid #00b4ff;
   background: #fff;
}

That’s all there is to it. The finished product is part of the Multiple Borders with CSS 2.1 demo.

Progressive enhancement and legacy browsers

IE6 and IE7 have no support for CSS 2.1 pseudo-elements and will ignore all :before and :after declarations. They get none of the enhancements but are left with the basic usable experience.

A warning about Firefox 3.0

Firefox 3.0 supports CSS 2.1 pseudo-elements but does not support their positioning. Due to this partial support, you should avoid declaring display:block for absolutely positioned pseudo-elements that explicitly declare a width or height values. However, when using borders there is no graceful fallback for Firefox 3.0. Although, sometimes an improved appearance in Firefox 3.0 can be achieved by adding display:block to pseudo-element hacks that use borders.

Enhancing with CSS3

All the applications included in this article could be further enhanced to take advantage of present-day CSS3 implementations.

Using border-radius, rgba, and transforms, and CSS3 multiple background images in tandem with pseudo-elements can produce even more complex presentations that I hope to include in a future article. Currently there is no browser support for the use of CSS3 transitions or animations on pseudo-elements.

In the future: CSS3 pseudo-elements

The proposed extensions to pseudo-elements in the CSS3 Generated and Replaced Content Module include the addition of nested pseudo-elements (::before::before), multiple pseudo-elements (::after(2)), wrapping pseudo-elements (::outside), and the ability to insert pseudo-elements into later parts of the document (::alternate).

These changes would provide a near limitless number, and arrangement, of pseudo-elements for all sorts of complex effects and presentations using just one element.

Let me know what you’ve done

I’ve focused on just a few applications and popular effects. If you find other applications, limitations, or want to share how you’ve applied this technique please leave a comment below or let me know on Twitter (@necolas.

Translations

• 使用css2.1实现多重背景、多重边框效果

An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off, with semi-transparent images, doesn’t hide text from screen-readers or search engines, and provides fallback for IE 6 and IE 7.

Known support: Firefox 1.5+, Safari 3+, Chrome 3+, Opera 9+, IE 8+

What’s wrong with current methods?

The two most widely used image replacement techniques are the Gilder/Levin Method and the Phark Method. Both have different flaws.

The Gilder/Levin Method requires the addition of presentational HTML (an empty span) and doesn’t work with transparent images as the default text shows through. The Phark Method uses a negative text-indent to hide the text and so it is not visible when CSS is on and images are off.

Resurrecting the NIR method

Using pseudo-elements and generated-content as an image replacement technique isn’t a new idea. It was proposed and demonstrated by Paul Nash back in 2006. This is the Nash Image Replacement method.

<h1 class="nir">[content]</h1>

.nir {
   height: 100px; /* height of replacement image */
   padding: 0;
   margin: 0;
   overflow: hidden;
}

.nir:before {
   content: url(image.gif);
   display: block;
}

The height value is equal to that of the replacement image. Setting overflow:hidden ensures that the original content is not visible on screen when the image is loaded. The replacement image is inserted as generated content in the :before pseudo-element which is set to behave like a block element in order to push the element’s original content down.

What about IE 6 and IE 7?

Neither browser supports :before; if you need to support them you’ll have to rely on the Phark method. This can be done using conditional comments or safe IE6/7 hacks to serve alternative styles to legacy versions of IE .

<!--[if lte IE 7]>
<style>
.nir {
   height: 100px;
   padding: 0;
   margin: 0;
   overflow: hidden;
   text-indent: -9000px;
   background: url(image.gif) no-repeat 0 0;
}
</style>
<![endif]-->

Using the NIR method allows you to keep your HTML semantic and deliver improved accessibility to users of modern browsers. The Phark Method can then be served to IE 6 and IE 7.

Improving the NIR method

The first problem with NIR is that if images are disabled all browsers leave whitespace above the element’s content. Opera 10.5 even displays the text string “image”! If the height of the element is small enough this whitespace causes the element’s content to overflow and be partially or completely hidden when images are disabled.

Another consideration is what happens if an image doesn’t exist or fails to load. Safari and Chrome will display a “missing image” icon that cannot be removed. Once again, this can cause the element’s content to overflow and become partially or completely hidden to users.

A more robust version of the NIR method is the following modification:

.nir {
   height: 100px; /* height of replacement image */
   width: 400px; /* width of replacement image */
   padding: 0;
   margin: 0;
   overflow: hidden;
}

.nir:before {
   content: url(image.gif);
   display: inline-block;
   font-size: 0;
   line-height: 0;
}

Setting font-size and line-height to 0 avoids the whitespace problems in all browsers. Setting the element’s width equal to that of the replacement image and getting the pseudo-element to act as an inline-block helps minimise the problems in webkit browsers should an image fail to load.

Ideally browsers would avoid displaying anything in a pseudo-element when its generated-content image fails to load. If that were the case, the original NIR method would be all that is needed.

What about using sprites?

One of the most common uses of image replacement is for navigation. This often involves using a large sprite with :hover and :active states as a background image. It turns out that using sprites is not a problem for modern browsers. When using the modified-NIR method the sprite is included as a generated-content image that is positioned using negative margins.

This is an example that rebuilds the right-hand category navigation from Web Designer Wall using a sprite and the modified-NIR method.

<ul id="nav">
  <li id="nav-item-1"><a href="#non">Tutorials</a></li>
  <li id="nav-item-2"><a href="#non">Trends</a></li>
  <li id="nav-item-3"><a href="#non">General</a></li>
</ul>

/* modified-NIR */

#nav a {
  display: block;
  width: 225px;
  height: 46px;
  overflow: hidden;
}

#nav a:before {
   content:url(sprite.png);
   display:-moz-inline-box; /* for Firefox 1.5 & 2 */
   display:inline-block;
   font-size:0;
   line-height:0;
}

/* repositioning the sprite */

#nav-item-1 a:hover:before,
#nav-item-1 a:focus:before,
#nav-item-1 a:active:before {margin:-46px 0 0;}

#nav-item-2 a:before        {margin:-92px 0 0;}
#nav-item-2 a:hover:before,
#nav-item-2 a:focus:before,
#nav-item-2 a:active:before {margin:-138px 0 0;}

#nav-item-3 a:before        {margin:-184px 0 0;}
#nav-item-3 a:hover:before,
#nav-item-3 a:focus:before,
#nav-item-3 a:active:before {margin:-230px 0 0;}

/* :hover hack for IE8 if no a:hover styles declared */
#nav a:hover {cursor:pointer;}

For some reason IE8 refuses to reposition the image when the mouse is over the link unless a style is declared for a:hover. In most cases you will have declared a:hover styles for the basic links on your webpage, and this is enough. But it is worth being aware of this IE8 behaviour.

The addition of display:-moz-inline-box; is required to reposition the sprite in versions of Firefox prior to Firefox 3.0. They are very rare browsers but I’ve included it in case that level of legacy support is needed.

If you want image replacement in IE 6 and IE 7 the following additional styles can be served to those browsers using conditional comments.

/* Phark IR method */

#nav a {
   text-indent: -9000px;
   background: url(sprite.png) no-repeat;
}

/* repositioning the sprite */

#nav-item-1 a:hover,
#nav-item-1 a:active { background-position: 0 -46px; }

#nav-item-2 a        { background-position: 0 -92px; }
#nav-item-2 a:hover,
#nav-item-2 a:hover  { background-position: 0 -138px; }

#nav-item-3 a        { background-position: 0 -184px; }
#nav-item-3 a:hover,
#nav-item-3 a:active { background-position: 0 -230px; }

/* hack for IE6 */
#nav a:hover { margin: 0; }

The changes are fairly simple. But IE 6 applies the margins declared for a:hover:before to a:hover and so they need to be reset in the styles served to IE 6.

See the modified-NIR (using sprites) demo.

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set.

Demo: Pure CSS GUI icons

Known support: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+.

An exercise in constraint

Several months ago I was experimenting with the creation of common GUI icons with CSS. The HTML is very simple and it relies on CSS pseudo-elements rather than extraneous HTML elements. The technical aspects of this exercise might be of interest to others, so I’ve decided to share it.

Pseudo-elements provide many possibilities to developers interested in enhancing existing semantic HTML.

Example code

The technique behind this experiment is an expansion of the basic shape-creation that was used to make Pure CSS speech bubbles. Some of these GUI icons can only be created in browsers that support CSS3 transforms.

The HTML is a basic unordered list of links.

<ul>
  <li class="power"><a href="#non">Power</a></li>
  <li class="play"><a href="#non">Play</a></li>
  <li class="stop"><a href="#non">Stop</a></li>
  <li class="pause"><a href="#non">Pause</a></li>
</ul>

Each icon uses its own set of styles. For example, the key parts of the CSS responsible for the “expand” icon are as follows:

.expand a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1px;
  width: 5px;
  height: 0;
  border-width: 7px 7px 0;
  border-style: solid;
  border-color: transparent #c55500;
  margin-top: -4px;
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.expand a:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 8px;
  height: 8px;
  border-width: 3px 0 0 3px;
  border-style: solid;
  border-color: #c55500;
  margin-top: -6px;
}

.expand a:hover:before,
.expand a:focus:before,
.expand a:active:before {
  border-color: transparent #730800;
}

.expand a:hover:after,
.expand a:focus:after,
.expand a:active:after {
  border-color: #730800;
}

The demo page contains a full set of user interaction and media player control icons, as well as other common icons. For now, several icons actually require more than one element as CSS 2.1 only specifies 2 pseudo-elements per element that can contain generated content. The CSS3 Generated and Replaced Content Module allows for an unlimited number of pseudo-elements but has yet to be fully implemented in any modern browser.

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances.

Demo: CSS drop-shadows without images

Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

I’ll be looking mainly at a few details involved in making this effect more robust. Divya Manian covered the basic principle in her article Drop Shadows with CSS3 and Matt Hamm recently shared his Pure CSS3 box-shadow page curl effect.

After a bit of back-and-forth on Twitter with Simurai, and proposing a couple of additions to Divya’s and Matt’s demos using jsbin, I felt like documenting and explaining the parts that make up this technique.

The basic technique

There is no need for extra markup, the effect can be applied to a single element. A couple of pseudo-elements are generated from an element and then pushed behind it.

.drop-shadow {
  position: relative;
  width: 90%;
}

.drop-shadow:before,
.drop-shadow:after {
  content: "";
  position: absolute;
  z-index: -1;
}

The pseudo-elements need to be positioned and given explicit or implicit dimensions.

.drop-shadow:before,
.drop-shadow:after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 20%;
}

The next step is to add a CSS3 box-shadow and apply CSS3 transforms. Different types of drop-shadow can be produced by varying these values and the types of transforms applied.

.drop-shadow:before,
.drop-shadow:after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 20%;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}

One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ.

.drop-shadow:after{
  right: 10px;
  left: auto;
  transform: rotate(3deg);
 }

The final core code is as shown below. There is just one more addition – max-width – to prevent the drop-shadow from extending too far below very wide elements.

.drop-shadow {
  position: relative;
  width: 90%;
}

.drop-shadow:before,
.drop-shadow:after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 20%;
  max-width: 300px;
  box-shadow :0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}

.drop-shadow:after{
  right: 10px;
  left: auto;
  transform: rotate(3deg);
}

No Firefox 3.0 problems this time

Some pseudo-element hacks require a work-around to avoid looking broken in Firefox 3.0 because that browser does not support the positioning of pseudo-elements. This usually involves implicitly setting their dimensions using offsets.

However, as Divya Manian pointed out to me, in this case we’re only using box-shadow – which Firefox 3.0 doesn’t support – and Firefox 3.0 will ignore the position:absolute declaration for the pseudo-elements. This leaves them with the default display:inline style. As a result, there is no problem explicitly setting the pseudo-element width and height because it won’t be applied to the pseudo-elements in Firefox 3.0.

Further enhancements

From this base there are plenty of ways to tweak the effect by applying skew to the pseudo-elements and modifying the styles of the element itself. A great example of this was shared by Simurai. By adding a border-radius to the element you can give the appearance of page curl.

.drop-shadow {
  border-radius: 0 0 120px 120px / 0 0 6px 6px;
}

I’ve put together a little demo page with a few of drop-shadow effects, including those that build on the work of Divya Manian and Matt Hamm.

If you’ve got your own improvements, please send them to me on Twitter.

Create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds.

Demo: Pure CSS folded-corner effect

Known support: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+

This post is going to expand on the technique used to create the folded-corner effect that is part of the demo page for Multiple Backgrounds and Borders with CSS 2.1. As a starting point it will look to recreate the appearance of the note style used on the Yiibu‘s fantastic web site. Where Yiibu uses images, this will use pseudo-elements.

Nothing complicated. Any element will do and there’s no need for extra markup. It’s just a simple coloured box to start with. Browsers with no support for pseudo-elements, such as IE6 and IE7, will only be capable of displaying this.

Adding position:relative makes it possible to absolutely position the pseudo-element.

.note {
  position: relative;
  width: 30%;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: #97C02F;
}

The folded-corner

The folded-corner is created from a pseudo-element that is positioned in the top corner of the box. The pseudo-element has no width or height but is given a thick border. Varying the size of the border will vary the size of the folded-corner.

In this example, the top and right borders are set to colours that match the background colour of the box’s parent. The left and bottom border are then given a slightly darker or lighter shade of the box’s background colour.

.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #658E15 #fff;
}

This is all that’s needed to create a simple folded-corner effect like that found on Yiibu.

Firefox 3.0 doesn’t allow for the positioning of pseudo-elements. You can throw in a couple of extra styles to help tidy things up in that browser.

.note:before {
  ...
  display: block;
  width: 0;
}

Adding a subtle shadow

The appearance of a fold can be slightly enhanced by adding a box-shadow (for browsers that support it) to the pseudo-element. Setting overflow:hidden on the note itself will help hide parts of the shadow that would disrupt the folded-corner effect.

.note:before {
  ...
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

Rounded corners

It’s also relatively simple to make this work with rounded corners if desired. Unfortunately, every modern browser has some form of border-radius bug – including those using the non-prefixed property – which means a slight work around is needed.

Webkit browsers are the only browsers that can come anywhere close to rounding the corner of the pseudo-element if it only has 2 borders. Opera 11 and Firefox 3.6 make a mess of it. Opera 11 makes the biggest mess.

Using 4 borders avoids the problems in Opera 11 and Firefox 3.6. But it will trigger a bug in Safari 5 that leaves the diagonal looking a little jaggy. We can get around this problem by setting at least one border colour to be transparent.

When a background colour is applied to the pseudo-element it will show through the transparent border. Ideally, this approach would form the basis of the entire effect because we could reduce the amount of code needed. But Opera 11 will not show the background colour through the transparent borders unless a border-radius has been set.

.note-rounded:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 8px;
  border-color: #fff #fff transparent transparent;
  background: #658E15;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
  display: block;
  width: 0;
}

The CSS file on the demo page has more comments on the work arounds. Every browser has its own peculiarities when it comes to using border-radius or borders on elements with no width or height. This is the merely simplest solution I’ve found to deal with those browser inconsistencies.

The final code

This is all the CSS needed to create a simple folded-corner effect, with a subtle shadow, from a single HTML element. To include a variant with rounded corners, the “note” object can be extended with the modifications described previously.

.note {
  position: relative;
  width: 30%;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: #97C02F;
  overflow: hidden;
}

.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #fff #fff #658E15 #658E15;
  background: #658E15;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  /* Firefox 3.0 damage limitation */
  display: block; width: 0;
}

.note.rounded {
  -moz-border-radius: 5px 0 5px 5px;
  border-radius: 5px 0 5px 5px;
}

.note.rounded:before {
  border-width: 8px;
  border-color: #fff #fff transparent transparent;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
}

The demo page shows the final effect, an example with rounded corners, and how different coloured notes are easy to create from this base.

This technique works less well when the element receiving the folded-corner effect is sitting on top of a background image rather than a simple background colour. However, the same limitation exists for image-based methods of creating this effect.

Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

Demos: Example CSS background image hacks

Pseudo-element hacks can fill some gaps in existing browser support for CSS features, without resorting to presentational HTML. In some cases, they even make it possible to emulate things that are not currently part of any W3C working draft, like background transforms and background image opacity.

Most of the hacks in this article tie in with the pseudo-element hack described in an earlier article – Multiple Backgrounds and Borders with CSS 2.1. That article already describes how to emulate multiple background support and its demo page shows several other uses of the basic principle. This article presents a few of those effects and applications in greater detail.

Emulating background-crop

Known support: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+

Demo: Pseudo background-crop

Background image cropping can be emulated in modern browsers using only CSS 2.1. The principle behind a pseudo background-crop is to apply a background-image to a pseudo-element rather than the element itself. One example would be to crop an image to display in the background. Another would be to crop an image sprite to display icons alongside text in links.

In several cases, using pseudo-elements may have advantages over existing, alternative techniques because it combines their strengths and avoids some of their weaknesses.

Google, Facebook, and Twitter all make use of empty DOM elements to crop dense sprites and display icons next to certain links in their interfaces. The alternative is not to use empty elements but be forced into using multiple images and/or to design sub-optimal image sprites that have their component images spaced out.

Pseudo-elements can be used in much the same way as empty DOM elements. This simultaneously eliminates the need for presentational HTML and doesn’t depend so heavily on an image sprite’s design. Using pseudo-elements for this purpose does have its own drawback – a lack of support in legacy browsers like IE6 and IE7. However, the technique will progressively enhance capable browsers while leaving a perfectly usable experience for incapable browsers.

Example code: cropping a sprite

This example shows how to crop icons that are part of a dense image sprite that uses a 16px × 16px grid. It uses a simple list and specifies a class for each type of action.

<ul class="actions">
  <li class="save"><a href="#">Save</a></li>
  <li class="delete"><a href="#">Delete</a></li>
  <li class="share"><a href="#">Share</a></li>
  <li class="comment"><a href="#">Comment</a></li>
</ul>

Styling can be applied to present this list in whatever way is needed. From that base, a pseudo-element can be created and then treated as you would an empty, inline DOM element (e.g. <span>).

In this case, the :before pseudo-element is used and sized to match the sprite’s grid unit. It could be sized to whatever dimensions are required to match a section of the sprite that needs to be cropped.

.actions a:before {
  content: "";
  float: left;
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
  background: url(sprite.png);
}

.save a:before { background-position: 0 -16px; }
.delete a:before { background-position: 0 -32px; }
.share a:before { background-position: 0 -48px; }
.comment a:before { background-position: 0 -64px; }

Providing hover, focus, active, and “saved” states is just a case of declaring the correct background position in each case.

.save a:hover:before,
.save a:focus:before,
.save a:active:before {
  background-position: -16px -16px;
}

.saved a:before {
  background-position: -32px -16px;
}

Future alternatives

In the future, there will be other alternatives. Firefox 3.6 added -moz-image-rect to allow background images to be cropped. But this is not supported by other browsers and looks likely to be replaced by an alternative proposal (to use fragment identifiers) that is part of the CSS Image Values Module Level 3 specification. As far as I know, no stable release of any modern browser supports the use of fragment identifiers with bitmap images at the time of writing.

Emulating background-transform

Known support: Firefox 3.6+, Opera 10.5+, Safari 4+, Chrome 4+, IE 9+

Demo: Pseudo background-transform

Combining pseudo-elements and transforms makes it possible to emulate background transforms. A pseudo background-transform can be used to rotate, scale, and skew background images and sprites. There is no proposal for background-image transforms, so a pseudo-element hack is one way to emulate it.

Example: rotating a background image

The example of cropping sprites can be further developed by reducing the number of different images used in the sprite. Rather than applying transforms to images in a graphics package, they can be applied in the CSS.

The code to do this is relatively simple and might look something like:

.accordion a:before {
  content: "";
  float: left;
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
  background: url(sprite.png) no-repeat 0 0;
}

.accordion.open a:before {
  transform: rotate(90deg);
}

To apply a transform to a more conventional background image (e.g., a large graphic sitting behind some content that doesn’t affect the positioning of other components) requires use of the positioning technique detailed in the article Multiple Backgrounds and Borders with CSS 2.1.

It involves setting the background image on a pseudo-element which is then positioned behind the content layer of an element using absolute positioning and z-index.

Example: mirroring a background image

There are instances when mirroring a background image might be desired. The approach is similar to that for rotating an image, but this time uses transform:scale().

Producing an exact mirror of an element or pseudo-element can be done using transform:scaleX(-1), transform:scaleY(-1), and transform:scale(-1,-1) to mirror along the x-axis, y-axis, and both axes, respectively.

The following code is an example of how a pseudo background-transform might be used for pagination links. A pseudo-element displays a single image (or region of a sprite) and is then mirrored. The image’s appearance is such that a rotation cannot produce the desired counterpart. Only a scale operation can do it.

.prev a:before,
.next a:before {
  content: "";
  float: left;
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
  background: url(sprite.png) no-repeat 0 0;
}

.next a:before {
  float: right;
  margin: 0 0 0 5px;
  transform: scaleX(-1);
}

There is no support for this in IE 8. Even if you’re a fan of using IE filters to work around some missing CSS support, they won’t work on pseudo-elements.

Future alternatives

There don’t seem to be any future alternatives in any CSS working draft. For the moment, it looks like pseudo-element hacks will be needed to emulate effects like background transforms and background perspective without resorting to presentational HTML.

Emulating background-position

Known support: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+

Demo: Pseudo background-position

The CSS 2.1 specification limits the values of background-position to offsets from the left and top sides. It’s possible to emulate positioning a background image from the right and bottom sides by applying the background image to a pseudo-element and using it as an additional background layer.

This hack is easily combined with the other hacks in this article. More details on the pseudo background-position hack can be found in the article on Multiple Backgrounds and Borders with CSS 2.1.

Example code

In this example, a pseudo-element is created and placed behind the element’s content layer. The background image is 500px × 300px and declared for the pseudo-element, which is also given dimensions that match those of the image. Since the pseudo-element is absolutely positioned, it can be positioned from the bottom and right of the element using offsets.

#content {
  position: relative;
  z-index: 1;
}

#content:before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 10px;
  right: 10px;
  width: 500px;
  height: 300px;
  background: url(image.jpg);
}

Future alternatives

There is a part of the CSS Backgrounds and Borders module working draft that describes an improvement to the background-position property to allow positions to be set from any side. At the moment, Opera 11 is the only stable release of a browser that has implemented it.

Emulating background-opacity

Known support: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 9+

Demo: Pseudo background-opacity

Changing the opacity of a pseudo-background is as simple as modifying the value of the opacity property. There is no IE 8 support for opacity and IE filters will not work on pseudo-elements.

Example code

This example code shows a pseudo-element being created and positioned behind the rest of the element’s content so as not to interfere with it. The pseudo-element is then sized to fit the element using offsets (but could be offset by other values or given an explicit size), given a background image, and has its opacity changed.

#content {
  position: relative;
  z-index: 1;
}

#content:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(image.jpg);
  opacity: 0.7;
}

Notes

For now, and as far as I am aware, using CSS 2.1 pseudo-elements is the only widely supported (and backwards compatible) way to emulate background image crop, background transform, background opacity, and improved background positioning with semantic HTML.

Even when alternatives in CSS working drafts (e.g., the improved background-position and use of fragment identifiers) are widely implemented, pseudo-element background-image hacks will still have the advantage of letting you use other CSS properties like opacity, border-radius, border-image, box-shadow, transforms, etc., which may prove useful in certain situations. It can’t hurt to be aware of these options.

It’s worth mentioning that although you can only generate 2 pseudo-elements from a DOM element, in many cases you can easily use descendant elements to provide more pseudo-elements to play with. This idea was used to help create the rotated example on the CSS drop-shadows demo page and several of the CSS3 examples at the bottom of the pure CSS speech bubbles demo page.

Thanks to Mathias Bynens for reading and giving feedback on a draft of this article.