Summary: In this video, we will learn how to create ribbons. We will try to take advantage of ::before and ::after that we have learned about in previous videos. We start by adding a div with an h2 and an image inside. Then, we will manage to edit the h2, h2::before, and h2::after to generate the ribbon. We will set the image, thenthe h2 on top of it. This will look like a holiday card. We will use absolute positioning and the content property to do so. The trick is setting the width and the height to 0. We will mess with the border and the transparency to get the result we want. Along the way, we will add some animation to make the card look nice.
Technologies and Resources: CSS, HTML, Notepad++, CSS3,::before, ::after, content, background-color, font-family, -webkit-animation, margin, display, width, padding, border-radius, -webkit-box-shadow, border-top, position, bottom, border-left, border-right.
See the prices for this post in Mr.Bool Credits System below: