Created
March 23, 2012 01:41
-
-
Save gdmachado/2166091 to your computer and use it in GitHub Desktop.
Playing with CSS
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
| /** | |
| * Playing with CSS | |
| */ | |
| * { margin: 0; } | |
| body { | |
| background-color: slategray; | |
| font: 12pt "Cochin", Georgia, serif; | |
| line-height: 1.5em; | |
| text-shadow: 0 1px white; | |
| text-align: justify; | |
| } | |
| .blurrify { | |
| background: rgb(25,25,25); | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0; | |
| z-index: -1; | |
| margin-top: -15px; | |
| transition: opacity 1s, z-index .1s; | |
| } | |
| .blurrify > span { | |
| position: absolute; | |
| color: rgba(126,0,0,1); | |
| text-shadow: 3px 3px black; | |
| display: block; | |
| width: 100%; | |
| text-align: center; | |
| top: 50%; | |
| font: bold 72px Helvetica; | |
| z-index: 2; | |
| } | |
| .button { | |
| z-index: 2; | |
| position: fixed; | |
| font-size: 12pt; | |
| float: left; | |
| left: 20px; | |
| top: 20px; | |
| padding: .3em .6em; | |
| border-radius: .3em; | |
| white-space: nowrap; | |
| box-shadow: rgba(255,255,255,.4) 0 1px 0 inset, | |
| rgba(255,255,255,.3) 0 25px 30px -12px inset, | |
| rgba(0,0,0,.6) 0 1px 2px; | |
| cursor: pointer; | |
| transition: background-color .2s linear; | |
| } | |
| .button:hover ~ .blurrify { | |
| opacity: .5; | |
| z-index: 1; | |
| } | |
| .button:hover { | |
| background-color: rgba(0,150,0,.5); | |
| } | |
| div { | |
| position: relative; | |
| margin: 15px auto; | |
| max-width: 575px; | |
| height: 800pt; | |
| background: hsla(45, 30%, 90%, 1) url("http://dabblet.com/img/noise.png"); | |
| padding: 120pt 70pt 30pt 100pt; | |
| border-radius: 2px; | |
| box-shadow: 2px 2px 10px 2px rgba(0,0,0,.5); | |
| } | |
| h1 { | |
| font-size: 28pt; | |
| letter-spacing: 0.05em; | |
| font-weight: bold; | |
| margin-bottom: 2.5em; | |
| } | |
| h2 { | |
| font-size: 16pt; | |
| margin-bottom: 1.5em; | |
| margin-top: 2.5em; | |
| } | |
| p.first:first-letter { | |
| float: left; | |
| font-size: 75px; | |
| text-shadow: 4px 2px slategray; | |
| line-height: 60px; | |
| padding-top: 8px; | |
| padding-right: 8px; | |
| padding-left: 3px; | |
| } | |
| .pagenumber { | |
| margin-left: -100pt; | |
| display:block; | |
| position: absolute; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 1em; | |
| bottom: 3em; | |
| } | |
| @media (max-width:850px) { | |
| body { font-size: 11pt; } | |
| div { padding-left: 15%; padding-right: 10%; } | |
| .pagenumber { margin-left: -15%; } | |
| } | |
| @media (max-width:650px) { | |
| body { font-size: 10pt; } | |
| } | |
| @media (max-width:550px) { | |
| body { font-size: 9pt; } | |
| div { width: auto; margin: 1em; } | |
| } | |
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> --> | |
| <span class="button">Print</span> | |
| <span class="blurrify"><span>Not implemented!</span></span> | |
| <div> | |
| <h1>Lorem Ipsum</h1> | |
| <h2>1.1 Dolor sit amet</h2> | |
| <p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut purus ac risus luctus aliquam. Class aptent taciti sociosqu ad litora | |
| torquent per conubia nostra, per inceptos himenaeos. Phasellus fringilla, lectus at mollis tempor, nibh tortor porta tortor, sit amet interdum | |
| lacus lorem congue libero. Donec sodales bibendum erat, at varius purus posuere nec. Sed nec diam in risus varius ultrices sed quis dolor. | |
| Praesent purus eros, lacinia at tempus vitae, laoreet eu sapien. Sed semper condimentum sapien, non pulvinar libero pretium et. Integer sed | |
| nibh augue, non viverra orci. Aenean convallis, sapien vitae rutrum porta, dui tortor imperdiet orci, id consectetur nunc neque vel nunc. | |
| Donec id libero nec nulla faucibus feugiat eget eget sapien. Nullam mollis tempus enim, ac pharetra lorem congue vel. Vivamus tempus congue | |
| consectetur. Curabitur bibendum, leo id vulputate tincidunt, nisl eros auctor nisi, ut porta nisi velit a est. Cras vitae elit rutrum quam | |
| volutpat vestibulum a semper nulla. In et quam sollicitudin mauris fermentum rhoncus eu sed enim. Aenean imperdiet, nulla non interdum accumsan, | |
| enim ante pellentesque nunc, non tincidunt diam felis et elit.</p> | |
| <h2>1.2 Nullam mollis tempus</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut purus ac risus luctus aliquam. Class aptent taciti sociosqu ad litora | |
| torquent per conubia nostra, per inceptos himenaeos. Phasellus fringilla, lectus at mollis tempor, nibh tortor porta tortor, sit amet interdum | |
| lacus lorem congue libero. Donec sodales bibendum erat, at varius purus posuere nec. Sed nec diam in risus varius ultrices sed quis dolor. | |
| Praesent purus eros, lacinia at tempus vitae, laoreet eu sapien. Sed semper condimentum sapien, non pulvinar libero pretium et. Integer sed | |
| nibh augue, non viverra orci. Aenean convallis, sapien vitae rutrum porta, dui tortor imperdiet orci, id consectetur nunc neque vel nunc. | |
| Donec id libero nec nulla faucibus feugiat eget eget sapien. Nullam mollis tempus enim, ac pharetra lorem congue vel. Vivamus tempus congue | |
| consectetur. Curabitur bibendum, leo id vulputate tincidunt, nisl eros auctor nisi, ut porta nisi velit a est. Cras vitae elit rutrum quam | |
| volutpat vestibulum a semper nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut purus ac risus luctus aliquam. | |
| </p> | |
| <span class="pagenumber">1</span> | |
| </div> | |
| <div> | |
| Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus fringilla, lectus at mollis tempor, | |
| nibh tortor portatortor, sit amet interdum lacus lorem congue libero. | |
| <span class="pagenumber">2</span> | |
| </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","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment