Discussion on CSS3 Ribbon Pack

Discussion on CSS3 Ribbon Pack

Cart 818 sales

cosmocoder supports this item


51 comments found.

I was reluctant at first because it hasn’t been updated in 8 years, but i got it anyway, $5 is almost nothing after all, and am happy to say it is working very well!

Thanks for purchasing!

I am glad to know that you like it!

I’m still happily using your code… would it be possible to make an updated version for Cyan, Purple, Lightgray, Orange, and black, perhaps Navy Blue? willing to pay again.

I have no plans in making any more feature updates. But if you want more colour variations then you can create them yourself without much problems. You just need to duplicate the CSS of an existing ribbon variant and replace the existing colour values with your own.

Hello .. I hope you have great sales at this site .. Follow me TOO :D

Hi I purchased your product CSS3 Ribbon Pack. However after I download the zip file and try to upload in It states that The package could not be installed. No valid plugins were found. Please help Thank you

This is not a WordPress plugin so naturally it won’t work like that. You have to manually include it’s css and html code into your theme.

Appreciate if you can send me the code for wrapping ribbon right corner wrap.

The code is included in the package that you downloaded. It has demos included too and a documentation.

Hi, would appreciate some help with the banner ribbon style.

You are using (- z-index) to drop the fold layers behind the main ribbon but haven’t explicitly assigned a z-index on the main ribbon parts.

As a consequence the layering fails if your code is introduced on a site using opacity and z-index already.

The ribbon fold parts fail to hold their stacking position in relation to the main ribbon as it has no context set.

With the Twenty Fifteen theme in wordpress the folds on left and right side of the ribbon vanish below the page background layer and the ribbon body is partly transparent.

I have brought the fold-down layers back into view by giving the .banner-ribbon CSS class an explicit z-index:100

BUT can’t seem to get the main ribbon to opacity:1. The fold down elements are now visible but show through/under the ribbon body.


Would be great if you could update your code to address this as you are more familiar with all the components and how they operate.

If you set a z-index on the parent container in which you embed the ribbon then all should be good. I need to inspect your page in order to offer further suggestions.

Thanks. Tried your suggestion, no go.

Also played more with assigning z-index on different pieces but got more messed up ;-(

.... the z-index: -2 on the fold:before and fold:after elements are causing weird effects when the outer wrapper div is assigned an absolute index value so I removed it again and stayed with an index on .banner-ribbon.

As it’s not easy giving you access to view the affected page at the moment I have applied a temporary CSS hack to shorten the width of folded ends and realigned them to remove an underlap from the main ribbon body.

When my site is live I’ll message with viewing details so we can work on a better solution to the layering issue.

If you are interested in exploring in my absence any wordpress site using the Twenty Fifteen theme will exhibit these layering issues.

The corner wrapping ribbons are showing a small shadow artefact on the bottom center of the ribbon It is like the corner edge of a square peeping through.

It appears on Chrome and Safari. I am guessing you have seen this and can’t resolve? It’s minor but my eyes keep being drawn to it…

Otherwise a super effort A+

Thanks for purchasing!

Yes, that artefact was kind of unavoidable in webkit despite all of my best efforts.

Bummer eh. Thanks for answering so quick.

Hi. May I use this to Wordpress as Heading text? Thanks.

If you are comfortable with coding inside a WordPress environment then you can certainly use it there.

I’ve very little knowledge about css, could you suggest a link or video to learn how to implement one ribbon to one widget only?, using canvas theme.

Thank you.

Thanks for purchasing!

Please go over the included documentation for details on how to insert the ribbons in your page. You can also go over the source code of the supplied demos.

Is that possible to make middle part of ribbon(text) to extend with width?

I did not quite understand your query since the ribbons have fixed width.

I am very interested in buying the CSS3 Ribbon Pack. However because I am building a responsive site that must look equally good on desktop and mobile, it’s extremely important that images with ribbons be responsive, as the underlying image changes size. Can you please confirm that your ribbons are responsive, or can you provide code to make them so? Thank you.

The ribbons are of fixed size. But you can try to use the CSS3 “scale” property to change their size.

is this a wordpress plugin? how can be used in wordpress?

sir please tell me how to use it.. it need it very much and also i purchased this item.. i have knowledge about about html but not enough… i want to use ribbons as in site

The documentation provided with the pack provides detailed instructions on how to use and embed the ribbons in a html page. You can also study the supplied the demo. To embed inside Wordpress pages/posts you need knowledge of Wordpress templating and also of course html and css. I cannot provide any more help than that.

thanks.. thats too much for me

Hi, Is this responsive? Will it work with existing twitter bootstrap templates?

You can make very simple edits in the css to make the forms responsive. You can embed the forms in any html template.

Wrapping Ribbons can be made exactly small size like at: ??

If yes then how?

I see no ribbons in that link. The ribbons provided in the pack have a fixed size. You can edit the css and try to alter the size as you see fit.

I can’t get the correct px. Do you accept freelancer for it, based on my div box?

I would suggest you to use the default ribbon size as they will look best. However if you absolutely must reduce the size then you can try one trick – use the default ribbon size but then apply a scale transform to the ribbon container to shrink it. This way you don’t have to mess with setting the correct pixel size.

So is this working with modern browsers? jeanfbrito reported not working. Need to know before I buy.

As you can see in the changelog in the page, the ribbons have been updated since that comment, which you mentioned, was made.

Hello, great script!!! Is possibile to use the “hanging” and “banner” over div or images as like the “wrapping” ? Thank you

Yes you can use the ribbons anywhere.

how? :( a simple example?

All the ribbons are in their container divs. Just place that container div anywhere you want using css.

seems to work perfect for me
Thank you cosmocoder

Glad to know that you like it!

I am using the theme and wrapping up inside the post-block div class. Each of these divs has a margin-right of 35px and position relative which is breaking the right edge of the “wrap-ribbon right-edge fork lgreen”. Can you please help..?

Thanks for purchasing!

I don’t see the ribbons in your page. Please add the ribbons as I need to see them embedded in order to inspect the problem you are facing.

Some weird problems in Chrome 27 and Firefox 20. Author, waiting for your contact to we find a fix.

Right, I will wait for the fix before start using it.

Hey, I paid for a working pack, not this. In 7 days you cant fix that? Stop selling that to be compatible with this browsers then.

I am working on it, but I am also busy with other projects. This will take time because each browser behaves differently with css transform commands and I also have to ensure that older browsers do not stop working with the new changes. So please be patient.

Surely you are not using all the ribbon styles at once. I already mentioned to you the fix for one of the ribbon styles. If you are using one particular ribbon style now, then mention that to me and I will try to supply you the fix.

Waste of $4. They don’t line up well, there’s a weird darker shadow circle in the middle, etc etc. If you want professional, don’t buy these.

Thanks for purchasing!

Please give me a link to your page so that I can inspect the problem.


Is it possible to add these ribbons to a picture on my website? For example, would I be able to put a “Featured Product” ribbon on one of my pictures just by adding a tag to the image source? Is that possible?

Thanks in advance


Thanks for your interest!

In order to place the ribbons in your page you have to put the necessary html code and add the ribbon css file to your page. All instruction for embedding the ribbons can be found in the documentation provided with the item once you purchase it.

Merry Xmas. Wish got more ribbon’s color.

Thanks for purchasing, and Merry Christmas to you too!


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey