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
| /* Position fixed demo */ | |
| .article-main { | |
| padding-top: 40px; | |
| } | |
| .box { | |
| background: hotpink; | |
| width: 100%; | |
| height: 43px; | |
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
| /* Basic menu with sub-menu css */ | |
| .menu-main li { | |
| list-style: none; | |
| } | |
| .menu-main > li { | |
| display: inline-block; | |
| vertical-align: top; | |
| position: relative; | |
| } |
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
| /** Media block **/ | |
| figure img { | |
| vertical-align: middle; | |
| } | |
| .media { | |
| background: #ededed; | |
| width: 630px; | |
| margin: 20px auto; |
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
| /* Modal with CSS */ | |
| @import url(http://fonts.googleapis.com/css?family=Audiowide); | |
| p { | |
| font-family: Arial, sans-serif; | |
| } | |
| .box { | |
| padding: 2em; |
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
| /* CSS Triangle */ | |
| * { box-sizing: border-box } | |
| .triangle { | |
| width: 0; height: 0; | |
| border-bottom: 50px solid black; | |
| border-left: 20px solid transparent; | |
| border-right: 70px solid transparent; | |
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
| /** | |
| * Space Invader | |
| */ | |
| .space-invader{ | |
| margin: 100px auto; | |
| display: block; | |
| width: 200px; | |
| box-shadow: | |
| 0 0 0 1em red, |
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
| /* Sky and cloud with box shadow */ | |
| body { | |
| background: skyblue; | |
| } | |
| .cloud { | |
| width: 200px; | |
| height: 100px; | |
| background: white; |
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
| /* SKY */ | |
| body { | |
| background: skyblue; | |
| } | |
| .cloud { | |
| width: 200px; | |
| height: 100px; | |
| background: white; |
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
| /** | |
| * Paper Stack with pseudo elements | |
| */ | |
| *, *:before, *:after { | |
| -webkit-box-sizing: border-box; | |
| } | |
| .paper { | |
| width: 280px; |
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
| /** | |
| * Paper Stack with box shadow (unsuccessful) | |
| */ | |
| *, *:before, *:after { | |
| -webkit-box-sizing: border-box; | |
| } | |
| .paper { | |
| width: 280px; |