In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS
1. Create a new class by typing ".Ribbon"
2. Define the class' "display:" as "inline-block"
3. Define its "position:" as "relative"
4. Define its "overflow:" as "hidden" to achieve the "folded-over" effect
5. Define its "padding:" to specify the distance the ribbon will be from the image (how high it'll "hover")
6. Now style all paragraphs within the class by typing ".Ribbon p" - Define its "display:" as "inline-block", its "position:" as "absolute", and place it 0px from the top and -45px from the left. - Define its "text-align:" as "center" - Define "background-color:" to specify a color for the ribbon - Define "width:" to specify the length of the ribbon; for a shorter ribbon in the very corner go with a smaller value - Create the diagonal ribbon effect by defining the "transform:" property to rotate(-45deg). Note that the degree of transformation is the same as the left positioning - Add a drop shadow with the "box-shadow:" property. Note for maximum browser compatibility, both the "transform:" and "box-shadow:" properties will need to be copied over with compatibility prefixes
7. To use the ribbon, in the HTML place both an image and a paragraph inside the <div> tag for the class you created. Inside the paragraph, type the text you want on the ribbon
Originally, this post was published on Monitis Blog, you can check it
In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…