Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created May 18, 2017 00:43
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save CodeMyUI/01772e9b5a95686124f7329c8fa0a839 to your computer and use it in GitHub Desktop.
CSS only fracture effect
.container
h1 Snap!
span(data-text="snap!") Snap!
span(data-text="snap!") Snap!
// usage: @include mdShadowLevel(1);
@mixin mdShadowLevel($level) {
@if ($level == 5) {
box-shadow: 0px 40px 70px 0px rgba(0, 0, 0, 0.22),0px 27px 24px 0px rgba(0, 0, 0, 0.2);
} @else if ($level == 4){
box-shadow: 0px 25px 55px 0px rgba(0, 0, 0, 0.21),0px 16px 28px 0px rgba(0, 0, 0, 0.22);
} @else if ($level == 3){
box-shadow: 0px 17px 50px 0px rgba(0, 0, 0, 0.19),0px 12px 15px 0px rgba(0, 0, 0, 0.24);
} @else if ($level == 2){
box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.19),0px 8px 17px 0px rgba(0, 0, 0, 0.2);
} @else if ($level == 1){
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.16),0px 2px 5px 0px rgba(0, 0, 0, 0.26);
} @else{ // Aka Level 0:
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0),0px 0px 0px 0px rgba(0, 0, 0, 0);
}
}
body{
height: 100vh;
background: #333;
display: flex;
justify-content: center;
align-items: center;
}
.container{
flex: 0 0 auto;
background: crimson;
width: 450px;
@include mdShadowLevel(1);
}
h1{
font-size: 120px;
text-transform: uppercase;
margin: 0;
color: transparent;
position: relative;
transform: skew(45deg);
span{
position: absolute;
top: 0;
left: 0;
display: block;
color: transparent;
overflow: hidden;
transition: all 200ms linear;
&:first-child{
width: 40%;
margin-left: 0em;
}
&:last-child{
width: 60%;
left: 40%;
text-indent: -66%;
transform: translate(4px,2px)
}
&:before{
position: absolute;
top: 0;
left: 0;
content: attr(data-text);
color: white;
transform: skew(-45deg);
padding-left: 0.25em;
padding-right: 0.25em;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment