5 CSS Properties You May Not Know

1. all property

The all property resets every other property (apart from unicode-bidi and direction) properties to their initial or inherited state.

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

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.

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

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

5 CSS Properties You May Not Know

Comments

More from this blog

React Hooks: useLayoutEffect

6 Tips To Achieve Your Goal

How to Deploy Your App to Netlify

5 Ways To Host Your Applications

Array methods that you should know

1. all property

2. calc property

3. column-count

4. currentColor

5. filter

6. Links

Command Palette

Comments

More from this blog

1. all property

2. calc property

3. column-count

4. currentColor

5. filter

6. Links