Johnny Depp Optical Illusion
http://www.moillusions.com/johnny-depp-optical-illusion/
image:
Last active
March 27, 2016 01:39
-
-
Save Rplus/fd66c96b30d41cbb1f69 to your computer and use it in GitHub Desktop.
codepen: Johnny Depp Optical Illusion
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| html(lang="en") | |
| head | |
| meta(charset="UTF-8") | |
| title Johnny Depp Optical Illusion | |
| meta(name="viewport", content="width=device-width") | |
| link(rel="stylesheet", href="style.css") | |
| body | |
| h1.intro Johnny Depp Optical Illusion | |
| .box | |
| blockquote.info | |
| | inspired from #[a(href="http://www.moillusions.com/johnny-depp-optical-illusion/") Johnny Depp Optical Illusion] by #[a(href="http://www.moillusions.com/author/james/") James Dean] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $black: #000; | |
| $white: #fff; | |
| $c-s: $black; | |
| $c-b: rgba($white, .95); | |
| .box { | |
| position: relative; | |
| flex: 1; | |
| width: 100%; | |
| max-width: 40rem; | |
| margin: 0 auto; | |
| &::before, | |
| &::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| &::before { | |
| background: $white url("https://avatars3.githubusercontent.com/u/1808835") no-repeat 50% 50% / contain; | |
| } | |
| &::after { | |
| color: $c-s; | |
| background-color: $c-b; | |
| background-image: linear-gradient(to right, currentColor 2px, transparent 2px, transparent 4px, currentColor 4px, currentColor 7px, transparent 7px); | |
| background-size: 10px 30px; | |
| } | |
| } | |
| /// reset | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| } | |
| html { | |
| height: 100%; | |
| } | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100%; | |
| margin: 0; | |
| background: #fff; | |
| color: #333; | |
| } | |
| a { | |
| color: inherit; | |
| } | |
| .intro { | |
| width: 90%; | |
| max-width: 30rem; | |
| padding-bottom: 1rem; | |
| margin: 0 auto 1em; | |
| padding-top: .5em; | |
| font-size: calc(1rem + 2vmin); | |
| text-transform: capitalize; | |
| border-bottom: 1px dashed rgba(#000, .3); | |
| text-align: center; | |
| small { | |
| display: block; | |
| opacity: .5; | |
| font-style: italic; | |
| text-transform: none; | |
| } | |
| } | |
| .info { | |
| margin: 0; | |
| padding: 1em; | |
| font-size: .9em; | |
| font-style: italic; | |
| font-family: serif; | |
| text-align: right; | |
| opacity: .5; | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
codepen:
http://codepen.io/Rplus/pen/GZEMGy