Permalink
Browse files

changed tabs to spaces; other updates

Fixed gradient syntax, word-wrap stuff, removed flexbox code example,
and a few other things I can't remember.
  • Loading branch information...
1 parent 63c8d58 commit 9005ac8bf927c20ee9dc63c73fc003834bc187c0 @impressivewebs committed Sep 17, 2012
Showing with 329 additions and 335 deletions.
  1. +2 −9 css/styles.css
  2. +26 −0 includes/bsa.php
  3. +1 −1 includes/common.php
  4. +29 −29 includes/features/3d-transform/code.php
  5. +7 −7 includes/features/background-clip/code.php
  6. +8 −8 includes/features/background-origin/code.php
  7. +3 −3 includes/features/background-size/code.php
  8. +4 −4 includes/features/border-image/code.php
  9. +6 −6 includes/features/border-radius/code.php
  10. +3 −3 includes/features/box-shadow/code.php
  11. +5 −5 includes/features/box-sizing/code.php
  12. +1 −1 includes/features/box-sizing/description.php
  13. +3 −2 includes/features/calc/code.php
  14. +2 −2 includes/features/calc/support.php
  15. +2 −2 includes/features/canvas-backgrounds/code.php
  16. +4 −4 includes/features/currentcolor/code.php
  17. +2 −2 includes/features/cursors/code.php
  18. +12 −12 includes/features/exclusions/code.php
  19. +4 −4 includes/features/filters/code.php
  20. +1 −25 includes/features/flexbox/code.php
  21. +1 −6 includes/features/flexbox/result.php
  22. +4 −4 includes/features/flexbox/support.php
  23. +1 −1 includes/features/font-face/code.php
  24. +3 −3 includes/features/grid-layout/code.php
  25. +2 −2 includes/features/hsla/code.php
  26. +4 −4 includes/features/hyphenation/code.php
  27. +44 −41 includes/features/keyframe-animations/code.php
  28. +7 −8 includes/features/linear-gradient/code.php
  29. +1 −1 includes/features/linear-gradient/support.php
  30. +5 −5 includes/features/marquee/code.php
  31. +2 −2 includes/features/masks/code.php
  32. +8 −8 includes/features/media-queries/code.php
  33. +2 −2 includes/features/multiple-backgrounds/code.php
  34. +16 −16 includes/features/multiple-columns/code.php
  35. +1 −1 includes/features/namespace/code.php
  36. +7 −7 includes/features/object-fit-position/code.php
  37. +3 −3 includes/features/opacity/code.php
  38. +1 −1 includes/features/overflow-wrap/code.php
  39. +4 −4 includes/features/paged-media/code.php
  40. +1 −1 includes/features/pointer-events/code.php
  41. +4 −5 includes/features/radial-gradient/code.php
  42. +1 −1 includes/features/reflections/code.php
  43. +9 −7 includes/features/regions/code.php
  44. +4 −4 includes/features/rem-units/code.php
  45. +3 −3 includes/features/resize/code.php
  46. +1 −1 includes/features/rgba/code.php
  47. +5 −5 includes/features/rotate-transform/code.php
  48. +5 −5 includes/features/scale-transform/code.php
  49. +4 −4 includes/features/selection-color/code.php
  50. +4 −4 includes/features/shaders/code.php
  51. +5 −5 includes/features/skew-transform/code.php
  52. +3 −3 includes/features/space-round/code.php
  53. +3 −3 includes/features/tab-size/code.php
  54. +2 −2 includes/features/template-layout/code.php
  55. +5 −5 includes/features/text-overflow/code.php
  56. +1 −1 includes/features/text-shadow/code.php
  57. +6 −6 includes/features/text-stroke/code.php
  58. +5 −5 includes/features/transform-origin/code.php
  59. +7 −7 includes/features/transitions/code.php
  60. +5 −5 includes/features/translate-transform/code.php
  61. +1 −1 includes/features/word-wrap/code.php
  62. +1 −1 includes/features/word-wrap/description.php
  63. +1 −1 includes/features/word-wrap/technical.php
  64. +2 −2 index.php
