Author: majadc
-
CSS Flecbox: flex-wrap
flex-wrap is a CSS property that controls whether flex items are forced onto a single line or can wrap onto multiple lines within a flex container. Syntax See the Pen Flexbox: flex-wrap by majadc (@majadc) on CodePen. Related Resources
-
CSS Flexbox: flex-direction
The flex-direction property controls the directions of main axis of a flex container, with the cross axis being perpendicular to it. This property also allows flex items to be rearranged in either the reverse or the default order. The flex-direction property is applied to the flex parent, i.e. the element with display: flex or display: […]
-
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 Sticky Header & Footer
The page layout includes header and footer elements that do not scroll with the rest of the page. The “sticking” effect is achieved by applying the CSS property position: sticky to these elements. By setting the top: 0 value for the header and bottom: 0 for the footer, they are positioned at the top and […]