GCyrillus, exemple ruban-ribbon xtrm-kitchmas

dabblet.css

/*  GCyrillus, exemple ruban-ribbon  xtrm-kitchmas*/
html {
background: #548FC5;
text-align:center;
line-height:45px;
padding:5em;
font-size:20px;
text-shadow:0 0 2px black;
font-style:italic;
font-family:  georgia  ;
text-shadow:1px 1px 2px gray, 0 0 2px black;
}
body > p a {display:inline-block;
font-size:40px;
text-decoration:none;
color:white;
width:45px;
height:45px;
line-height:45px;
border-radius:45px;
background:#C74F52;
background-image:linear-gradient(-90deg,#E78E86 0%,#C42F34 70%);
box-shadow:0 0 1px black,0 0 5px black, inset 0 1px 1px  #CCbFbF ,inset 0 0 1px #f44349, inset 0 0 1px 1px #C4ACAD , inset 0 -2px 5px #C64F54;
}
p {color:white;}
h1.ruban , h1, .ruban1{
font-size:1.2em;
color:white;
margin:1em -2.5em;
padding:0 0.25em;
border-radius:5px;
background:#18B713;
text-align:center;
height:2em;
line-height:2em;
box-shadow:0 0 5px white;
position:relative;
}
.ruban1:before, .ruban1:after, .ruban:before, .ruban:after {box-shadow:-3px -2px 5px -3px white;
content:'';
border:solid #006900 1.25em;
position:absolute;
top:2em;
right:7px;
z-index: -1 ;
border-bottom-color:transparent;
border-right-color:transparent;
transform:skew(-15deg);
border-raius:5px
}
.ruban1:before,.ruban:before {
box-shadow:3px -2px 5px -3px white;
left:7px;
right:auto;
transform:skew(15deg);
border-right-color:#006900;
border-left-color:transparent;
}

h1:after, h1:before {
content:'';position:absolute;
}
div {border:solid;background:#F2B50F;
width:50%;
margin:auto;
font-size:0.8em;

z-index:1;
text-align:left;
line-height:1.6em;
padding:0 1em;
}
.ruban2 {margin:1em  -2em;}
.ruban2:before, .ruban2:after {
border-radius:5px;
border:solid 1em #18B713;
border-right-width:2em;
border-left-width:1em;
border-right-color:transparent;
border-left-color:#5DCC59;
right:-2em;
top:1em;
z-index:-1;
box-shadow:-5px 0 5px white;
}
.ruban2:before {
left:-2em;
right:auto;
border:solid 1em #18B713;
border-left-width:2em;
border-right-width:1em;
border-left-color:transparent;
border-right-color:#5DCC59;
box-shadow:5px 0 5px white;
}

.ruban3 {margin:1em  -2em;box-shadow:0 0 ;border:1px solid #006900;border-radius: 5px;}
.ruban3:before, .ruban3:after {
border-radius:10px 10px 5px 5px;
border:solid 1em #18B713;
border-right-width:2em;
border-left-width:1em;
border-right-color:transparent;
border-left-color:#006900;
right:-2em;
top:-1em;
z-index:-1;
box-shadow:-1px 0 1px #006900;
}
.ruban3:before {
left:-2em;
right:auto;
border:solid 1em #18B713;
border-left-width:2em;
border-right-width:1em;
border-left-color:transparent;
border-right-color:#006900;
box-shadow:1px 0 1px #006900;
}

dabblet.html

<p><a href="#">i</a> transform:skew(xdeg); transparent border .</p>
<p class="ruban1">ruban 1 </p>
<div>

<h1 class="ruban">~ ~ ~ ~ ~ ribbon ~ ~ ~ ~ ~</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada 
fames ac turpis egestas.</p>
<p> <em>Aenean ultricies mi vitae est.</em>
 Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. </p>
<p>Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. 
Asagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a>
 in turpis pulvinar facilisis. Ut felis.</p>
<h1 class="ruban1">~ ~ ~ ~ ~ ribbon 1 ~ ~ ~ ~ ~</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada 
fames ac turpis egestas.</p>
<p> <em>Aenean ultricies mi vitae est.</em>
 Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. </p>
<p>Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. 
Asagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a>
 in turpis pulvinar facilisis. Ut felis.</p>
 <h1 class="ruban2">~ ~ ~ ~ ~ ribbon 2 ~ ~ ~ ~ ~</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada 
fames ac turpis egestas.</p>
<p> <em>Aenean ultricies mi vitae est.</em>
 Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. </p>
<p>Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. 
Asagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a>
 in turpis pulvinar facilisis. Ut felis.</p>
 <h1 class="ruban3">~ ~ ~ ~ ~ ribbon 3 ~ ~ ~ ~ ~</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada 
fames ac turpis egestas.</p>
<p> <em>Aenean ultricies mi vitae est.</em>
 Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. </p>
<p>Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. 
Asagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a>
 in turpis pulvinar facilisis. Ut felis.</p>
 <h1 class="ruban4">~ ~ ~ ~ ~ ribbon 4 ~ ~ ~ ~ ~</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada 
fames ac turpis egestas.</p>
<p> <em>Aenean ultricies mi vitae est.</em>
 Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. </p>
<p>Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. 
Asagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a>
 in turpis pulvinar facilisis. Ut felis.</p>
 <h1 class="ruban5">~ ~ ~ ~ ~ ribbon 5 ~ ~ ~ ~ ~</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada 
fames ac turpis egestas.</p>
<p> <em>Aenean ultricies mi vitae est.</em>
 Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. </p>
<p>Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. 
Asagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a>
 in turpis pulvinar facilisis. Ut felis.</p>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}