<p data-text=Away>Away</p>
See similar pens at <a href=https://codepen.io/nokiss/pens/popular target=_blank>Codepen</a>
<br> More text effects at <a href=http://users.atw.hu/nyejani/gallery/gallery.htm target=_blank>nokiss</a>
:root {
--3DshadowA3: 0 0 1px rgba(0, 0, 0, .7), -1px 0 1px rgba(0, 0, 0, .4), 1px -1px 1px, 0 -1px 1px, -1px -1px 1px, 1px -1px 1px rgba(0, 0, 0, .5), -2px -1px 1px rgba(0, 0, 0, .5), 0 -2px 1px, -1px -2px 1px, -2px -2px 1px, 0 -2px 1px rgba(0, 0, 0, .5), -3px -2px 1px rgba(0, 0, 0, .5), -1px -3px 1px, -2px -3px 1px, -3px -3px 1px, -1px -3px 1px rgba(0, 0, 0, .5), -4px -3px 1px rgba(0, 0, 0, .5), -2px -4px 1px, -3px -4px 1px, -4px -4px 1px, -2px -4px 1px rgba(0, 0, 0, .5), -5px -4px 1px rgba(0, 0, 0, .5), -3px -5px 1px, -4px -5px 1px, -5px -5px 1px, -3px -5px 1px rgba(0, 0, 0, .5), -5px -5px 1px rgba(0, 0, 0, .7);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
background: #ddd;
padding: 1em
}
p {
position: relative;
font-style: italic;
font-size: 8rem;
text-align: center;
transform-origin: bottom left;
transform: skewY(-15deg)translate3d(0, 0, 0);
margin-top: 1.8em;
color: #fff;
text-shadow: var(--3DshadowA3);
filter: brightness(.9)contrast(2)
}
p:before,
p:after {
position: absolute;
left: 0;
right: 0;
top: 0;
content: attr(data-text)
}
p:before {
color: transparent;
text-shadow: 0 0 5px #000, 0 0 10px rgba(0, 0, 0, .8), 0 0 20px rgba(0, 0, 0, .6), 0 0 40px rgba(0, 0, 0, .4);
opacity: .4;
transform-origin: bottom left;
transform: skewX(60deg);
z-index: -1
}
p:after {
color: #fff;
text-shadow: 0 0 .7px, 0 0 1.1px, 0 0 1.1px
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.