Fix Mobile Form Flow with scrollIntoView
Have you ever tapped on an input field on mobile and suddenly the screen jumps or the input disappears under the keyboard? This is a common UX issue caused by how mobile browsers handle the on-screen...
UI Duck
Discover effective UI design techniques and UX tips to enhance your CSS and JavaScript skills. Stay updated with the latest trends in user interface development.
Latest posts
Fix Broken Images with Only CSS
In web projects, images may sometimes fail to load due to various reasons. This can negatively impact the user experience. While it’s common to handle such cases using JavaScript, a simple CSS trick...
Creating Dynamic Tooltip with Only CSS
Tooltips are commonly built using JavaScript, but with modern CSS features, it's now possible to create fully dynamic tooltips using only CSS.
Reducing Code Repetition with CSS clamp() and SASS
In this post, we'll explain how to create dynamic font sizes using the clamp() function with atomic classes and how to reduce code repetition within a design system, ensuring that the font sizes are...
Object.freeze vs Object.seal in JavaScript
To make an object immutable, you can use Object.freeze(), or to prevent adding or removing properties, you can use Object.seal().
Detecting Scroll State with CSS
Modern CSS allows us to detect scroll behavior and apply styles without using JavaScript. In this example, we check whether the .container element is scrollable.
CSS Shadow Guide: Box-Shadow vs. Drop-Shadow
CSS box-shadow applies a shadow to the entire element box, while filter: drop-shadow targets only the visible area, making it ideal for SVGs or elements with transparency.
Accessibility with JavaScript
Accessibility ensures equal interaction with web content for everyone. JavaScript enables accessible UI design, as shown in this simple menu example, a base for more advanced interfaces.
Take Control of CSS with @property
The @property rule allows you to define type, default value, and valid value syntax for custom properties. This makes your custom properties more robust and reliable.
HTML Popover API: Simple Popup Solutions
The HTML Popover API makes adding popups easy without JavaScript, while events like beforetoggle and toggle allow further control and interactivity if needed.
Scroll-Driven Animations with CSS
Scroll-driven animations can be created in CSS without the need for JavaScript. This improves performance and simplifies the code structure.
Optimize Performance with Debounce and Throttle
To enhance performance, we use debouncing and throttling techniques for intensive interactions like scroll and resize events.
Easy Animations with Lottie
Lottie optimizes JSON-based animations for web, mobile, and digital platforms, offering lightweight, high-quality animations for iOS, Android, and web projects.
Light / Dark Mode Made Simple with CSS light-dark()
Now, light and dark mode toggling is simple with just CSS—no need for complex processes or JavaScript. A single HTML element and a few lines of CSS handle theme switching effortlessly.
Use CSS line-clamp for Efficient Text Truncation
The line-clamp property truncates text to a set number of lines, ensuring a clean, readable layout by cutting off excess content for a more streamlined appearance.
Convert px to rem in SCSS
A simple function to convert Px to REM: ensures automatic unit scaling with SCSS, ideal for responsive design.