CSS can do that?
Tags: webdev, css
Published: 2019-05-17 21:42:09

---
title: CSS can do that?
published: true
description: A list of amazing things that CSS can do
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1s5uz7cylwxtoybknebu.png
tags: #webdev, #css
---

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.
{% codepen https://codepen.io/ananyaneogi/pen/GeRoRO default-tab=result %}

--------------------

## 2. `attr()`

We can retrieve values of the selected element in CSS by using `attr()`. This method could be really helpful with accessibility purposes.
{% codepen https://codepen.io/ananyaneogi/pen/gEpeda default-tab=result %}

----------------------

## 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?

{% codepen https://codepen.io/ananyaneogi/pen/Ezmyeb default-tab=result %}

--------------

## 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`!

{% codepen https://codepen.io/ananyaneogi/pen/mYmrMJ default-tab=result %}

To better understand how `conic-gradients`, reference the [MDN docs on it](https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient)

-------------

## 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`.

{% codepen https://codepen.io/ananyaneogi/pen/YbVpyG default-tab=result %}

`drop-shadow` filter is pretty amazing. It lets you apply drop shadow to the input image. 
{% codepen https://codepen.io/ananyaneogi/pen/PvmbeR default-tab=result %}

------------

## 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.

{% codepen https://codepen.io/ananyaneogi/pen/rgwNLx default-tab=result %}
Amazing things can be achieved by mixing blend modes and filters with images and text. Learn more on [MDN Docs.](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)

--------------

## 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.
{% codepen https://codepen.io/ananyaneogi/pen/oRWBBE default-tab=result %}

-------------

## 8. `shape-outside`
This CSS property provides a way to customise wrapping adjacent inline content around complex objects rather than simple rectangular boxes.

{% codepen https://codepen.io/ananyaneogi/pen/ZNKepv default-tab=result %}
*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](https://ananyaneogi.github.io/css-experiments/quote.html) 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.

{% codepen https://codepen.io/ananyaneogi/pen/pmPPpY default-tab=result %}

------------

## 11. Smooth scroll snap
`scroll-snap-type` CSS property sets how snap points are applied on the scroll container.

{% codepen https://codepen.io/ananyaneogi/pen/mYmodx default-tab=result %}

This example shows vertical(`y`) scroll with value `mandatory`. [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type) 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! 🥳