Created
May 30, 2012 17:23
-
-
Save oloman/2837764 to your computer and use it in GitHub Desktop.
Efecto hoja con esquina plegada
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
| /* Efecto hoja con esquina plegada */ | |
| body { | |
| padding: 20px; | |
| background: #cccccc; | |
| } | |
| h1 { | |
| text-align: center; | |
| } | |
| .hoja { | |
| position:relative; | |
| width: 700px; | |
| margin: 0 auto; | |
| padding:20px; | |
| background:#fff; | |
| box-shadow: 0 2px 3px 1px rgba(0, 0, 0, .2), 0 0 80px rgba(0, 0, 0, .1) inset; | |
| } | |
| .pliegue:before { | |
| content: ""; | |
| position: absolute; | |
| top: -3px; | |
| right: -6px; | |
| width: 95px; | |
| height: 30px; | |
| background: #eeeeee; | |
| box-shadow: 1px 2px 2px rgba(0,0,0,.2); | |
| transform: rotate(32deg); | |
| } | |
| .pliegue:after { | |
| content: ""; | |
| position: absolute; | |
| top: -38px; | |
| right: -4px; | |
| width: 0; | |
| height: 0; | |
| border-bottom: 110px solid transparent; | |
| border-right: 88px solid #ccc; | |
| transform: rotate(-32deg); | |
| } | |
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
| <!-- HTML --> | |
| <body> | |
| <div class="hoja pliegue"> | |
| <h1>TITULO</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat nisi a metus condimentum quis lobortis ligula tempor. Duis consequat varius lorem, in congue diam mollis et. Duis mattis dignissim blandit.</p> | |
| <p>Aliquam viverra tellus eget sem adipiscing aliquet viverra erat dignissim. Integer vitae nisi dui. Pellentesque dolor dolor, scelerisque et interdum et, malesuada ut ante. Maecenas mi nibh, vestibulum ac posuere id, porttitor vel elit.Duis dapibus porttitor nulla, in posuere nisl cursus sit amet.</p> | |
| <p>Donec pharetra massa at nibh volutpat aliquet. Phasellus imperdiet, nunc vel porttitor aliquam, leo ante dignissim enim, eu semper augue libero at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> | |
| </div> | |
| </body> | |
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
| {"view":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment