Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 71ef176
Showing
44 changed files
with
4,164 additions
and
0 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
| Original file line number | Original file line | Diff line number | Diff line change |
|---|---|---|---|
| @@ -0,0 +1,186 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
|
|
|||
| <meta content="text/html; charset=UTF-8" http-equiv="content-type"> | |||
| <title>Basic CSS3 Demos</title> | |||
|
|
|||
| <style type="text/css"> | |||
|
|
|||
| html, body { | |||
| margin: 0; | |||
| padding: 0; | |||
| font-family: sans-serif; | |||
| font-size: 16px; | |||
| background: #EEE; | |||
| } | |||
|
|
|||
| .section { | |||
| border: 1px solid #CCC; | |||
| padding: 1em 2em 2em; | |||
| margin: 3em; | |||
| background: #FFF; | |||
| position: relative; | |||
| } | |||
|
|
|||
| .section h2 { | |||
| border: 1px solid #CCC; | |||
| position: relative; | |||
| left: -3em; | |||
| top: -2em; | |||
| background: #FFF; | |||
| font-size: 1em; | |||
| padding: .25em 1em; | |||
| margin: 0; | |||
| } | |||
|
|
|||
| .section code { | |||
| display: block; | |||
| white-space: pre; | |||
| margin-left: 250px; | |||
| min-height: 100px; | |||
| color: #999; | |||
| overflow: auto; | |||
| } | |||
| .section code strong { | |||
| color: #000; | |||
| } | |||
|
|
|||
| .test { | |||
| width: 200px; | |||
| height: 100px; | |||
| line-height: 100px; | |||
| text-align: center; | |||
| border: 2px solid; | |||
| background: #FFF; | |||
| float: left; | |||
| position: relative; | |||
| behavior: url(PIE.htc); | |||
| } | |||
|
|
|||
| #test1 { | |||
| border-color: #c00; | |||
| -webkit-border-radius: 1em; | |||
| -moz-border-radius: 1em; | |||
| border-radius: 1em; | |||
| } | |||
|
|
|||
| #test2 { | |||
| border-color: #090; | |||
| -webkit-border-radius: 1em; | |||
| -moz-border-radius: 1em; | |||
| border-radius: 1em; | |||
| -webkit-box-shadow: #999 0 .25em .5em; | |||
| -moz-box-shadow: #999 0 .25em .5em; | |||
| box-shadow: #999 0 .25em .5em; | |||
| } | |||
|
|
|||
| #test3 { | |||
| border-color: #00c; | |||
| -webkit-border-radius: 1em; | |||
| -moz-border-radius: 1em; | |||
| border-radius: 1em; | |||
| -webkit-box-shadow: #999 0 .25em .5em; | |||
| -moz-box-shadow: #999 0 .25em .5em; | |||
| box-shadow: #999 0 .25em .5em; | |||
| background: #9CF; | |||
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9CF), color-stop(100%, #03C)); | |||
| background: -moz-linear-gradient(#9CF, #03C); | |||
| background: linear-gradient(#9CF, #03C); | |||
| -pie-background: linear-gradient(#9CF, #03C); | |||
| } | |||
|
|
|||
| #test4 { | |||
| border-color: #F99; | |||
| -webkit-border-radius: 1em; | |||
| -moz-border-radius: 1em; | |||
| border-radius: 1em; | |||
| -webkit-box-shadow: #999 0 .25em .5em; | |||
| -moz-box-shadow: #999 0 .25em .5em; | |||
| box-shadow: #999 0 .25em .5em; | |||
| background: #FFF url(images/icon-ie.png) no-repeat 50% 0; | |||
| background: url(images/icon-ie.png) no-repeat 50% 0, url(images/icon-firefox.png) no-repeat 0 0, url(images/icon-chrome.png) no-repeat 100% 0, url(images/icon-safari.png) no-repeat 0 100%, url(images/icon-opera.png) no-repeat 100% 100% #FFF; | |||
| -pie-background: url(images/icon-ie.png) no-repeat 50% 0, url(images/icon-firefox.png) no-repeat 0 0, url(images/icon-chrome.png) no-repeat 100% 0, url(images/icon-safari.png) no-repeat 0 100%, url(images/icon-opera.png) no-repeat 100% 100% #FFF; | |||
| } | |||
|
|
|||
| #test5 { | |||
| -webkit-border-image: url(images/border2.png) 15 stretch; | |||
| -moz-border-image: url(images/border2.png) 15 stretch; | |||
| border-image: url(images/border2.png) 15 fill stretch; | |||
| border-width: 15px; | |||
| width: 180px; | |||
| height: 80px; | |||
| line-height: 80px; | |||
| } | |||
|
|
|||
| </style> | |||
|
|
|||
| </head> | |||
| <body> | |||
|
|
|||
|
|
|||
| <div class="section"> | |||
| <h2>border-radius</h2> | |||
| <div class="test" id="test1">Cherry</div> | |||
| <code><strong>border-radius: 1em; /* Standard */ | |||
| -moz-border-radius: 1em; /* Gecko */ | |||
| -webkit-border-radius: 1em; /* WebKit */</strong></code> | |||
| </div> | |||
|
|
|||
| <div class="section"> | |||
| <h2>box-shadow</h2> | |||
| <div class="test" id="test2">Apple</div> | |||
| <code>border-radius: 1em; | |||
| -moz-border-radius: 1em; | |||
| -webkit-border-radius: 1em; | |||
| <strong>box-shadow: #999 0 .25em .5em; | |||
| -webkit-box-shadow: #999 0 .25em .5em; | |||
| -moz-box-shadow: #999 0 .25em .5em;</strong></code> | |||
| </div> | |||
|
|
|||
| <div class="section"> | |||
| <h2>linear-gradient</h2> | |||
| <div class="test" id="test3">Blueberry</div> | |||
| <code>border-radius: 1em; | |||
| -moz-border-radius: 1em; | |||
| -webkit-border-radius: 1em; | |||
| box-shadow: #999 0 .25em .5em; | |||
| -webkit-box-shadow: #999 0 .25em .5em; | |||
| -moz-box-shadow: #999 0 .25em .5em; | |||
| <strong>background: #9CF; /* Fallback */ | |||
| background: -webkit-gradient(linear, 0 0, 0 100%, from(#9CF), to(#03C)); | |||
| background: -moz-linear-gradient(#9CF, #03C); | |||
| background: linear-gradient(#9CF, #03C); | |||
| -pie-background: linear-gradient(#9CF, #03C);</strong></code> | |||
| </div> | |||
|
|
|||
| <div class="section"> | |||
| <h2>multiple background images</h2> | |||
| <div class="test" id="test4">Rhubarb</div> | |||
| <code>border-radius: 1em; | |||
| -moz-border-radius: 1em; | |||
| -webkit-border-radius: 1em; | |||
| box-shadow: #999 0 .25em .5em; | |||
| -webkit-box-shadow: #999 0 .25em .5em; | |||
| -moz-box-shadow: #999 0 .25em .5em; | |||
| <strong>background: url(icon-ie.png) no-repeat 50% 0 #FFF; /* Fallback */ | |||
| background: url(icon-ie.png) no-repeat 50% 0, | |||
| url(icon-firefox.png) no-repeat 0 0, | |||
| url(icon-chrome.png) no-repeat 100% 0, | |||
| url(icon-safari.png) no-repeat 0 100%, | |||
| url(icon-opera.png) no-repeat 100% 100% #FFF; | |||
| -pie-background: ...</strong></code> | |||
| </div> | |||
|
|
|||
| <div class="section"> | |||
| <h2>border-image</h2> | |||
| <div class="test" id="test5">Pumpkin</div> | |||
| <code><strong>border-image: url(border2.png) 15 fill stretch; | |||
| -moz-border-image: url(border2.png) 15 stretch; | |||
| -webkit-border-image: url(border2.png) 15 stretch; | |||
| border-width: 15px;</strong></code> | |||
| </div> | |||
|
|
|||
|
|
|||
| </body> | |||
| </html> | |||
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
| Original file line number | Original file line | Diff line number | Diff line change |
|---|---|---|---|
| @@ -0,0 +1,136 @@ | |||
| <!DOCTYPE html> | |||
|
|
|||
| <html> | |||
| <head> | |||
| <title>Stress Test</title> | |||
|
|
|||
| <style> | |||
|
|
|||
| .tester { | |||
| background: #EEE url(images/border.png) 50% 50%; | |||
| border: 3px solid #66F; | |||
| float: left; | |||
| padding: 10px; | |||
| margin: 10px; | |||
| width: 10%; | |||
| border-radius: 10px; | |||
| box-shadow: #000 5px 5px 8px; | |||
| behavior: url(PIE.htc); | |||
| } | |||
|
|
|||
| </style> | |||
| </head> | |||
| <body> | |||
|
|
|||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
|
|
|||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
|
|
|||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
|
|
|||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
|
|
|||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
|
|
|||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
|
|
|||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
|
|
|||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
|
|
|||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
|
|
|||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
| <div class="tester">test</div> | |||
|
|
|||
| </body> | |||
| </html> | |||
Oops, something went wrong.