Skip to content

Instantly share code, notes, and snippets.

@cesarchavezcal
Last active July 27, 2016 14:56
Show Gist options
  • Select an option

  • Save cesarchavezcal/b04cefa502ed4515493db7842f4f67c9 to your computer and use it in GitHub Desktop.

Select an option

Save cesarchavezcal/b04cefa502ed4515493db7842f4f67c9 to your computer and use it in GitHub Desktop.
Abduzeedo Shadow Effect
.box-shadow
p.paragraph Hover me!
@mixin hover-focus-active {
&:hover,
&:focus,
&:active {
@content;
}
}
html,body {
margin: 0;
padding: 0;
}
.box-shadow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 600px;
height: 300px;
background-color: white;
border-radius: 2px;
border: 1px solid rgba(245,245,245,1);
box-shadow: none;
transition: box-shadow .3s ease-in;
@include hover-focus-active{
box-shadow: rgba(99, 33, 74, 0.2) 0px 2px 2px, rgba(99, 33, 74, 0.2) 0px 4px 4px, rgba(99, 33, 74, 0.2) 0px 8px 8px, rgba(99, 33, 74, 0.2) 0px 16px 16px, rgba(99, 33, 74, 0.2) 0px 32px 32px, rgba(99, 33, 74, 0.2) 0px 64px 64px;
transition: box-shadow .3s ease-in;
}
}
.paragraph {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 1em;
letter-spacing: 2px;
color: rgba(200,200,200,1);
}
<link href="https://github.com/kjbrum/juice.git" rel="stylesheet" />
@cesarchavezcal
Copy link
Author

First Commit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment