gcyrillus ribbon

dabblet.css

/* gcyrillus ribbon */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;}
body {
transform-style:preserve-3;
perspective:100px;
}
p {
font-size:1.5em;
color:white;
margin:0 4em;
text-align:center;
text-shadow:1px 1px 0 black;
}
.ribbon {width:0;
font-size:1.5em;
padding:0.25em;
background:#333;
border:solid #999;
border-radius:100px;
box-shadow:0  0 5px;
margin:2em 0 2em  10em;
transition:1s;
transform:rotatex(-2deg) rotatey(-5deg) rotatez(40deg);
}
.ribbon:hover {
transition:1s;
transform:rotatex(0deg) rotatey(0deg) rotatez(0deg);
}
.ribbon:hover a {
box-shadow:inset 15px 0 15px -13px #333, 40px -0px 25px -15px #333;
}
a {display:inline-block;
white-space:nowrap;
background:hsl(52, 100%, 53%);
padding:0 0.5em;
font-size:3em;
box-shadow:inset 15px 0 15px -13px #333, 40px -10px 25px -15px #333;
color:#ff0065;
text-shadow:1px 1px 1px white, 1px 1px 2px black;;
text-decoration:none;
}
a:after {
content:'';
height:100%;
display:inline-block;
border:solid 0.7em hsla(52, 100%, 53%,1);
vertical-align:top;
border-right-color:transparent;
margin-right:-1.5em;
}

dabblet.html

<p>survolez/hover ribbon</p>
<h1 class="ribbon"><a href="#">ribbon link</a></h1>
<p>Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris 
vitae ministro praesente paterfamilias uxori susurrasset in aurem, velut
 Amphiarao referente aut Marcio, quondam vatibus inclitis, postridie 
disceret imperator. ideoque etiam parietes arcanorum soli conscii 
timebantur.</p>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}