CSS TRICKS - corner ribbon

Developer
Khalid Munir
Size
1,976 Kb
Views
76,912
  1. CSS TRICKS - corner ribbon Previews
  2. CSS TRICKS - corner ribbon HTML Codes
  3. CSS TRICKS - corner ribbon CSS Codes

How do I make an css tricks - corner ribbon?

CSS TRICKS - corner ribbon. What is a css tricks - corner ribbon? How do you make a css tricks - corner ribbon? This script and codes were developed by Khalid Munir on 26 August 2022, Friday.

CSS TRICKS - corner ribbon Previews
IQ Test

CSS TRICKS - corner ribbon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS TRICKS - corner ribbon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="ribbon-wrapper-green"><div class="ribbon-green">Started</div></div>
</div>​
</body>
</html>

CSS TRICKS - corner ribbon - Script Codes CSS Codes

.wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3); position: relative; z-index: 90;
}
.ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px;
}
.ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px;
}
.ribbon-green:before { left: 0;
}
.ribbon-green:after { right: 0;
}​
CSS TRICKS - corner ribbon - Script Codes
CSS TRICKS - corner ribbon - Script Codes
Home Page Home
Developer Khalid Munir
Username khalidmunir
Uploaded August 26, 2022
Rating 3
Size 1,976 Kb
Views 76,912
Do you need developer help for CSS TRICKS - corner ribbon?

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!

Khalid Munir (khalidmunir) Script Codes
Name
NgHandsonTable - get value instead of formula
Generate a dynamic table - javascript and HTML
Broken Rule.js example1
Scroll button detect
A Pen by Khalid Munir
Github 404 page is so cool
Qibla direction
Clock from w3school tutorial
Masjid Timetable from Ajax source
Get Masjid data via json from dropdown
Create amazing Facebook ads 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!