CSS
-
CSS Flexbox: align-content
The align-content property in CSS Flexbox is used to align multiple rows of flex items along the cross axis of the container (vertically if the flex-direction property is set on row). It applies only when flex-wrap property is set to wrap. stretch 1 2 3 4 5 6 7 8 9 10 11 12 13 […]
-
CSS Flexbox: align-items
The align-items property in CSS Flexbox is used to control how flex items are positioned along the cross axis of the flex container (vertically if the flex-direction property is set on row). stretch (default) 1 2 3 4 5 6 7 8 9 10 11 12 flex-start 1 2 3 4 5 6 7 8 […]
-
CSS Flexbox: justify-content
The justify-content property controls how items are positioned along the main axis (horizontally – if flex-direction property is set on row). This property is applied to the flex-items after margins and flex-grow values are calculated. Syntax margin: auto However, if any flex-item has an auto margin on the main axis the justify-content property will have […]
-
Blend modes
Blend modes allow you to blend colors from two or more layers, which can be background images or background colors. This CSS data type can be used in the background-blend-mode and mix-blend-mode properties. Syntax Blend modes Darken type multiply darken color-burn Lighten type screen lighten color-doge Contrast type overlay hard-light soft-light Composite type hue saturation […]
-
Radial gradient
The CSS radial-gradient is used to draw a background image that represents smooth transitions between colors in in a circular or elliptical shape.
-
Linear gradient
The CSS linear-gradient is used to draw a background image that represents smooth transitions between colors along a straight line.
-
Multiple backgrounds
It is possible to apply multiple backgrounds to an element including images and gradients.
-
The Stacking context
Within the Document Object Model (DOM), each element is assigned a position based on the order in which it appears in the HTML. However, this order may change under certain conditions, such as when the elements are positioned using the z-index property, which can create a new stacking context and change the order in which […]
-
box-sizing
Using universal border-box sizing. Every element will inherit the box-sizing from their parent. In case third-party components will have box-sizing: content-box, using the inherit keyword will make the conversion easier.
-
Flex – margin: auto
The CSS rule margin: auto; centers the flex children horizontally and vertically.