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
Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.