CSS Ribbon
How do I make an css ribbon?
CSS is great to generate traingles, full or half, and loads much more faster than using images or any Photo Editor software to edit triangles then back to coding for adjustments.. What is a css ribbon? How do you make a css ribbon? This script and codes were developed by Satnam Singh on 07 October 2022, Friday.
CSS Ribbon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Ribbon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="banner"> <span class="left-ribbon"></span>
CSS Awesomeness <span class="right-ribbon"></span>
</div>
</body>
</html>
CSS Ribbon - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
body{ background-color:#FFDCA3;
}
.banner { width:500px; margin:80px auto; font-family: 'Droid Serif', Georgia, serif; font-size:3em; text-align:center; background-color:#FFBF57; padding:.3em; color:#7F5F2B; box-shadow:2px 2px 2px #7F5F2B; position:relative; text-shadow:1px 1px 0 #FFDCA3;
}
.banner span { width:30px; height:0; display:block; position:absolute; border:35px solid #CC9946; z-index:-2;
}
.banner .left-ribbon { border-left-color:transparent; bottom:-35px; left:-65px; box-shadow:2px 2px 2px #7F5F2B;
}
.banner .right-ribbon { border-right-color:transparent; top:-35px; right:-65px; box-shadow:-2px 2px 2px #7F5F2B;
}
.banner:before, .banner:after { content:''; position:absolute; border:35px solid transparent; z-index:-1;
}
.banner:before{ left:0; bottom:-70px; border-top-color:#7F6A48; border-right-width:0;
}
.banner:after{ right:0; top:-70px; border-bottom-color:#7F6A48; border-left-width:0;
}
Developer | Satnam Singh |
Username | rssatnam |
Uploaded | October 07, 2022 |
Rating | 3 |
Size | 1,903 Kb |
Views | 40,480 |
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 |
A Pen by Satnam Singh | 11,360 Kb |
CSS Image Parallax Effect | 2,232 Kb |
SVG Cone Scribble | 1,724 Kb |
Countdown Timer with Video | 2,428 Kb |
Navigation Icon 3 lines to X | 2,053 Kb |
Giving Strike, Del or S elements a Color | 1,505 Kb |
JavaScript Reference Type | 1,984 Kb |
Navigation Slider | 2,107 Kb |
Name Hover Bubble Animation | 1,639 Kb |
CSS3 Form Page Design | 3,613 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 |
Segments mouse following | Nosir | 2,909 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
Tab panels | Accessibility | 0 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
Responsive Advert | James_zedd | 2,354 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
SVG Basics | HipsterBrown | 1,852 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!