Time for action – creating a ribbon in CSS3
We will create a new record ribbon and display it when a player breaks their last score. So, carry out the following steps:
- First, open
index.html
where we will add the ribbon HTML markup. - Add the following highlighted HTML right after
popup-box
and beforepopup-box-content
:<div id="popup-box"> <div class="ribbon hide"> <div class="ribbon-body"> <span>New Record</span> </div> <div class="triangle"></div> </div> <div id="popup-box-content"> ...
- Next, we need to focus on the style sheet. The entire ribbon effect is done in CSS. Open the
matchgame.css
file in a text editor. - In the
popup-box
styling, we need to add a relative position to it. We do this as follows:#popup-box { position: relative; }
- Then, we need ...
Get HTML5 Game Development by Example : Beginner's Guide - Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.