Opens an external link in a new browser tab while using noopener noreferrer to prevent the new page from accessing the original window.
Adds smooth scrolling behavior to internal anchor links and works well for one-page WordPress websites and navigation menus.
Adds an is-scrolled class to the website header after the user scrolls 50 pixels, making it easy to create sticky header and scroll-based styling effects.
Adds a visible focus indicator for keyboard users while using :focus-visible to avoid unnecessary focus outlines for mouse interactions.
Creates an accessible mobile navigation toggle using aria-expanded and a CSS class, making it suitable for custom WordPress themes.
Automatically hides empty elements, which is particularly useful for WordPress templates where optional ACF fields may leave empty containers.
Customize the appearance of scrollbars in WebKit browsers. Usage Add to your global stylesheet. Note Works in Chromium-based browsers and Safari.
Display helpful tooltips using only CSS. Usage <span class=”tooltip” data-tooltip=”Copied successfully”> Hover me </span>
Create a modern button with a smooth linear gradient and hover animation. Usage <button class=”gradient-btn”> Read More </button>
Create a file upload input that displays a preview of the selected image before upload. Usage Ideal for: User profile images Product image uploads…
Create a responsive card layout using CSS Grid without media queries. Usage <div class=”card-grid”> <div class=”card”>Card 1</div> <div class=”card”>Card 2</div> <div class=”card”>Card 3</div> </div>
