Amazing CSS properties
1. CSS Flexbox
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
Before the Flexbox Layout module, there were four layout modes:
Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element
Reference:
https://www.w3schools.com/css/css3_flexbox.asp
https://css-tricks.com/snippets/css/a-guide-to-flexbox
2. CSS Transitions
CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.
To create a transition effect, you must specify two things:
· the CSS property you want to add an effect to
· the duration of the effect
Reference:
https://www.w3schools.com/css/css3_transitions.asp
3. CSS Custom Properties (Variables)
Variables make it easier to manage colors, fonts, size, and animation values, and to ensure their consistency across a codebase.
Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector.
The variable name must begin with two dashes ( — ) and is case sensitive!
The syntax of the var() function is as follows:
var(custom-name, value)
Reference:
https://www.w3schools.com/css/css3_variables.asp
4. CSS Box Sizing
The CSS box-sizing property allows us to include the padding and border in an element’s total width and height.
Without the CSS box-sizing Property
By default, the width and height of an element is calculated like this:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
This means: When you set the width/height of an element, the element often appear bigger than you have set (because the element’s border and padding are added to the element’s specified width/height).
Reference:
https://www.w3schools.com/css/css3_box-sizing.asp
5. CSS Multiple Columns
The CSS multi-column layout allows easy definition of multiple columns of text — just like in newspapers.
Reference:
