Skip to content

Instantly share code, notes, and snippets.

@cesarchavezcal

cesarchavezcal/abduzeedo-shadow-effect.markdown

Last active July 27, 2016 14:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cesarchavezcal/b04cefa502ed4515493db7842f4f67c9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cesarchavezcal/b04cefa502ed4515493db7842f4f67c9 to your computer and use it in GitHub Desktop.
Download ZIP
Abduzeedo Shadow Effect
Raw
index.jade
.box-shadow
p.paragraph Hover me!
Raw
style.scss
@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);
}
Raw
styles
<link href="https://github.com/kjbrum/juice.git" rel="stylesheet" />
@cesarchavezcal
Copy link
Author

cesarchavezcal commented Jul 27, 2016

First Commit

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