<

Corner Ribbon Effect in CSS

Posted on
6,659 Points
359 Views
3 Endorsements
Last Modified:
Published
Experience Level: Beginner
3:37
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
0 Comments

Suggested Videos

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Enroll in these four OWASP courses: Avoiding Hacker Tricks, Forgery and Phishing, Proactive Controls, and Threats Fundamentals. Also learn a basic introduction to web design where you can implement these OWASP security measures.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month