<

Corner Ribbon Effect in CSS

Posted on
6,543 Points
243 Views
3 Endorsements
Last Modified:
Experience Level: Beginner
3:38
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS

Video Steps

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

3
Comment
0 Comments

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Join & Write a Comment

Suggested Videos

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month