How can I create a foldable ribbon? - html

Question

I'm looking for a way to program a foldable ribbon. So I've this code here:
.ribbon {
position: absolute;
top: 20px;
right: 0;
padding: 15px;
}
.ribbon-content {
position: relative;
width: 100%;
height: 100px;
border: 1px solid #DDD;
}
.ribbon.base {
background: #666666;
color: #fff;
border-right: 5px solid #666666;
}
.ribbon.light {
background: #ecf0f1;
color: #2c3e50;
border-right: 5px solid #dde4e6;
}
.ribbon.dark {
background: #131313;
color: #fff;
border-right: 5px solid #464646;
}
.ribbon.base-alt {
background: #9cd70e;
color: #fff;
border-right: 5px solid #c6f457;
}
.ribbon.red {
background: #e91b23;
color: #fff;
border-right: 5px solid #f2787d;
}
.ribbon.orange {
background: #ff8a3c;
color: #fff;
border-right: 5px solid #ffc7a2;
}
.ribbon.yellow {
background: #ffd800;
color: #fff;
border-right: 5px solid #ffe866;
}
.ribbon:before,
.ribbon:after {
content: '';
position: absolute;
left: -9px;
border-left: 10px solid transparent;
}
.ribbon:before {
top: 0;
}
.ribbon:after {
bottom: 0;
}
.ribbon.base:before {
border-top: 27px solid #666666;
}
.ribbon.base:after {
border-bottom: 27px solid #666666;
}
.ribbon.light:before {
border-top: 27px solid #ecf0f1;
}
.ribbon.light:after {
border-bottom: 27px solid #ecf0f1;
}
.ribbon.dark:before {
border-top: 27px solid #131313;
}
.ribbon.dark:after {
border-bottom: 27px solid #131313;
}
.ribbon.base-alt:before {
border-top: 27px solid #9cd70e;
}
.ribbon.base-alt:after {
border-bottom: 27px solid #9cd70e;
}
.ribbon.red:before {
border-top: 27px solid #e91b23;
}
.ribbon.red:after {
border-bottom: 27px solid #e91b23;
}
.ribbon.orange:before {
border-top: 27px solid #ff8a3c;
}
.ribbon.orange:after {
border-bottom: 27px solid #ff8a3c;
}
.ribbon.yellow:before {
border-top: 27px solid #ffd800;
}
.ribbon.yellow:after {
border-bottom: 27px solid #ffd800;
}
.ribbon span {
display: block;
font-size: 16px;
font-weight: 600;
}
<div class="container bootstrap snippet">
<div class="row mb-20">
<div class="col-md-3">
<div class="ribbon-content">
<div class="ribbon base"><span>New: I'm a new feature.</span></div>
</div>
</div>
</div>
</div>
Now I need to change it somehow to only show the word New. When I hover now the word, the ribbon should fold out to the left until the whole text is visible. When I leave the ribbon now, it should fold back in.
Is this possible with a smooth animation? I need to be sure the the whole ribbon get's fold out because the length of the text can be different.

Answer 1

I would simplify your code like below then it should be easy to manage using a width animation:
.ribbon {
--c:red; /* Color */
--s:20px; /* Size */
--p:10px; /* padding*/
padding:var(--p);
border-left:calc(var(--s)/2) solid transparent;
display:inline-block;
background:
linear-gradient(to top right,transparent 48%,var(--c) 50%) border-box,
linear-gradient(to bottom right,transparent 48%,var(--c) 50%) border-box,
var(--c) padding-box;
background-size:var(--s) 100%;
background-repeat:no-repeat;
color:#fff;
margin-bottom:5px;
}
.ribbon > span {
display:inline-block;
white-space:nowrap;
max-width:0px;
transition:0.3s all;
overflow:hidden;
vertical-align:bottom;
}
.ribbon:hover > span {
display:inline-block;
white-space:nowrap;
max-width:180px;
transition:1s all;
}
body {
text-align:right;
}
<div class="ribbon">
NEW:<span> Some text here</span>
</div>
<br>
<div class="ribbon" style="--c:blue;--s:25px">
NEW: <span>Some long long text here</span>
</div>
<br>
<div class="ribbon" style="--c:purple;--s:45px;--p:15px">
NEW: <span>text</span>
</div>
<br>

Answer 2

