Price ribbon
How do I make an price ribbon?
What is a price ribbon? How do you make a price ribbon? This script and codes were developed by Henri Peetsmann on 09 December 2022, Friday.
Price ribbon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Price ribbon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="special-offer"> <a href="#" class="offer-img-wrap"> <img src="http://placehold.it/640x480" alt="" /> <div class="offer-discount-wrap"> <div class="offer-discount"> <div class="test"> <div class="offer-discount-rotate"><strong>45%</strong></div> </div> </div> </div> </a> <!-- Product heading, price etc ... --> </div> <div class="special-offer deg-30"> <a href="#" class="offer-img-wrap"> <img src="http://placehold.it/640x480" alt="" /> <div class="offer-discount-wrap"> <div class="offer-discount"> <div class="offer-discount-rotate rotate-45"><strong>30%</strong></div> </div> </div> </a> <!-- Product heading, price etc ... --> </div>
</div>
<i>work in progress ...</i>
</body>
</html>
Price ribbon - Script Codes CSS Codes
/* Basic setup */
* { margin: 0; padding: 0;
}
body { text-align: center;
}
.special-offer { display: inline-block; width: 300px; margin: 30px 15px;
}
/* Special offer */
.special-offer .offer-img-wrap { display: block; position: relative;
}
.special-offer .offer-img-wrap img { display: block; max-width: 100%; height: auto;
}
.special-offer .offer-discount-wrap { position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; overflow: hidden;
}
.special-offer .offer-discount { position: absolute; bottom: 5px; right: 5px; width: 100px; height: 100px;
}
.special-offer.deg-30 .offer-discount { height: 42.3px; /* 100 - 57.5 */
}
.special-offer .offer-discount::before,
.special-offer .offer-discount::after { content: ''; position: absolute; background: black;
}
.special-offer .offer-discount::before { width: 20px; /* 40 x 0,5 */ height: 5px; bottom: -5px; left: -37px; /* 40 - 5px */ transform: skewX(45deg);
}
.special-offer .offer-discount::after { width: 5px; height: 20px; right: -5px; top: -37px; /* 40 - 5px */ transform: skewY(45deg);
}
.special-offer .offer-discount-rotate { position: absolute; z-index: 1; width: 500%; left: -200%; /* (width - 100%) / 2 */ top: 50%; height: 40px; margin-top: -20px; /* height x -0,5 */ line-height: 40px; /* same as height, or a little bit more, to compensate font */ transform: rotate(-45deg); font-size: 27px; text-align: center; background: indigo; color: white;
}
.special-offer.deg-30 .offer-discount-rotate { transform: rotate(-30deg);
}
.special-offer.deg-30 .offer-discount-rotate strong { position: relative; right: -14px;
}
Developer | Henri Peetsmann |
Username | henripeetsmann |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 2,089 Kb |
Views | 8,096 |
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 |
Centre aligned responsive header | 2,493 Kb |
Responsive Moto G mockup | 3,415 Kb |
Sprite animation experiment | 1,638 Kb |
Responsive SVG cross-browser | 2,078 Kb |
A Pen by Henri Peetsmann | 3,559 Kb |
Full size Vimeo background cover | 2,491 Kb |
Search box | 2,434 Kb |
EM Units Experiment | 1,921 Kb |
Modified Bootstrap dropdown | 2,534 Kb |
Responsive MacBook retina mockup | 3,228 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 |
Marching Squares Visualized | Sakri | 7,074 Kb |
3D-box | Parthviroja | 2,346 Kb |
Sticky footer testing | 75th | 1,649 Kb |
Form Labels | Bartuc | 2,717 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
Javascript Welcome | Peterlewicki | 1,573 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Planet Awesome | Bartuc | 3,554 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Table Exercise | Fresco | 9,585 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!