🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL
  1. Home
  2. CSS Plugins
  3. Scss Ribbons using Mixins

Scss Ribbons using Mixins

This pen will show you the different usages you can have with the scss ribbon I created. You can add the ribbon to any class you want. The only limit is that you have to be semantic : you'll have a div on which you apply the class you want, and then you'll have span inside, and another one inside the first span. Then In your scss file, you can simply add a ribbon by using the @include ribbon() property to your class. Leaving the brackets empty will display a default ribbon, but you can give 4 arguments to your ribbon : Background-color, text color, size and his direction (top or bottom, default to bottom).

Ribbons
Demo Tutorial

See the Pen by ikoshowa (@ikoshowa) on CodePen.

This awesome script developed by ikoshowa. Visit their official repository for more information and follow for future updates.

You May Also Like

Accordion using only CSS

Ribbon Abstraction

No image corner ribbon overlays (wip)

Sequence.js - Modern Slide In

Fork me on GitHub ribbon (CSS)

ribbon btn

Single Element Pure CSS3 Ribbon from CodePlayer

CSS3 ribbon menu (submenu children indicator arrow!!!!)

SVG & CSS Ribbons

Background Blur plugin

Simple ribbon

Fork me on Github Ribbon

Sequence.js (v1) - Sliding Horizontal Parallax

A Pen by ron

Green Corner Ribbon

CSS Ribbon Loader

GitHub Ribbon CSS Only

CSS Animated Ribbons

CSS Ribbons

CSS3 Ribbon

OnePageR

Ribbon Nav

Responsive Rounded Ribbon

Pure CSS Ribbon

Canvas ribbon

CSS Modal with Ribbon

CSS Ribbon

Ribbon Example [CSS]

inside curves/shape to ribbon(ized)g

Ribbon Breadcrumb Trail

Beta Ribbon Pure CSS

Label Overlay

Color ribbon

Responsive CSS Masonry

Ribbon Element

Pure CSS masonry layout w/ Flexbox

Ribbon

CSS Ribbons

Wandering Ribbon

CSS Flag

Oooh, ribbony

Corner Ribbon

CSS Ribbon Product Badges

Ribbon Plots using Plotly JS

SOTD CSS Ribbon

Ribbon Select options

Color Ribbons by Evan You

Colorful Cloth Ribbons

Single Element CSS Ribbon

only CSS zig-zag ribbon

Ribbon Animation Pure CSS3

Clip-Path Ribbon

CSS Ribbons as SASS mixins

Rete.js (dataflow, node editor)

Ribbon

Simple ribbons with CSS classes

CSS Ribbon

Auto-scaling ribbons

CSS 2-part wrap-around ribbon

Pure-CSS Ribbon Banner

CSS Ribbon

CSS3 Ribbon Menu by Steve Belovarich

Ribbon physics study

Flat Pricing Table

Folded ribbon nav with pure CSS

CSS Navbar with Ribbon

CSS Ribbon Triangle

HTML5 canvas effect - Glazing ribbon screensaver

CSS Ribbon

PURE CSS3 RIBBON

jQuery Plugins

AngularJs Plugins