# 5 CSS Properties You May Not Know

## 1. all property

The [all property](https://css-tricks.com/almanac/properties/a/all/) resets every other property (apart from unicode-bidi and direction) properties to their initial or inherited state.

```scss
.-reset {
  all: initial;
}
```

## 2. calc property

The `calc()` function can be used to create values. For example: `width: calc(100% - 50px)` will make element full width minus 50px pixels.


```scss   
width: calc(100% - 1em);
```

## 3. column-count

The `column-count` property specifies the number of columns an element has. `column-count: 3` will spread the elements text (or inline-* elements) into 3 columns.


{% codepen https://codepen.io/gregh/pen/pRoYMv %}

## 4. currentColor

The currentColor keyword represents the calculated value of the elements color property.

```scss
.parent {
  color: #ccc;
  border: 1px solid currentColor;
}
.child {
  background: currentColor;
}
```

## 5. filter

The filter property applies visual effects to elements. It comes with predefined functions like blur, brightness, contrast, sepia; and you can also apply custom SVG filters.

```scss
.-blur {
  filter: blur(8px);
}

.-brightness {
  filter: brightness(1.5);
}

.-contrast {
  filter: contrast(250%);
}

```

{% codepen https://codepen.io/gregh/pen/GrJNdJ %}

## 6. Links
- [Greg Hovanesyan's Post on css-tricks](https://css-tricks.com/lets-look-50-interesting-css-properties-values/#filter)