はてなブックマーク

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.

91 CSS Text Animations Bring your words to life with these captivating pure CSS text animations that transform static type into engaging visual experiences. From subtle character reveals to eye-catching motion effects, this collection demonstrates how CSS can turn any headline, paragraph, or UI text into an animated masterpiece. Infinite CSS Loop Text Animation live demo A complex 3D text animatio

17 CSS Flowcharts Flowcharts simplify complex workflows — from algorithms to user journeys — but image-based versions lack flexibility. With CSS, you can create responsive, interactive flowcharts that adapt to any screen while remaining editable and lightweight.

39 CSS Flat Buttons Flat buttons bring simplicity and elegance to web interfaces. With their clean edges, bold colors, and absence of gradients or shadows, they offer a modern, distraction-free design that works perfectly in minimalist UIs, dashboards, and mobile-friendly websites. In this collection, you’ll find a variety of CSS flat button styles — from basic solid colors to subtle hover effects

40 CSS Calendars Calendars help users track events, deadlines, and schedules — but default designs often lack visual appeal. With CSS, you can create elegant, interactive calendars that enhance usability while seamlessly integrating with your website or app.

34 CSS Search Boxes Search boxes are the gateway to your content — whether for websites, apps, or e-commerce stores. With CSS, you can design intuitive, visually appealing search interfaces that enhance usability and match your brand aesthetic.

53 CSS Border Animations Breathe life into your interfaces with these captivating pure CSS border animations that turn static outlines into living design elements. Discover how a few lines of code can create mesmerizing motion effects — from subtle pulsations to intricate drawing simulations — without JavaScript or external assets. Perfect for: interactive form fields, portfolio item hovers, call-

37 CSS Book Effects Welcome to our a curated collection of CSS Book Effects! In this compilation, we have gathered a wide array of free HTML and CSS code examples that demonstrate various book-related effects, including 3D transformations, animations, flips, layouts, and more. These examples have been sourced from popular platforms like CodePen, GitHub, and other valuable resources, making it easi

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

37 CSS Tooltips Tooltips provide instant context without cluttering your interface — perfect for clarifying icons, abbreviations, or complex features. With CSS, you can create lightweight, customizable tooltips that blend seamlessly with your design.

111 CSS Radio Buttons Radio buttons are essential for single-choice selections - but default browser styles often feel outdated. With CSS, you can create modern, accessible radio buttons that enhance user experience while aligning with your brand design. Animated Segmented Control in Plain CSS live demo A pristine Segmented Control built entirely with CSS, leveraging the power of experimental posi

101 CSS Galleries Galleries showcase visual content - from portfolios to product photos - but clunky layouts can ruin the experience. With CSS, you can create fast, responsive galleries that highlight your work with elegant transitions and adaptable grids. Photo Gallery Grid Animation with CSS Clip-Path live demo A showcase of the creative application of clip-path to create an “unfolding” image ef

32 CSS Carousels Carousels showcase featured content without overwhelming users - but many rely on heavy JavaScript. With CSS, you can create responsive, performant carousels that deliver seamless browsing experiences with pure code. CSS-Only Testimonials Using Scroll Snap live demo A powerful demonstration of building a full-featured carousel entirely with CSS, leveraging experimental ::scroll-bu

223 CSS Background Patterns Transform your designs with these stunning pure CSS background patterns — no images, no external assets, just clean code that creates endless visual texture. Discover how a few lines of CSS can generate everything from subtle grids to vibrant geometric art, all with lightweight performance and infinite customization. CSS-Only Pattern - Waves live demo A lightweight and

71 CSS Modal Windows Modal windows help users focus on critical actions — from signup forms to media galleries — without navigating away. With CSS, you can create smooth, responsive modals that enhance UX while maintaining accessibility and performance.

24 CSS Page Transitions Elevate your website’s navigation with these smooth CSS page transitions that turn basic page loads into cinematic experiences. Discover how pure CSS can create fluid, app-like transitions between content - keeping visitors engaged as your site comes alive. Spectacular Pure CSS Screen Transition live demo See how spectacular, complex animations built with pure CSS and JavaS

198 CSS Buttons Elevate your UI with these pure CSS button designs that transform ordinary clicks into engaging experiences. From subtle hovers to bold animated effects, this collection showcases how CSS can create beautiful, high-performance buttons. Shine Gradient Buttons live demo An example of modern UI/UX design implemented with pure CSS. The demo shows how to use linear-gradient, box-shadow,

52 CSS Headers Headers create first impressions — they guide users and establish brand identity. With CSS, you can design responsive, interactive headers that balance aesthetics with seamless navigation.

27 CSS Breadcrumbs Breadcrumbs guide users through your site hierarchy — but default styles often lack visual polish. With CSS, you can create intuitive, stylish breadcrumb trails that improve navigation while matching your design system.

67 CSS Arrows Enhance navigation and visual storytelling with these versatile pure CSS arrow designs that guide users with style. This collection demonstrates how to create sleek, responsive arrows for menus, sliders, tooltips, and more. Perfect for: carousel/slider controls, accordion/expandable menus, step-by-step forms, scrollable section indicators.

40 CSS Select Boxes Select boxes are essential for forms, filters, and settings — but default browser styles often feel outdated. With CSS, you can design custom, accessible dropdowns that enhance usability while matching your brand aesthetic. Customizable HTML and CSS Select live demo Dive deep into modern CSS form control by styling a <select> element’s internal parts like ::picker and ::picker-

154 CSS Cards Cards have become a cornerstone of web design - perfect for displaying products, articles, profiles, and more in a structured yet visually appealing way. With CSS, you can transform simple containers into interactive, engaging card components that enhance user experience and content readability. Perfect for web designers and developers creating content-rich interfaces that need visua

101 CSS Checkboxes Checkboxes are essential form elements - but default browser styles often feel outdated. With CSS, you can create modern, accessible checkboxes that improve user experience while aligning with your brand aesthetic. Neumorphic Soft UI Radio Buttons and Checkboxes live demo This demo explores the Neumorphic or Soft UI design trend, implementing a complete set of custom radio butto

114 CSS Sliders Image sliders showcase visual content — from portfolios to product galleries — but many rely on bloated scripts. With CSS, you can create fast, interactive sliders that deliver seamless browsing with pure code. The Witcher Monster Cards Slider live demo Showcases a stylish, interactive monster card slider, utilizing pure HTML and CSS for complex design, custom typography, and subtl