CSS Archives | Puneet Sharma - Freelance Web Developer

Gradient loader animation with html and css only

by Puneet Sharma | Aug 30, 2024 | Code Snippets, CSS, CSS Animations | 0 |

Here is a very simple example with a demo and source code for making a cool loader animation with...

Responsive Screen Sizes [ ** ] [*] []

by Puneet Sharma | Aug 20, 2024 | CSS | 0 |

2k – 2560 x 1290 Full HD – 1920 x 930 Laptop – 1366 x 625 Mac Laptop –...

Responsive Media Queries – CSS

by Puneet Sharma | Mar 6, 2024 | Code Snippets, CSS | 0 |

@media (max-width:1800px) { } @media (max-width:1400px) { } @media (max-width:1300px) { } @media (max-width: 1199.98px) { } @media (max-width: 1199.98px) { } @media (max-width: 991.98px) { } @media (max-width: 767.98px) { }...

Outlined Text With CSS

by Puneet Sharma | May 25, 2023 | CSS | 0 |

Here is an example of creating an outlined/stroked text with the help of CSS. See the Pen Outlined...

Organization / Family Tree using CSS3 only

by Puneet Sharma | Feb 28, 2023 | CSS | 0 |

DEMO See the Pen CSS3 Tree Family by Puneet Sharma (@webdevpuneet) on CodePen. See the Pen...

What is CSS clamp function?

by Puneet Sharma | Feb 6, 2023 | CSS | 0 |

CSS “clamp” is a function that allows you to limit or restrict a CSS value within a specified range. It can be used to set a minimum and maximum value for a CSS property, ensuring that the value falls within the...

CSS zebra stripe logic for more than two colors

by Puneet Sharma | Feb 4, 2023 | Code Snippets, CSS | 0 |

Zebra stripes are a popular design element that can be used to add visual interest and organization to tables and other elements. By default, zebra stripes are created using alternating colors of white and light gray. However,...

CSS technique for elastic moving active background for navigations

by Puneet Sharma | Feb 4, 2023 | Code Snippets, CSS, CSS Animations | 0 |

Here is a simple CSS solution (javascript not needed here) to achieve the active state elastic animations that go from left to right during the active state of a particular nav tab. Let “.bg-elastic” is the...