Author: majadc
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
Why sticking The layout has the header and the footer elements that they do not scroll with the page. The sticking behavior is achieved by applying the CSS property “position: sticky” to these elements. By setting the values “top: 0” for the header and “bottom: 0” for the footer, the elements are positioned at the […]
The Stacking context
In the DOM each element has its palace and their order is determined by the order the elements appear in the HTML. But this order will change if the elements meet certain conditions, e.g they will be positioned with z-index then it creates stacking context.
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.
Holy Grail
CSS flexbox layout
svg – use
The <use> element takes nodes from within the SVG document, and duplicates them somewhere else. Resources MDN
Bootstrap Sandbox
Get style rules from stylesheet
Look into CSS style rules of this site.