Line graph with gradient background – Chart JS

UI Components

This is a good example for “how to create a gradient background in line chart using Chart JS”. Just posting it here and will update it as I have other versions too. DEMO See the Pen Custom ChartJS Gradient by Puneet Sharma (@webdevpuneet) on...

CSS zebra-striping in sets of three and four

CSS

Here is a simplest way to create zebra styled elements in sets of three using CSS only. DEMO See the Pen CSS zebra-striping in sets of three by Puneet Sharma (@webdevpuneet) on CodePen. Effective CSS .zebraStrip > div:nth-child(6n+1), .zebraStrip >...

Responsive text with respect to container width

CSS, JavaScript

I used fitty to create responsive text that fits inside it’s parent container perfectly. Fitty Scales up (or down) text so it fits perfectly to its parent container. Ideal for flexible and responsive websites. Here is the demo. DEMO See the Pen SVG Icons –...

Responsive Square, Circle with CSS only

CSS

Here is a simple technique to create responsive shapes like a square, circle or rectangle (maintaining it’s aspect ratio) with the help of CSS only. DEMO See the Pen Responsive Square with CSS by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div...

How to maintain aspect ration of YouTube videos with CSS

CSS

Hey, you can create responsive YouTube videos with the help of CSS only and maintain its aspect ratio without needing any third-party JavaScript library. The easiest and quickest way to do it is with the following CSS. HTML <div class=”container”>...