If you're not looking for a curl effect, I think this might help you out.
.ribbon {
position: absolute;
top: 20px;
right: 0;
padding: 15px;
transform: translate3d(145px, 0, 0);
transition: transform 300ms;
}
.ribbon-content {
position: relative;
width: 100%;
height: 100px;
border: 1px solid #DDD;
overflow: hidden;
}
.ribbon-content:hover .ribbon {
transform: translate3d(0, 0, 0);
}
.ribbon.base {
background: #666666;
color: #fff;
border-right: 5px solid #666666;
}
.ribbon.light {
background: #ecf0f1;
color: #2c3e50;
border-right: 5px solid #dde4e6;
}
.ribbon.dark {
background: #131313;
color: #fff;
border-right: 5px solid #464646;
}
.ribbon.base-alt {
background: #9cd70e;
color: #fff;
border-right: 5px solid #c6f457;
}
.ribbon.red {
background: #e91b23;
color: #fff;
border-right: 5px solid #f2787d;
}
.ribbon.orange {
background: #ff8a3c;
color: #fff;
border-right: 5px solid #ffc7a2;
}
.ribbon.yellow {
background: #ffd800;
color: #fff;
border-right: 5px solid #ffe866;
}
.ribbon:before,
.ribbon:after {
content: '';
position: absolute;
left: -9px;
border-left: 10px solid transparent;
}
.ribbon:before {
top: 0;
}
.ribbon:after {
bottom: 0;
}
.ribbon.base:before {
border-top: 27px solid #666666;
}
.ribbon.base:after {
border-bottom: 27px solid #666666;
}
.ribbon.light:before {
border-top: 27px solid #ecf0f1;
}
.ribbon.light:after {
border-bottom: 27px solid #ecf0f1;
}
.ribbon.dark:before {
border-top: 27px solid #131313;
}
.ribbon.dark:after {
border-bottom: 27px solid #131313;
}
.ribbon.base-alt:before {
border-top: 27px solid #9cd70e;
}
.ribbon.base-alt:after {
border-bottom: 27px solid #9cd70e;
}
.ribbon.red:before {
border-top: 27px solid #e91b23;
}
.ribbon.red:after {
border-bottom: 27px solid #e91b23;
}
.ribbon.orange:before {
border-top: 27px solid #ff8a3c;
}
.ribbon.orange:after {
border-bottom: 27px solid #ff8a3c;
}
.ribbon.yellow:before {
border-top: 27px solid #ffd800;
}
.ribbon.yellow:after {
border-bottom: 27px solid #ffd800;
}
.ribbon span {
display: block;
font-size: 16px;
font-weight: 600;
}
<div class="container bootstrap snippet">
<div class="row mb-20">
<div class="col-md-3">
<div class="ribbon-content">
<div class="ribbon base"><span>New: I'm a new feature.</span></div>
</div>
</div>
</div>
</div>

Answer 3

You could get this easily done by wrapping the text after 'new' inside a div and do some changes to your css:
Wrap ': I'm a new feature.' inside <div class="infotext"></div>
Change display for .ribbon span from block to flex
Add css rules for your new class .Infotext like in the example below
The hover gets animated by the css-property transition. With all we tell it to animate everything and to do it in 0.5s.
To learn mor about transition take a look at this
documentation.
The text gets hidden by max-witdh: 0; and gets displayed by max-width: 300px.
I'm using max-width instead of width, becaus with that we dont have to
know the width of each ribbons infotext. To learn more about max-width click here
Feel free to ask me per comment, if anything is unclear.
Working example:
.ribbon {
position: absolute;
top: 20px;
right: 0;
padding: 15px;
}
.ribbon-content{
position: relative;
width: 100%;
height: 100px;
border: 1px solid #DDD;
}
.ribbon.base {
background: #666666;
color: #fff;
border-right: 5px solid #666666;
}
.ribbon.light {
background: #ecf0f1;
color: #2c3e50;
border-right: 5px solid #dde4e6;
}
.ribbon.dark {
background: #131313;
color: #fff;
border-right: 5px solid #464646;
}
.ribbon.base-alt {
background: #9cd70e;
color: #fff;
border-right: 5px solid #c6f457;
}
.ribbon.red {
background: #e91b23;
color: #fff;
border-right: 5px solid #f2787d;
}
.ribbon.orange {
background: #ff8a3c;
color: #fff;
border-right: 5px solid #ffc7a2;
}
.ribbon.yellow {
background: #ffd800;
color: #fff;
border-right: 5px solid #ffe866;
}
.ribbon:before, .ribbon:after {
content: '';
position: absolute;
left: -9px;
border-left: 10px solid transparent;
}
.ribbon:before {
top: 0;
}
.ribbon:after {
bottom: 0;
}
.ribbon.base:before {
border-top: 27px solid #666666;
}
.ribbon.base:after {
border-bottom: 27px solid #666666;
}
.ribbon.light:before {
border-top: 27px solid #ecf0f1;
}
.ribbon.light:after {
border-bottom: 27px solid #ecf0f1;
}
.ribbon.dark:before {
border-top: 27px solid #131313;
}
.ribbon.dark:after {
border-bottom: 27px solid #131313;
}
.ribbon.base-alt:before {
border-top: 27px solid #9cd70e;
}
.ribbon.base-alt:after {
border-bottom: 27px solid #9cd70e;
}
.ribbon.red:before {
border-top: 27px solid #e91b23;
}
.ribbon.red:after {
border-bottom: 27px solid #e91b23;
}
.ribbon.orange:before {
border-top: 27px solid #ff8a3c;
}
.ribbon.orange:after {
border-bottom: 27px solid #ff8a3c;
}
.ribbon.yellow:before {
border-top: 27px solid #ffd800;
}
.ribbon.yellow:after {
border-bottom: 27px solid #ffd800;
}
.ribbon span {
display: flex;
font-size: 16px;
font-weight: 600;
}
.ribbon .infotext {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
max-width: 0;
white-space: nowrap;
overflow: hidden;
}
.ribbon:hover .infotext {
max-width: 300px;
}
<div class="container bootstrap snippet">
<div class="row mb-20">
<div class="col-md-3">
<div class="ribbon-content">
<div class="ribbon base"><span>New<div class="infotext">: I'm a new feature.</div></span></div>
</div>
</div>
</div>
</div>

Answer 4

Try JqueryUI for the animation effect. I havn't tested it, but probably this will give you the idea.
<div class="container bootstrap snippet">
<div class="row mb-20">
<div class="col-md-3">
<div class="ribbon-content">
<div class="ribbon base"><span class='newSpn'>New:</span><span class='content'> I'm a new feature.</span></div>
</div>
</div>
</div>
</div>
$('.newSpn').mouseenter(function(){
$('.content').show('slide', {direction: 'left'}, 1000);
}).mouseleave(function(){
$('.content').hide('slide', {direction: 'right'}, 1000);
});
It requires the jQuery-ui library. See http://www.jqueryui.com