View
@@ -574,7 +574,6 @@ header {
transition: opacity .5s ease;
background: #bb4c1a;
background: -moz-linear-gradient(#bb4c1a 0%, #bb4c1a 45%, #ac3600 55%, #ac3600 100%); /* FF 3.6+ */
- background: -ms-linear-gradient(#bb4c1a 0%, #bb4c1a 45%, #ac3600 55%, #ac3600 100%); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bb4c1a), color-stop(45%, #bb4c1a), color-stop(55%, #ac3600), color-stop(100%, #ac3600)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#bb4c1a 0%, #bb4c1a 45%, #ac3600 55%, #ac3600 100%); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#bb4c1a 0%, #bb4c1a 45%, #ac3600 55%, #ac3600 100%); /* Opera 11.10 */
@@ -767,6 +766,7 @@ header {
width: 270px;
overflow: hidden;
border: none;
+ padding-bottom: 3px;
}
.ap-link:link, .ap-link:visited {
@@ -775,14 +775,6 @@ header {
right: 10px;
}
- .one .bsa_it_p a {
- display: none;
- }
-
- .bsa_it_ad a {
- display: block;
- }
-
.code {
width: 1066px;
height: 110px;
@@ -1350,6 +1342,7 @@ pre.code {
.result-calc {
width: 70%;
+ width: -webkit-calc(70% - 50px);
width: -moz-calc(70% - 50px);
width: calc(70% - 50px);
margin: 20px auto;
View
@@ -8,6 +8,24 @@
margin: 0;
padding: 0;
}
+
+ .bsa_it_ad a {
+ display: block;
+ }
+
+ .bsa_it_p a {
+ display: none;
+ }
+
+ .extbsa {
+ font-size: 10px;
+ color: #666;
+ text-decoration: none;
+ position: absolute;
+ bottom: 6px;
+ right: 14px;
+ z-index: 10;
+ }
</style>
</head>
<body>
@@ -19,12 +37,20 @@
bsa.async = true;
bsa.src = 'http://s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
+
+ var extBSA = document.createElement('a');
+ extBSA.href = 'http://buysellads.com/buy/detail/144086/zone/1277044?utm_source=site_144086&utm_medium=website&utm_campaign=imagetext&utm_content=zone_1277044';
+ extBSA.target = '_blank';
+ extBSA.className = 'extbsa';
+ extBSA.innerHTML = "ads by BSA";
+ document.getElementsByTagName('body')[0].appendChild(extBSA);
})();
</script>
<!-- End BuySellAds Ad Code -->
<!-- BuySellAds Zone Code -->
<div id="bsap_1277044" class="bsarocks bsap_c39a163a3eecd8aadac62be710ab632f"></div>
<!-- End BuySellAds Zone Code -->
+
</body>
</html>
View
@@ -1,7 +1,7 @@
<li><a href="?prop=box-sizing">box sizing</a></li>
<li><a href="?prop=hsla">hsla colors</a></li>
<li><a href="?prop=text-shadow">text shadow</a></li>
-<li><a href="?prop=word-wrap">word wrap *</a></li>
+<li><a href="?prop=word-wrap">word wrap</a></li>
<li><a href="?prop=rgba">rgba colors</a></li>
<li><a href="?prop=translate-transform">translate</a></li>
@@ -1,33 +1,33 @@
.object {
- -webkit-perspective: 300;
- -webkit-transform-style: preserve-3d;
- -moz-perspective: 300;
- -moz-transform-style: preserve-3d;
- -ms-perspective: 300;
- -ms-transform-style: preserve-3d;
- perspective: 300;
- transform-style: preserve-3d;
+ -webkit-perspective: 300;
+ -webkit-transform-style: preserve-3d;
+ -moz-perspective: 300;
+ -moz-transform-style: preserve-3d;
+ -ms-perspective: 300;
+ -ms-transform-style: preserve-3d;
+ perspective: 300;
+ transform-style: preserve-3d;
}
- .card {
- -webkit-transition: -webkit-transform 1s linear;
- -moz-transition: -moz-transform 1s linear;
- -ms-transition: -ms-transform 1s linear;
- -o-transition: -o-transform 1s linear;
- transition: transform 1s linear;
- }
+ .card {
+ -webkit-transition: -webkit-transform 1s linear;
+ -moz-transition: -moz-transform 1s linear;
+ -ms-transition: -ms-transform 1s linear;
+ -o-transition: -o-transform 1s linear;
+ transition: transform 1s linear;
+ }
- .cfront {
- -webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
- -ms-backface-visibility: hidden;
- backface-visibility: hidden;
- }
-
- .flipped {
- -webkit-transform: rotateY(180deg);
- -moz-transform: rotateY(180deg);
- -ms-transform: rotateY(180deg);
- -o-transform: rotateY(180deg);
- transform: rotateY(180deg);
- }
+ .cfront {
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+ backface-visibility: hidden;
+ }
+
+ .flipped {
+ -webkit-transform: rotateY(180deg);
+ -moz-transform: rotateY(180deg);
+ -ms-transform: rotateY(180deg);
+ -o-transform: rotateY(180deg);
+ transform: rotateY(180deg);
+ }
@@ -1,9 +1,9 @@
.element {
- background: #d78965;
- padding: 30px;
- -webkit-background-clip: content-box;
- -moz-background-clip: content-box;
- -o-background-clip: content-box;
- -ms-background-clip: content-box;
- background-clip: content-box; /* border-box, padding-box */
+ background: #d78965;
+ padding: 30px;
+ -webkit-background-clip: content-box;
+ -moz-background-clip: content-box;
+ -o-background-clip: content-box;
+ -ms-background-clip: content-box;
+ background-clip: content-box; /* border-box, padding-box */
}
@@ -1,10 +1,10 @@
.element {
- background: #d78965;
- border: solid 1px white;
- -webkit-background-origin: content-box;
- -moz-background-origin: content-box;
- -o-background-origin: content-box;
- -ms-background-origin: content-box;
- background-clip: content-box; /* padding box, border-box */
- padding: 30px;
+ background: #d78965;
+ border: solid 1px white;
+ -webkit-background-origin: content-box;
+ -moz-background-origin: content-box;
+ -o-background-origin: content-box;
+ -ms-background-origin: content-box;
+ background-clip: content-box; /* padding box, border-box */
+ padding: 30px;
}
@@ -1,5 +1,5 @@
.element {
- background: url(images/example.png) center center no-repeat;
- -moz-background-size: 100% 100%;
- background-size: 100% 100%;
+ background: url(images/example.png) center center no-repeat;
+ -moz-background-size: 100% 100%;
+ background-size: 100% 100%;
}
@@ -1,6 +1,6 @@
.element {
- border-width: 20px;
- -webkit-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
- -moz-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
- border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
+ border-width: 20px;
+ -webkit-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
+ -moz-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
+ border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
}
@@ -1,11 +1,11 @@
.element {
- -webkit-border-radius: 10px 11px 12px 13px;
- -moz-border-radius: 10px 11px 12px 13px;
- border-radius: 10px 11px 12px 13px;
+ -webkit-border-radius: 10px 11px 12px 13px;
+ -moz-border-radius: 10px 11px 12px 13px;
+ border-radius: 10px 11px 12px 13px;
}
.element2 {
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
- border-radius: 10px;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
}
@@ -1,5 +1,5 @@
.element {
- -webkit-box-shadow: #000 5px 5px 10px 3px inset;
- -moz-box-shadow: #000 10px 10px 10px 3px inset; /* color, h-offset, v-offset, blur, spread */
- box-shadow: #000 10px 10px 10px 3px inset; /* inset is optional */
+ -webkit-box-shadow: #000 5px 5px 10px 3px inset;
+ -moz-box-shadow: #000 10px 10px 10px 3px inset; /* color, h-offset, v-offset, blur, spread */
+ box-shadow: #000 10px 10px 10px 3px inset; /* inset is optional */
}
@@ -1,7 +1,7 @@
.element {
- width: 200px;
- padding: 0 30px;
- -webkit-box-sizing: border-box; /* content-box */
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+ width: 200px;
+ padding: 0 30px;
+ -webkit-box-sizing: border-box; /* content-box */
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
@@ -1 +1 @@
-Allows you to change the way the browser calculates the width of an element, that is, whether or not to include padding, borders, and margins, in the width or height calculation.
+Allows you to change how the browser calculates the width of an element, that is, whether or not to include padding, borders, and margins, in the width or height calculation.
@@ -1,4 +1,5 @@
.element {
- width: -moz-calc(100% + 20px);
- width: calc(100% + 20px);
+ width: -webkit-calc(100% + 20px);
+ width: -moz-calc(100% + 20px);
+ width: calc(100% + 20px);
}
@@ -1,5 +1,5 @@
<p><strong>Standard Syntax:</strong><br>
-IE9+</p>
+IE9+, Firefox 16+</p>
<p><strong>Vendor Prefix:</strong><br>
-Firefox 4+</p>
+Firefox 4+, Chrome 19+, Safari 6+</p>
@@ -1,4 +1,4 @@
.element {
- background: -webkit-canvas(mycanvas);
- background: -moz-element(mycanvas);
+ background: -webkit-canvas(mycanvas);
+ background: -moz-element(mycanvas);
}
@@ -1,7 +1,7 @@
.parent {
- color: lightgreen;
+ color: lightgreen;
}
- .child {
- background-color: currentColor;
- }
+ .child {
+ background-color: currentColor;
+ }
@@ -1,7 +1,7 @@
.element:hover {
- cursor: none;
+ cursor: none;
}
.element2:hover {
- cursor: context-menu;
+ cursor: context-menu;
}
@@ -1,20 +1,20 @@
.element {
- display: -ms-grid;
+ display: -ms-grid;
}
.exclusion {
- -ms-grid-row: 2;
- -ms-grid-column: 2;
- background-color: lime;
- -ms-wrap-side: both;
- float: -ms-positioned;
- padding: 10px;
- -ms-wrap-margin: 15px;
+ -ms-grid-row: 2;
+ -ms-grid-column: 2;
+ background-color: lime;
+ -ms-wrap-side: both;
+ float: -ms-positioned;
+ padding: 10px;
+ -ms-wrap-margin: 15px;
}
.inline-text {
- -ms-grid-row: 1;
- -ms-grid-column: 1;
- -ms-grid-column-span: 3;
- -ms-grid-row-span: 3;
+ -ms-grid-row: 1;
+ -ms-grid-column: 1;
+ -ms-grid-column-span: 3;
+ -ms-grid-row-span: 3;
}
@@ -1,15 +1,15 @@
.element {
- -webkit-filter: hue-rotate(80deg);
+ -webkit-filter: hue-rotate(80deg);
}
.element2 {
- -webkit-filter: blur(3px);
+ -webkit-filter: blur(3px);
}
.element3 {
- -webkit-filter: sepia(80%);
+ -webkit-filter: sepia(80%);
}
.element4 {
- -webkit-filter: grayscale(100%);
+ -webkit-filter: grayscale(100%);
}
Oops, something went wrong.

0 comments on commit 9005ac8

Please sign in to comment.