はてなブックマーク

20 CSS Fixed Backgrounds Create immersive, parallax-defying layouts with these pure CSS fixed background techniques that keep visual elements anchored while content flows. Discover how to implement stunning “sticky” backgrounds — from full-screen hero images to dynamic section dividers.

Dive into a collection of up-to-date CSS Hero Sections showcasing the power of modern layouts. The main focus is on CSS Grid for structural stability and Flexbox for precise content alignment, ensuring perfect responsive design out of the box. The designs incorporate advanced animations and transitions using the transform property for minimal performance impact.

CSS text animations are a powerful tool for enhancing storytelling and guiding user focus in modern UI design. By adding motion to typography, developers can create more engaging hero sections and interactive headers that feel responsive to user behavior. Using this curated collection of snippets allows you to implement professional-grade motion without the performance overhead of heavy JavaScript

This collection demonstrates methods for creating responsive flowcharts and organizational diagrams using only HTML and CSS. The primary technique relies on Flexbox and nested lists to build hierarchies, where connecting lines are drawn via ::before and ::after pseudo-elements. For more complex 2D structures, CSS Grid is applied to ensure precise node positioning. Interactivity is added using mode

Embrace the principles of flat design with these pure CSS Flat Button Examples. The core idea is to remove gradients, heavy shadows, and other 3D effects in favor of clean, solid colors. User feedback, which is crucial for this minimalist style, is provided through subtle, state-based changes. On :hover, a slight change in background-color or the addition of a minimal box-shadow signals interactiv

This collection offers robust solutions for laying out calendars with pure CSS. At its core lies a 7-column CSS Grid, where the grid-column-start property precisely positions the month’s first day, eliminating empty elements. The aspect-ratio: 1/1 property is utilized to keep date cells square on any screen, while pseudo-elements are employed to display event markers. State styling (selected dates

This collection is your guide to creating search boxes, from robust structure to dynamic animation. First, it breaks down the key challenge - perfectly positioning an icon inside the input - using both CSS Flexbox and the classic position: absolute approach. Then, it brings the component to life: the central technique involves using the :focus-within pseudo-class on the parent container to smoothl

Adding motion to element boundaries is an effective way to improve user engagement and establish a clear visual hierarchy in modern UI design. This updated collection provides professional alternatives to static borders, allowing developers to create “marching ants,” glowing gradients, and drawing effects that guide user attention. Utilizing these curated snippets ensures a high-end feel for butto

This updated collection features realistic and interactive book visualizations constructed with web technologies. In modern UI design, skeuomorphic elements like 3D book covers or magazine spreads are excellent for showcasing portfolios, e-commerce publishing stores, or digital documentation. Using these curated snippets allows developers to present content with tactile depth and interactivity, of

Collection of free HTML and CSS funny 404 pages. Update of August 2018 collection. 7 new items. Related Articles HTML 404 Page Templates 403 Forbidden HTML Templates HTML 408 Pages 500 Error Page HTML Templates

This updated collection provides essential CSS animations designed to enhance user engagement through meaningful micro-interactions. Instead of relying on heavy JavaScript libraries, modern UI design leverages native browser rendering engines for motion. Using these curated snippets allows developers to implement critical feedback loops - such as loading states, hover effects, or entrance transiti

This CSS Tooltips collection is your complete guide to creating lightweight, functional, and animated pop-up hints using pure CSS. The key technical feature is the Pure CSS solution, utilizing ::before and ::after pseudo-elements to form the tooltip text and “tail” without extra markup. It demonstrates how to achieve dynamic show/hide effects using transition and @keyframes, reacting to :hover or

This collection is your comprehensive guide to CSS radio buttons, from fundamental techniques to advanced UI patterns. It starts with the classic approach: hiding the native <input> and taking full design control by styling the <label> and its pseudo-elements, managed by the :checked pseudo-class. For quick customization, the collection includes examples using the new accent-color property, while

This collection combines the power of CSS Grid and the interactivity of Scroll Snap to create versatile image galleries. The aspect-ratio property combined with object-fit: cover ensures layout stability and perfect cropping, while grid-auto-flow: dense allows mimicking Masonry grids without JavaScript. Native scroll physics is used for horizontal strips, and lightbox functionality is implemented

Ditch heavy image files and build intricate, infinitely scalable backgrounds with pure CSS Background Patterns. The core technique involves layering multiple linear-gradient() and radial-gradient() functions within a single background-image property. By carefully controlling their background-size and background-position, you can create classic patterns like stripes, checkerboards, polka dots, and

Introducing the CSS Modal Windows collection, which demonstrates how to make modals lightweight and performant. The main technical feature is the emphasis on minimal JS usage, where often all functionality (including Cookie Popup UI or Upload UI) is achieved via CSS. We show how to use CSS Grid for precise centering of modals and how to achieve the effect of faded text when scrolling. Master these

High-quality UI design relies on seamless page transitions to bridge the gap between static content states. These interactions provide visual continuity, reducing the perceived friction of navigation and guiding the user’s eye as the interface evolves. Utilizing this curated collection ensures that your project maintains a professional flow without the overhead of heavy JavaScript frameworks or cu

Buttons are the primary interaction points in any UI design. This updated collection provides professional components that transform standard HTML inputs into engaging, tactile elements. Using curated snippets instead of building from scratch ensures consistency and reduces development overhead for critical call-to-action points, allowing you to focus on high-level architecture. Technically, these

This collection offers versatile solutions for navigation trails, ranging from semantic text lists to chevron-shaped arrows built with clip-path. Pseudo-elements ::after are leveraged to auto-generate separators, keeping the HTML markup clean and accessible. For better responsiveness, text-overflow: ellipsis and white-space: nowrap are applied to gracefully truncate long paths on smaller screens.

CSS arrows are fundamental UI elements used extensively in tooltips, popovers, and navigation systems to provide directional context. Building these components with pure CSS instead of image assets ensures they remain scalable, easily themeable, and performant. This updated collection provides professional snippets that help developers implement crisp indicators while reducing HTTP requests and im

This collection features modern and flexible solutions for styling select boxes. Instead of using CSS shapes for the arrow, we use background-image with an inline SVG, providing greater control over the icon and its state. CSS Custom Properties play a key role, allowing you to instantly change colors, spacing, and fonts for easy customization and branding. Smooth transitions on box-shadow and bord

Cards have become the foundational building block of modern web UI, aggregating disparate content into digestible, modular units. They improve scanability and establish a clear visual hierarchy across complex layouts. Instead of building containers from scratch, using this curated collection allows developers to implement professional design patterns that are already battle-tested for user experie

Binary state management requires absolute clarity. Native checkboxes often create visual friction between the user and the interface. This updated collection provides functional, minimalist switches for modern UI design. Utilizing these curated snippets removes barriers, allowing the logic of a choice to dictate the form. Technically, these examples leverage the checkbox hack, utilizing the :check

Content discovery requires fluidity. Pure CSS Slider Examples remove the friction of heavy JavaScript libraries, creating a direct path between the user and the screen. This collection provides structural blocks for modern UI design, prioritizing speed and clarity. Utilizing these curated snippets allows developers to deploy functional carousels instantly, avoiding external dependencies. The logic