* {margin: 0; padding: 0;}
html, body {height: 100%;}
body {
background: #B1E3E2;
box-shadow: inset 0 0 100px 20px #80D0CF;
text-align: center;
}
h1 {
display: inline-block;
font-size: 14px;
line-height: 28px;
color: #8699A0;
text-shadow: 0 0 1px #758890;
margin: 120px 0;
font-family: arial, verdana;
outline: none;
padding: 14px 30px;
position: relative;
text-transform: uppercase;
box-shadow:
0 0 30px 0 rgba(0, 0, 0, 0.1),
0 36px 0 -18px #B1E3E2;
}
h1:before {
content: '';
position: absolute;
top: 18px;
left: -15%;
z-index: -1;
width: 130%;
height: 0;
border: 28px solid rgba(0, 0, 0, 0);
border-left: 28px solid #B1E3E2;
border-right: 28px solid #B1E3E2;
}
h1:after {
content: '';
width: 100%;
height: 0;
position: absolute;
top: 100%; left: 0;
z-index: -1;
border-top: 18px solid #99acb2;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
}
h1, h1:before {
background-image:
linear-gradient(
transparent 8%,
rgba(0, 0, 0, 0.1) 8%,
rgba(0, 0, 0, 0.1) 14%,
transparent 14%,
transparent 86%,
rgba(0, 0, 0, 0.1) 86%,
rgba(0, 0, 0, 0.1) 92%,
transparent 92%
),
linear-gradient(
rgba(255, 255, 255, 0.75),
rgba(255, 255, 255, 0)
),
linear-gradient(
45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
),
linear-gradient(white, white);
background-size:
cover,
cover,
4px 4px,
cover;
}
h1, h1:before, h1:after {
box-sizing: border-box;
background-origin: border-box;
}
8 Comments
(close)andrej
this is madness!!!
seriously craziest and most interesting css I have seen in years. Impressive :)
One uprade probably would be transparency though. Just on a sidenote ;)
ebhoren
Wow, killer technique.
Really impressive.
Transparency should make this trick the best way to build ribbon.
Imran Malik
Stunning… This simply show how powerful CSS3 is. Hope to see some other COOL stuff using CSS3 only.
Ralph
Nice one… never thought it would be possible with one element, but of course with gradients we can ‘draw’ stuff too.
Morteza
Thanks
very good
Chris
Awesome. But I find myself wondering how to ever use any of these cool effects in a content-management-system based site, like Drupal, where you have so little control over markup.
Thanks!
Andrew Kenny
Great technique. I was actually looking for a pure CSS ribbon a few days ago and just came across this completely by accident. Too late for this web project but will add it to the toolbox.
nobody
Awesome
Great technique
Thanks