CSS can do that?

A list of amazing things that CSS can do!

EDIT: Some of these properties won't work in some browsers because of support. We can check for browser support using @supports and add fallback styles accordingly. Please use Chrome to view the examples 🙂

1. box-decoration-break

This CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.

---

2. attr()

We can retrieve values of the selected element in CSS by using attr(). This method could be really helpful with accessibility purposes.

---

3. backface-visibility

This CSS property sets whether the back face of an element is visible when turned towards the user. Thinking of a card flip UI?

---

4. conic-gradient

Gradients are a wonderful thing. You might've used to style backgrounds with linear gradients but do you know we can use pure css to create pie charts with the help of conic-gradient!

To better understand how conic-gradients, reference the MDN docs on it

---

5. filter

Who needs photoshop filter effects when you have CSS filters. 🙃
Filter functions applies graphical changes to the appearance of an input image. The effects we can achieve are as follows - blur, brightness, contrast, grayscale, hue-rotate, opacity, invert, sepia, saturate, drop-shadow.

drop-shadow filter is pretty amazing. It lets you apply drop shadow to the input image.

---

6. mix-blend-mode

This CSS property sets how an element's content should blend with the content of the element's background or its parent.

Amazing things can be achieved by mixing blend modes and filters with images and text. Learn more on MDN Docs.

---

7. first-letter

One of my favourite things in books and magazines are the beautiful drop-caps. We can create drop with first-letter pseudo-element.

---

8. shape-outside

This CSS property provides a way to customise wrapping adjacent inline content around complex objects rather than simple rectangular boxes.

Open the example in a different tab and try changing the width of the window and notice how the text wraps around the image.

---

9. writing-mode

This CSS property sets whether the lines of text are laid out horizontally or vertically. We can have these values-

• horizontal-tb - Content flows horizontally from left to right, vertically from top to bottom.
• vertical-lr - Content flows horizontally from left to right, vertically from top to bottom.
• vertical-rl - Content flows horizontally from right to left, vertically from top to bottom.

Checkout this this example to see it in action.

---

10. Adding gradient to text

This is achieved with the combination of -webkit-background-clip: text and -webkit-text-fill-color: transparent CSS properties.

---

11. Smooth scroll snap

scroll-snap-type CSS property sets how snap points are applied on the scroll container.

This example shows vertical(y) scroll with value mandatory. MDN docs does a great job on explaining how to use other values such as proximity and horizontal scroll(x).

---

These are just a few great things CSS can do. Possibilities are endless! 🥳

Comments

[Jakub Sarnowski]

Be aware that rendering-heavy properties like filter are not too good for performance when you have a lot of images out there.

[Ananya Neogi]

Yes, coding is all about trade offs. So it all depends on use cases ☺

[Ben Evans]

Agreed, definitely do not use too many advanced CSS attributes like this: codepen.io/ivorjetski/pen/dBYWWZ

[MrSid]

That's awesome 😍😍😍

[َ]

thanks for the tip!

[Adam Crockett 🌀]

You have to admire the hidden power though. SVG filters are a science into themselves and can be used with this CSS property.

Anyway do you know of any benchmarks?

[Jakub Sarnowski]

Don't have any data to show you, just words from experience and checking this stuff on private projects.

What I've found is that CSS filters performance drops are most visible when you're using them in animations. It can really screw up the UX. And when using it just for initial display - on high-end PC-s you might not even see the difference, but it's certainly noticeable on mobile devices.

[Una 👩🏻‍💻]

I have some data and its really not that bad!

css-tricks.com/contrast-swap-techn...

[Adam Crockett 🌀]

Thank you ever so much Una :D

[Devang Hingu]

you're abosolute right.!!

[Raajkumar Subramaniam]

Great post Ananya! Really love that the fact that all these could be done without writing any javascript code. Would be really help if you can comment about cross browser compatibility for these CSS tricks. Thanks for sharing

[Ananya Neogi]

Thanks! 🙂 For your question related to browser compatibility refer to this comment

[Anand Kumar]

Very nice.
Recently i tried mix-blend-mode but due to some strange reason, it did not work on one of my android phone chrome browser. Worked on others. So, the point is to make sure it works for you on supported platforms.

[Ananya Neogi]

Yes, of course, we should always to check for browser support. But the good thing about CSS is that we can always add fallback styles in cases where our desired css properties are not supported. If a property is not supported CSS won't throw out errors, it will silently cascade to other styles so adding fallback styles works out of the box.

[Anand Kumar]

Completely agree. Thanks

[rugk]

BTW some feedback about this:

