# chalarangelo/30-seconds-of-css

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/chalarangelo-30-seconds-of-css).**

16,021 stars · 995 forks · CSS · CC-BY-4.0 · archived

## Links

- GitHub: https://github.com/Chalarangelo/30-seconds-of-css
- Homepage: https://www.30secondsofcode.org/css/p/1
- awesome-repositories: https://awesome-repositories.com/repository/chalarangelo-30-seconds-of-css.md

## Topics

`css` `css-snippets` `education` `learn-to-code` `learning-resources` `programming` `snippets` `snippets-collection`

## Description

Short CSS code snippets for all your development needs

## Tags

### User Interface & Experience

- [CSS Snippet Collections](https://awesome-repositories.com/f/user-interface-experience/css-snippet-collections.md) — A curated library of reusable CSS code snippets for common web design patterns and animations.
- [Text Overlays on Images](https://awesome-repositories.com/f/user-interface-experience/content-rendering-components/image-overlays/text-overlays-on-images.md) — Provides CSS-only patterns for positioning readable text over images with semi-transparent backgrounds. ([source](https://30secondsofcode.org/css/p/1))
- [CSS Hover Effect Libraries](https://awesome-repositories.com/f/user-interface-experience/css-hover-effect-libraries.md) — Ships a library of CSS hover effects that reveal content and transform elements on mouseover.
- [Pseudo-Class Interactions](https://awesome-repositories.com/f/user-interface-experience/css-selectors/pseudo-class-interactions.md) — Relies on CSS pseudo-classes to drive all interactive visual effects without JavaScript.
- [Decorative Effects](https://awesome-repositories.com/f/user-interface-experience/background-effects/background-visual-effects/canvas-visual-effects/css-filter-effects/decorative-effects.md) — Applies decorative backgrounds, progress bars, and text animations using only CSS.
- [Overlay and Cutout Effects](https://awesome-repositories.com/f/user-interface-experience/background-effects/background-visual-effects/canvas-visual-effects/css-filter-effects/overlay-and-cutout-effects.md) — Provides CSS techniques for overlays, gradients, and image cutouts without JavaScript.
- [Custom Checkbox and Radio Button Styling](https://awesome-repositories.com/f/user-interface-experience/checkbox-components/custom-checkbox-and-radio-button-styling.md) — Provides pure CSS techniques for custom-styled checkboxes and radio buttons. ([source](https://30secondsofcode.org/css/p/1))
- [Sticky Section Headings](https://awesome-repositories.com/f/user-interface-experience/content-dividers/content-sectioning/viewport-snapped-sections/sticky-section-headings.md) — Demonstrates a CSS-only sticky section heading effect using position: sticky. ([source](https://30secondsofcode.org/css/p/1))
- [Image Zoom and Rotate on Hover](https://awesome-repositories.com/f/user-interface-experience/css-hover-effect-libraries/image-zoom-and-rotate-on-hover.md) — Provides a CSS-only hover effect that zooms and rotates an image simultaneously. ([source](https://30secondsofcode.org/css/p/1))
- [Toggle Switches](https://awesome-repositories.com/f/user-interface-experience/form-input-components/toggle-switches.md) — Provides a pure CSS toggle switch styled from a checkbox input. ([source](https://30secondsofcode.org/css/p/1))
- [Content Reveal on Hover](https://awesome-repositories.com/f/user-interface-experience/hover-previews/content-reveal-on-hover.md) — Provides a CSS-only hover effect that expands a container to reveal extra content. ([source](https://30secondsofcode.org/css/p/1))
- [Image Overlay on Hover](https://awesome-repositories.com/f/user-interface-experience/hover-previews/image-overlay-on-hover.md) — Demonstrates a pure CSS image overlay that appears on hover with semi-transparent content. ([source](https://30secondsofcode.org/css/p/1))
- [Decorative Background Patterns](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-layout-styling/gradient-backgrounds/decorative-background-patterns.md) — Provides CSS techniques for creating decorative background patterns using gradients and repeating patterns. ([source](https://30secondsofcode.org/css/p/1))
- [Repeating Patterns](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-layout-styling/gradient-backgrounds/repeating-patterns.md) — Ships CSS snippets for creating decorative backgrounds using repeating gradient patterns.
- [Circular Progress Indicators](https://awesome-repositories.com/f/user-interface-experience/progress-bar-widgets/progress-value-displays/circular-progress-indicators.md) — Provides a pure CSS circular progress indicator using conic gradients or SVG. ([source](https://30secondsofcode.org/css/p/1))
- [Scroll Progress Bars](https://awesome-repositories.com/f/user-interface-experience/scroll-animations/scroll-progress-mapping/scroll-progress-bars.md) — Ships a pure CSS scroll progress bar that fills as the user scrolls down the page. ([source](https://30secondsofcode.org/css/p/1))
- [Scrollable Image Galleries](https://awesome-repositories.com/f/user-interface-experience/scrollable-containers/scrollable-image-galleries.md) — Provides a CSS-only scrollable image gallery layout. ([source](https://30secondsofcode.org/css/p/1))
- [Staggered Animations](https://awesome-repositories.com/f/user-interface-experience/staggered-animations.md) — Ships a CSS-only staggered list entry animation with sequential reveal effects. ([source](https://30secondsofcode.org/css/p/1))
- [CSS-Only Tabbed Content](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation/single-tab-auto-hiding/css-only-tabbed-content.md) — Provides a pure CSS tabbed content panel using hidden radio buttons and the :checked pseudo-class. ([source](https://30secondsofcode.org/css/p/1))
- [Text Animations](https://awesome-repositories.com/f/user-interface-experience/text-animations.md) — Provides a CSS animation that cycles through a sequence of words or phrases in a text element. ([source](https://30secondsofcode.org/css/p/1))
- [Typewriter Text Effects](https://awesome-repositories.com/f/user-interface-experience/text-animations/typewriter-text-effects.md) — Provides a pure CSS typewriter text effect that reveals text character by character. ([source](https://30secondsofcode.org/css/p/1))

### Part of an Awesome List

- [CSS Animation Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/css-animation-libraries.md) — A collection of CSS-only animations including hover effects, loading spinners, and text effects.

### Web Development

- [CSS Animation Patterns](https://awesome-repositories.com/f/web-development/css-animation-patterns.md) — Provides a library of CSS keyframe animations and transitions for web elements.
- [CSS-Only UI Components](https://awesome-repositories.com/f/web-development/css-development-utilities/css-only-ui-components.md) — Implements interactive UI components like tabs and toggles using pure CSS without JavaScript.
- [CSS Layout Patterns](https://awesome-repositories.com/f/web-development/css-layout-patterns.md) — Provides CSS layout patterns for scrollable galleries, sticky headings, and image overlays.
- [Visual Transform Transitions](https://awesome-repositories.com/f/web-development/page-transition-controls/visual-transform-transitions.md) — Applies CSS transforms and transitions to create smooth interactive visual effects on elements.
- [Overlay Positioning](https://awesome-repositories.com/f/web-development/css-alignment-techniques/overlay-positioning.md) — Provides CSS-only overlay positioning techniques for layering text and menus over images.
- [CSS Loading Spinner Libraries](https://awesome-repositories.com/f/web-development/css-loading-spinner-libraries.md) — Ships CSS-only rotating and pulsing loading spinners to indicate content loading. ([source](https://30secondsofcode.org/css/p/1))

### Software Engineering & Architecture

- [Scroll-Driven Visual Transformations](https://awesome-repositories.com/f/software-engineering-architecture/scroll-position-event-triggers/scroll-driven-visual-transformations.md) — Implements scroll-based progress bars and sticky headings using pure CSS.
- [Card Hover Transform Animations](https://awesome-repositories.com/f/software-engineering-architecture/state-synchronization-patterns/context-state-propagators/hover-card-state-accessors/card-hover-transform-animations.md) — Ships a CSS-only card hover animation using transforms like rotation and perspective. ([source](https://30secondsofcode.org/css/p/1))