Simple CSS Ribbon and Banner

Developer
Altitude
Size
3,871 Kb
Views
48,576
  1. Simple CSS Ribbon and Banner Previews
  2. Simple CSS Ribbon and Banner HTML Codes
  3. Simple CSS Ribbon and Banner CSS Codes

How do I make an simple css ribbon and banner?

What is a simple css ribbon and banner? How do you make a simple css ribbon and banner? This script and codes were developed by Altitude on 23 September 2022, Friday.

Simple CSS Ribbon and Banner Previews
IQ Test

Simple CSS Ribbon and Banner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple CSS Ribbon and Banner</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* ========= Get Fonts */
@import url(https://fonts.googleapis.com/css?family=Quicksand);
/* ================ Assign Variables */
/* =========================== Setup Mixins/Helper Classes */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;
}
/* ========== Setup Page */
*, *:before, *:after { box-sizing: border-box;
}
body { padding: 3em; background-image: url(https://subtlepatterns.com/patterns/retina_wood.png); color: grey; font-family: 'Quicksand', sans-serif;
}
section { background: white; padding: 2em; border-radius: .5em;
}
section .ribbon, section .banner { margin: 0 -1em 1em -1em; position: relative;
}
section .ribbon span, section .banner span { display: block; display: absolute; background: #6EB590; padding: 0 1em 0 1em; margin: 0 -.25em 0 -.25em; border-radius: .0625em .0625em 0 0; color: #fff;
}
section .ribbon span:before, section .ribbon span:after, section .banner span:before, section .banner span:after { display: block; position: absolute; content: ''; width: 0; height: 0; border: .125em solid transparent;
}
section .ribbon span:before, section .banner span:before { border-top-color: #519f76; border-right-color: #519f76; bottom: -.25em; left: -.25em;
}
section .ribbon span:after, section .banner span:after { border-top-color: #519f76; border-left-color: #519f76; bottom: -.25em; right: -.25em;
}
section .ribbon:before, section .ribbon:after, section .banner:before, section .banner:after { display: block; position: absolute; content: '';
}
section .ribbon:after, section .banner:after { width: 100%; height: .125em; background: rgba(0, 0, 0, 0.125); bottom: -.125em; left: 0;
}
section .ribbon:before { z-index: -1; width: 0; height: 0; border: .5em solid transparent; border-top-color: #5dac83; border-right-color: #5dac83; border-bottom-color: #5dac83; bottom: -.25em; left: -1em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section> <h1 class="ribbon"> <span>Ribbon</span> </h1> <p> The quick brown fox jumped over the lazy dog </p> <h1 class="banner"> <span>Banner</span> </h1> <p> The quick brown fox jumped over the lazy dog </p>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Simple CSS Ribbon and Banner - Script Codes CSS Codes

/* ========= Get Fonts */
@import url(https://fonts.googleapis.com/css?family=Quicksand);
/* ================ Assign Variables */
/* =========================== Setup Mixins/Helper Classes */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;
}
/* ========== Setup Page */
*, *:before, *:after { box-sizing: border-box;
}
body { padding: 3em; background-image: url(https://subtlepatterns.com/patterns/retina_wood.png); color: grey; font-family: 'Quicksand', sans-serif;
}
section { background: white; padding: 2em; border-radius: .5em;
}
section .ribbon, section .banner { margin: 0 -1em 1em -1em; position: relative;
}
section .ribbon span, section .banner span { display: block; display: absolute; background: #6EB590; padding: 0 1em 0 1em; margin: 0 -.25em 0 -.25em; border-radius: .0625em .0625em 0 0; color: #fff;
}
section .ribbon span:before, section .ribbon span:after, section .banner span:before, section .banner span:after { display: block; position: absolute; content: ''; width: 0; height: 0; border: .125em solid transparent;
}
section .ribbon span:before, section .banner span:before { border-top-color: #519f76; border-right-color: #519f76; bottom: -.25em; left: -.25em;
}
section .ribbon span:after, section .banner span:after { border-top-color: #519f76; border-left-color: #519f76; bottom: -.25em; right: -.25em;
}
section .ribbon:before, section .ribbon:after, section .banner:before, section .banner:after { display: block; position: absolute; content: '';
}
section .ribbon:after, section .banner:after { width: 100%; height: .125em; background: rgba(0, 0, 0, 0.125); bottom: -.125em; left: 0;
}
section .ribbon:before { z-index: -1; width: 0; height: 0; border: .5em solid transparent; border-top-color: #5dac83; border-right-color: #5dac83; border-bottom-color: #5dac83; bottom: -.25em; left: -1em;
}
Simple CSS Ribbon and Banner - Script Codes
Simple CSS Ribbon and Banner - Script Codes
Home Page Home
Developer Altitude
Username altitudems
Uploaded September 23, 2022
Rating 3.5
Size 3,871 Kb
Views 48,576
Do you need developer help for Simple CSS Ribbon and Banner?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Altitude (altitudems) Script Codes
Name
Expanding Breadcrumb Nav
Pricing Table v2
Simple Grid System
A Pen by Altitude
Responsive, Fullscreen Slider
VueJS Audio Mixer
CSS3 Buttons Flat
Custom Social Feeds
Semantic Tableless Calendar and Agenda
Jquery Tab Plugin
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!