Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Paper Text
<h1 class="flag">TASTY.</h1>
/* This pen use Lettering.js to wrap each letter, nothing more. */
$(document).ready(function() {
$(".flag").lettering();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/Lettering.js/5a4897f9/jquery.lettering.js"></script>
@use postcss-nested;
@use postcss-cssnext;
:root {
--font-size: 2vw;
--font-color: #C5BEAA;
--paper-color: #F9F8EF;
--paper-radius: 4px;
--paper-inclination: 8deg;
--background-color: #77EEDF;
}
/* ////////////////////////////////////////////////
//////////////////////////////////////////////// */
:root {
--paper-shadow: color( var(--background-color) shade(50%) );
--bg-color-dark-shade30: color( var(--paper-color) shade(20%) );
--bg-color-dark-shade15: color( var(--paper-color) shade(5%) );
--transition-duration: 200ms;
--paper-light: color( var(--paper-color) lightness(+8%) );
}
body {
background-color: var(--background-color);
}
/* Paper Sheet */
h1.flag {
white-space: nowrap;
font-size: var(--font-size);
position: relative;
cursor: default;
/* Paper Shadow */
&:before {
content: '';
position: absolute;
bottom: 0;
background-color: var(--paper-shadow);
width: 89%;
left: 4%;
height: 40%;
filter: blur(2vw);
transition: all var(--transition-duration) cubic-bezier(0.0, 0.0, 0.2, 1);
}
/* Each letter */
span {
user-select: none;
display: inline-block;
width: 3em;
padding-top: 0.8em;
padding-bottom: 0.8em;
text-align: center;
position: relative;
z-index: 1;
transition: all 1s cubic-bezier(0.0, 0.0, 0.2, 1);
/* Solid Surface */
&:before {
content: '';
background-color: var(--paper-color);
transition: all 1s cubic-bezier(0.0, 0.0, 0.2, 1);
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
/* Odd letters */
&:nth-child(odd) {
transform: skewY(-var(--paper-inclination));
color: color( var(--font-color) tint(35%) );
background: linear-gradient(-30deg, var(--paper-light), var(--bg-color-dark-shade15));
box-shadow: inset -1px 0 0px rgba(255, 255, 255, 0.3);
prospective: 1000px;
}
/* Even letters */
&:nth-child(even) {
transform: skewY(var(--paper-inclination));
color: var(--font-color);
background: linear-gradient(87deg, var(--bg-color-dark-shade30), var(--bg-color-dark-shade15));
box-shadow: inset -1px 0 0px rgba(0, 0, 0, 0.05);
prospective: 1000px;
}
/* Paper border-radius */
&:first-of-type,
&:first-of-type:before {
border-radius: var(--paper-radius) 0 0 var(--paper-radius);
}
&:last-of-type,
&:last-of-type:before {
border-radius: 0 var(--paper-radius) var(--paper-radius) 0;
}
}
/* Hover interaction */
&:hover {
&:before {
opacity: 0.5;
filter: blur(2px);
left: 1%;
width: 98%;
}
span {
transform: none;
color: var(--font-color);
box-shadow: none;
transition-duration: var(--transition-duration);
width: 3.1em;
&:before {
opacity: 1;
transition-duration: var(--transition-duration);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment