Ribbons

30 snippets

Browse Ribbons examples — animations, layouts, typography, and visual effects. Filter the directory below.

css-ribbons

Snippets(30)

Animated Ribbon
A animated ribbon built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
Beginner
Responsive
Yes
Animated Ribbon
A animated ribbon built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
html, css
Difficulty
beginner
Responsive
Yes
CSS Bookmark
A css bookmark built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS Houdini, SVG Mask
Difficulty
advanced
Features
Checkbox Hack, Gradient Animation
CSS Grid Ribbon Layout
A css grid ribbon layout built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS Ribbon
A css ribbon built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Responsive
Yes
CSS Ribbon
A css ribbon built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Difficulty
easy
Responsive
Yes
CSS Ribbon
A css ribbon built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Responsive
Yes
CSS clip-path Ribbons
A css clip-path ribbons built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS clip-path, CSS Polygons
Difficulty
intermediate
Responsive
Yes
CSS-only Corner Ribbons for GitHub Links
A css-only corner ribbons for github links built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS, SCSS
Features
Pure CSS, Scalable, DRY
Responsive
Yes
Corner Ribbon
A corner ribbon built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Difficulty
beginner
Responsive
Yes
Corner Ribbons
A corner ribbons built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
html, css
Difficulty
beginner
Responsive
Yes
Decorative Ribbon Heading
A decorative ribbon heading built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
CSS, HTML
Difficulty
Intermediate
Features
Pseudo-elements, Clip-path, 3D effect
Responsive
Yes
Folded and Rotated Ribbon
A folded and rotated ribbon built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS clip-path, CSS Variables
Features
Folded corners, Rotated effects, Pure CSS
Responsive
Yes
Google Books Ribbon
A google books ribbon built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Difficulty
beginner
Responsive
Yes
Mail Ribbon
A mail ribbon built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Difficulty
beginner
Features
CSS Gradients, Pseudo-elements
Responsive
Yes
Olive Ribbon
A olive ribbon built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
intermediate
Responsive
Yes
Overlay Ribbon
A overlay ribbon built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Difficulty
beginner
Responsive
Yes
Pure CSS Corner Ribbon
A pure css corner ribbon built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS3
Difficulty
beginner
Features
No-image assets, CSS Transforms
Responsive
Yes
Pure CSS3 Ribbon
A pure css3 ribbon built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS3, HTML5
Difficulty
beginner
Responsive
Yes
Responsive Rounded Ribbon
A responsive rounded ribbon built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
easy
Responsive
Yes
Ribbon Article
A ribbon article built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
beginner
Responsive
Yes
Ribbon Design
A ribbon design built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS3
Difficulty
Intermediate
Features
Pseudo-elements, CSS Transform
Responsive
Yes
Ribbon Menu
A ribbon menu built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Html Frontend Ui+3 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Features
Animated menu, Diamond layout, SCSS variables
Responsive
Yes
Ribbon Preloader
A ribbon preloader built with modern frontend techniques for responsive and reusable UI.
Loading Animation Semantic Html Css Loader Html+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
easy
Responsive
Yes
Ribbons
A ribbons built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS, SCSS
Responsive
Yes
Sale Label
A sale label built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Features
Animated, SVG, Marquee
Simple CSS Banner
A simple css banner built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS3, HTML5
Difficulty
beginner
Responsive
Yes
The Glow Ribbon
A the glow ribbon built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
beginner
Responsive
Yes
UL Banner Cards
A ul banner cards built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
Product Plan Cards with CSS Ribbons
A product plan cards with css ribbons built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS Grid, CSS Custom Properties, Clip-path
Difficulty
Intermediate
Features
No JavaScript, Pure CSS Ribbons, Themable
Responsive
Yes

Snippets(30)

related hubs