Simple color ribbon
How do I make an simple color ribbon?
Seen on css-tricks. What is a simple color ribbon? How do you make a simple color ribbon? This script and codes were developed by Tom Hermans on 09 December 2022, Friday.
Simple color ribbon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple color ribbon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="ribbon-wrapper"> <div class="ribbon-color">NEWS</div> </div>
</div>
</body>
</html>
Simple color 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 { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px;
}
.ribbon-color { font: bold 15px Sans-Serif; color: #333; text-align: center; -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: #f00; color: #eee; -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-color:before, .ribbon-color:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px;
}
.ribbon-color:before { left: 0;
}
.ribbon-color:after { right: 0;
}
Developer | Tom Hermans |
Username | tomhermans |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 1,788 Kb |
Views | 10,120 |
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!
Name | Size |
Taming data tables | 2,306 Kb |
Styled selectbox | 1,901 Kb |
Media object module | 3,344 Kb |
Portfolio box | 7,186 Kb |
Responsive Form | 2,161 Kb |
Imagemap pure css trial | 2,852 Kb |
StickyNav | 4,306 Kb |
Snappy snippet try | 4,189 Kb |
CKEditor angular test | 15,138 Kb |
CSS Kwicks | 2,202 Kb |
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!
Name | Username | Size |
Full page table inside the grid | Twikito | 1,864 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Parallax scrolling scene | Iharosi | 2,485 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!