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.
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%);
}
Top comments (0)