Category: CSS

Articles on CSS tips and tricks

Responsive Media Queries – CSS

@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) { } @media (max-width: 575.98px) {...

Outlined Text With CSS

CSS

Here is an example of creating an outlined/stroked text with the help of CSS. See the Pen Outlined Text by Puneet Sharma (@webdevpuneet) on CodePen.

Organization / Family Tree using CSS3 only

CSS

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

What is CSS clamp function?

CSS

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 defined range. The clamp function takes...

CSS zebra stripe logic for more than two colors

Code Snippets, CSS

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, with CSS, it’s possible to create...

CSS technique for elastic moving active background for navigations

Code Snippets, CSS, CSS Animations

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 free-moving active state element inside the nav...