Beautiful CSS3 Ribbon Banner
This creation uses multiple css3 property, such as background-image
, the border-radius
, pseudo classes :before
and :after
First, the background using the background-image
propriety to create this amazing effect of blue bubbles. Then we created and positioned the different parts of what will gonna be our banner. We add shadows to div
, and give negative values in the top
and bottom
of the ribbons, to create this effect of "triangle" corners.
The background is inspired from a creation of Simurai while the Ribbon Banner is inspired from here.