1. "Please use Chrome to view the examples". Seriously? Let's better design for the web (i.e. standards) not for (one particular) browser. There is no reason to make a website "only supported by browser XY", as it sometimes has been done in the past. So don't get used to this, but use feature detection. In this demos, it would have been enough to mark which demos work with which browser. (actually, you mostly just need to mark those few, that don't work.)
2. In the end you did it once, but if you had linked to MDN for each property, that would increase my curiosity to dive into the CSS property even more… 😄

[Sara Marie]

There is no need to be so harsh. You can give critical feedback without coming off this way. Also, the author did give the info in the article that some of these properties are not fully cross-browser yet, but that should not bar authors from talking about them.

[Ananya Neogi]

Thanks Sara! 🙂

[rugk]

Sorry, did not mean to be harsh. If this is what you've read it as, I apologize. This just makes me upset a little, because browser diversity is important.

Yes, it's mentioned, but as I said: Don't get used to it (=creating for one browser).

[Ananya Neogi]

We shouldn't limit ourselves as developers and shouldn't be afraid to try out new things. If one browser doesn't support a certain property we can always add a fallback and make use of new capabilities on the browser that does support the property. We don't shy away from adding non-supported javascript on browser by adding polyfills and feature detection methods then why should we shy away from trying new capabilities in CSS.

And by stating - "Please use Chrome to view the examples", I am not advocating Chrome only websites but the reason was simple enough so that people can actually see the examples.

[rugk]

Okay, fine. Understood. And obviously, I agree with your polyfill/fallback part.
Anyway, I keep my point that sentences like these ("use XY for viewing this!") create a bad incentive/habit. Anyway, it gets off-topic, so let's agree to disagree. :)

[Adam Crockett 🌀]

I'm fairly certain that CSS content and by extension attr() is not read by most screen readers + browser combination, being part of presentation rather than real content. I'd reconsider the recommendation unless I'm wrong then find tell me to pipe down. 😁

[Ananya Neogi]

From accessibility point of view I meant that when we add such content like tooltip on hover, what we can do is add the content in aria-label which will be read by the screen reader and then make use of the samearia-label through are CSS with attr() for the normal flow. In that way we can have consistent content throughout.
Probably should've explained better 🙂

[Adam Crockett 🌀]

Hi Anya, thanks for the post, do you mean like this?
Case 1

<p>hello a11y text, important info</p>

Case 2

<p aria-label="hello a11y text"><!--hello a11y text-->important info</p>

p[aria-label]::before {
    content: attr(aria-label);
}

Case 1 reads "paragraph, hello a11y text, important info"

Case 2 reads "paragraph, hello a11y text" only but displays the same as case 1.

If it where me, I would stick to a JavaScript solution with real markup, role and avoid aria-label at all costs, good UX and good content do not need aria-label.

[CraftyMiner1971]

aren't the 'aria-label' tags outdated now?

[Adam Crockett 🌀]

No? aria-label attributes still very much a day to day support attribute. They are just not great to use unless you have to, your markup should describe your SR journey without needless overides. Do you have any specification to suggest they are out of date?

[Sara Marie]

If what you're doing is purely decorative or there is accompanying text, etc., then no, it's not a, "You can't use it because it's inaccessible." There's certainly use cases for CSS content, for example, that are perfectly fine. It just depends on their use.

[Adam Crockett 🌀]

Not what I'm saying. And I quote "This method could be really helpful with accessibility purposes." This is not true.

In the codepen example the tooltip will never be explained to blind users, so in affect, sighted users will get the context but not the blind user. So I stand by what I said. CSS content should be used with care.

Also this is not an I'm right your wrong, I'd love to be wrong because I'd use content more and JavaScript solutions less. Instead this is an ask to remove the quoted text because there is a lot of confusion on how to do accessibility.

[Nick Taylor]

Great post Ananya! I wasn't aware of some of these properties, e.g. backface-visibility. Looking forward to your next post. 🔥

[Davyd McColl]

Informative article! Thanks!

I especially like the scroll-snap-type -- always thought I needed javascript for this.

The conic gradient codepen doesn't seem to be doing anything (Firefox Nightly) -- I just see a white page. What am I missing?

[Mwenimpako P.]

Use Chrome. I'm on the latest mobile release and it works

[Davyd McColl]

No. "Use some other browser" isn't a solution. Especially when that other browser is Chrome.

Web standards exist for a reason -- if this only works in Chrome, it's nice to know what to avoid; however, your reply has led me to the answer I was looking for: having a look at MDN, Chrome and variants are the only browsers to support this, meaning it's not ready for web consumption.

[smakosh]

CSS modal: codepen.io/Smakosh/pen/bYVVbL
Emoji validation: codepen.io/Smakosh/pen/owMzgw

[Ananya Neogi]

These examples are really great! 🙂

[smakosh]

Thank you! just shared your article with my co-workers!

[Brad Dougherty]

I had never heard of box-decoration-break, that's really cool!

FWIW, all of the examples work in Safari. Everything but conic gradient and scroll-snap work in Firefox also. The backface-visibility example will work everywhere if the -webkit-prefixed version is added (for Safari) and the non-prefixed version to .flip-card-inner (for Firefox).

[Kristóf Dombi]

conic-gradient is awesome, I've been looking for it for a few months now. Thanks for the article!

It's a pity that it's only supported by Chrome yet, but the future is bright! 😌