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”>...

Props vs State in REACT Components

React

Here is an image that lists differences between props and state in REACT Components.

Content loading animation via CSS

CSS Animations

Here is a simple content-loading animation I created in one of my freelance projects that looks similar to the other content-loading animations you might have seen on other websites like Facebook. The logic is to animate the background gradient from left to right in...

Simple CSS blinking cursor

CSS

Here is an example of simple CSS only blinking cursor that you can use and modify according to your needs. I have used keyframes to introduce infinite blinking animation to the cursor. See the Pen Simple CSS Blinking Cursor by Puneet Sharma (@webdevpuneet) on...