Created
June 1, 2012 13:02
-
-
Save grtner/2851991 to your computer and use it in GitHub Desktop.
Animated Article view
This file contains 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
| /** | |
| * Animated Article view | |
| */ | |
| html { | |
| font: 300 .75em/1.5 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | |
| color: #666; | |
| background-color: #b2bec2; | |
| background-image: | |
| radial-gradient(50% 0%, rgb(144, 141, 161), rgb(74, 82, 115)); | |
| min-height: 100%; | |
| } | |
| body { | |
| width: 100%; | |
| max-width: 600px; | |
| margin: 10em auto; | |
| } | |
| a { | |
| color: #367a9d; | |
| text-decoration: none; | |
| transition: color .2s ease-in-out; | |
| } | |
| a:hover { | |
| color: #8a8ab3; | |
| } | |
| li { | |
| margin-bottom: .75em; | |
| } | |
| ul, p { margin-bottom: 1.5em;} | |
| article { | |
| display: table; | |
| margin-bottom: 3em; | |
| } | |
| .article-outer { | |
| background-color: rgba(255,255,255,.9); | |
| width: 500px; | |
| margin-left: 130px; | |
| padding: 1em 2em; | |
| box-shadow: 0 1px 4px rgba(0,0,0,.3); | |
| overflow: hidden; | |
| vertical-align: middle; | |
| } | |
| .article-outer:after, .article-outer:before { | |
| right: 100%; | |
| border: solid transparent; | |
| content: " "; | |
| height: 0; | |
| width: 0; | |
| position: absolute; | |
| pointer-events: none; | |
| } | |
| .article-outer > header { | |
| padding-bottom: .75em; | |
| border-bottom: 1px solid rgba(0,0,0,.1); | |
| } | |
| .article-outer > footer { | |
| border-top: 1px solid white; | |
| } | |
| .article-inner { | |
| border-top: 1px solid white; | |
| border-bottom: 1px solid rgba(0,0,0,.1); | |
| } | |
| .datetime { | |
| font-size: 1.5em; | |
| line-height: 1; | |
| color: white; | |
| text-shadow: 0 1px 1px rgba(0,0,0,.3); | |
| border-radius: 50%; | |
| background-color: #EE5926; | |
| width: 75px; | |
| height: 75px; | |
| text-align: center; | |
| display: table; | |
| box-shadow: 0 0 0 4px rgba(255,255,255,.2); | |
| position: relative; | |
| float: left; | |
| } | |
| .datetime:after { | |
| content: ""; | |
| position: absolute; | |
| width: 50px; | |
| height: 5px; | |
| background-color: rgba(255,255,255,.2); | |
| top: 50%; | |
| left: 106%; | |
| } | |
| .datetime > time { | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| .hN { | |
| margin: 0; | |
| color: #444; | |
| font-weight: 300; | |
| text-transform: uppercase; | |
| } | |
| .hN:first-child { | |
| color: #333; | |
| font-weight: 700; | |
| text-transform: none; | |
| } | |
| hr { | |
| height: 0; | |
| width: 550px; | |
| border: none; | |
| border-bottom: 1px solid rgba(255,255,255,.2); | |
| border-top: 1px solid rgba(0,0,0,.2); | |
| margin-left: 130px; | |
| margin-bottom: 3em; | |
| } | |
| form { | |
| margin-left: 130px; | |
| } | |
| label { | |
| color: rgba(255,255,255,.3); | |
| font-size: 1.25em; | |
| } | |
| input { | |
| width: 100%; | |
| -webkit-appereance: none; | |
| border: 2px solid rgba(0,0,0,.7); | |
| padding: .75em; | |
| height: 1.5em; | |
| margin-bottom: 1.5em; | |
| border-radius: 2px; | |
| background-image: linear-gradient(top, rgba(0, 0, 0,.02), rgba(0,0,0,.01)); | |
| box-shadow: 0 1px 0 rgba(255,255,255,.3); | |
| } | |
This file contains 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
| <!-- content to be placed inside <body>…</body> --> | |
| <div> | |
| <article> | |
| <aside class="datetime"> | |
| <time>22<br>Mar</time> | |
| </aside> | |
| <section class="article-outer"> | |
| <header> | |
| <hgroup> | |
| <h2 class="hN">Lorem Ipsum dolor sit amet</h2> | |
| <h3 class="hN">consetetur sadipscing elitr, sed diam nonumy eirmod tempor</h3> | |
| </hgroup> | |
| </header> | |
| <div class="article-inner" role="main"> | |
| <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> | |
| <ul> | |
| <li>This is just a simple list | |
| <li>Another list Point | |
| </ul> | |
| </div> | |
| <footer> | |
| <p> | |
| posted <time>2 days ago</time> | |
| by <a href="#" title="author">Pascal Gaertner</a> | |
| </p> | |
| </footer> | |
| </section> | |
| </article> | |
| <hr> | |
| <form> | |
| <label for="name">Name:</label> | |
| <input id="name" type="text" placeholder="Your Name…"> | |
| <label for="email">E-Mail:</label> | |
| <input id="email" type="email" placeholder="Your E-Mail…"> | |
| </form> | |
| </div> |
This file contains 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
| {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment