CSS clip-path generator tool

Misc

Screenshot of the CSS clip-path generator tool Check out this cool online CSS tool to create clippings of any shapes you like and use it in your CSS code for desired results. Also, check the demos below where I created some clippings using this tool. Bookmark/save...

CSS background-blend-mode property

Misc

You can choose from these different background blend mode properties to get the right effect. background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity; Demo Open demo in a full window –...

CSS Variables

Misc

CSS Variables make code easier to read and change values throughout the project. CSS variables have access to the DOM, which you can change with JavaScript and on media queries. DEMO: Open demo in a full window –...

CSS – Media queries for (smaller to bigger) and (bigger to smaller) size

Misc

When it comes to real website development and big projects, it is sometimes better to use both approaches to get the desired results. So following are the media queries approach I follow to create responsive websites. /* Mobile First Approach – Smaller to Bigger...

Fluid Text, Fluid Typography – CSS

Misc

The following code scale font-size from a minimum of 16px (at a 320px viewport) to a maximum of 22px (at a 1000px viewport). CSS html { font-size: 16px; } @media screen and (min-width: 320px) { html { font-size: calc(16px + 6 * ((100vw – 320px) / 680)); } }...