Category: Code Snippets

All code snippets related to UI development or Front-end Development. It is the parent category to other code categories.

Responsive Media Queries – CSS

Code Snippets, 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) {...

Code for GSAP SplitText plugin

Code Snippets, GSAP

This is just a code snippet. I will add a demo when I get time. gsap.registerPlugin(ScrollTrigger, SplitText); // Register plugin first // Timeline for split text var tl = gsap.timeline(), mySplitText = new SplitText(“.splitText”, { type:...

Replace all images with .svg extension with SVG code and retain image’s classes

Code Snippets

Here is a jQuery code snippet that will replace all your images with the SVG codes and retain all classes that images have, getting added to the SVG class attribute. // Replace image tag with svg const replaceWithSVG = () => { let imgSelector =...

Replace an SVG image by SVG code – Script

Code Snippets

Here is a script that will help you replace an image tag with an SVG extension image file with SVG code. This can be helpful when you don’t want too much SVG code inside your HTML file. (function () {...

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