Skip to content
Browse files

different order of pseudo elements/stacks; content paper stacks; more…

… copy & code comments about negative z-index; button tweaks; dimmed footer
  • Loading branch information...
1 parent d3392bb commit cee4e6cdfc4de9e38300d07030ae5e782394436f @kremalicious committed May 13, 2011
Showing with 167 additions and 66 deletions.
  1. +19 −6 index.html
  2. +148 −60 style/style.css
View
25 index.html
@@ -38,18 +38,31 @@
<h1>How It Works</h1>
- <p>The main work is done with a combination of everyone's favorite CSS pseudo elements :before/:after <span class="amp">&amp;</span> CSS transforms. No additional markup elements are required.</p>
+ <p>The main work is done with a combination of everyone's favorite CSS pseudo elements :before/:after <span class="amp">&amp;</span> CSS transforms. No additional markup elements are required. Placing the pseudo elements behind the content of the element they're injected on is achieved by utilising negative z-index values.</p>
<p>The css uses relative values a lot so the paper stacks will resize proportionally depending on the screen size and wrapper css.</p>
-
+
+ <p>All you have to do is include the .paperstack css rules <span class="amp">&amp;</span> give your content wrapper this class.</p>
+
+ <h1>Within Content</h1>
+
+ <section>
+
+ <article class="paperstack">
+ <p>By adjusting z-index this works within content too.</p>
+ </article>
+
+ <article class="paperstack">
+ <p>And it will automatically grow or shrink depending on the content placed within so this sentence could really be long without destroying the stacks</p>
+ </article>
+
+ </section>
<h1>Browser Support</h1>
<p>This demo should work in all modern browsers including IE9. While IE8 understands pseudo elements it won't display CSS transforms.</p>
- <h1>Use Me, Fork Me</h1>
-
- <p>All you have to do is include the .paperstack css rules <span class="amp">&amp;</span> give your content wrapper this class.</p>
+ <h1>Use Me, Fork Me</h1>
<p>You can <a href="style/style.css">use the css</a> right away or fork this little site along with the css file <a href="https://github.com/kremalicious/csspaperstack">on Github</a>.</p>
@@ -58,7 +71,7 @@
</article>
<footer>
- <p><small>A small experiment by <a href="http://matthiaskretschmann.com">matthias kretschmann</a> | <a href="https.//twitter.com/kremalicious">@kremalicious</a></small></p>
+ <p><small>A small experiment by <a href="http://matthiaskretschmann.com">matthias kretschmann</a> | <a href="https://twitter.com/kremalicious">@kremalicious</a></small></p>
</footer>
</div>
View
208 style/style.css
@@ -156,8 +156,8 @@ a:hover {
*/
html {
- background: #e6e6e6 url(texture.png) repeat left top;
- padding: 1% 5%;
+ background: #eff1f2 url(texture.png) repeat left top;
+
}
body {
@@ -168,6 +168,7 @@ article h1 {
font-size: 1.6em;
margin: 1em 0 .5em 0;
text-align: left;
+ clear: both;
}
article p {
@@ -178,70 +179,135 @@ article p {
max-width: 640px;
min-width: 240px;
margin: 30px auto;
+ padding: 1% 5%;
}
-#main > header {
- padding: 4% 0;
- border-bottom: 3px double #d3cab7;
- border-top: 3px double #d3cab7;
- margin-bottom: 3em;
- position: relative;
- text-align: center;
-}
-
- #main > header:before,
- #main > header:after {
- content: "";
- display: block;
- width: 100%;
- height: 1px;
- position: absolute;
- left: 0;
+ #main > header {
+ padding: 4% 0;
+ border-bottom: 3px double #d3cab7;
+ margin-bottom: 3em;
+ position: relative;
+ text-align: center;
}
- #main > header:before {
- top: -2px;
- border-top: 3px double #fff;
- }
+ #main > header:after {
+ content: "";
+ display: block;
+ width: 100%;
+ height: 1px;
+ position: absolute;
+ left: 0;
+ }
+
+ #main > header:after {
+ bottom: -4px;
+ border-bottom: 3px double #fff;
+ }
- #main > header:after {
- bottom: -4px;
- border-bottom: 3px double #fff;
+ #main > header h1 {
+ font-size: 4em;
+ margin-bottom: .2em;
+ }
+
+ #main > header p {
+ font-style: italic;
+ }
+
+ #main > footer {
+ text-align: center;
+ margin-top: 2em;
+ padding-top: 1em;
+ border-top: 3px double #d3cab7;
+ position: relative;
}
+
+ #main > footer:before {
+ content: "";
+ display: block;
+ width: 100%;
+ height: 5px;
+ position: absolute;
+ left: 0;
+ top: -2px;
+ border-top: 3px double #fff;
+ }
+
+aside {
+ max-width: 790px;
+ min-width: 240px;
+ margin: 1em auto 2em auto;
+ font-size: .75em;
+ text-align: right;
+ font-family: 'AllerBold';
+}
- #main > header h1 {
- font-size: 4em;
- margin-bottom: .2em;
+
+
+ aside a {
+ border: 1px solid #d0d6d9;
+ border-bottom-color: #fff;
+ padding: 5px 15px;
+ line-height: 1em;
+ display: inline-block;
+ -webkit-border-radius: 20px;
+ -moz-border-radius: 20px;
+ border-radius: 20px;
+ -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+ -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+ box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+ -webkit-transition: all .2s ease-in-out;
+ -moz-transition: all .2s ease-in-out;
+ -o-transition: all .2s ease-in-out;
+ transition: all .2s ease-in-out;
}
- #main > header p {
- font-style: italic;
+ aside a:hover {
+ -webkit-box-shadow: inset 0 -1px 1px rgba(0,0,0,.1);
+ -moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,.1);
+ box-shadow: inset 0 -1px 1px rgba(0,0,0,.1);
+ border-bottom-color: #d0d6d9;
+ border-top-color: #fff;
+ color: #2e5c72;
+ background: rgb(79,192,224);
+ background: -moz-linear-gradient(top, rgba(79,192,224,.3) 0%, rgba(29,136,180,.3) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,192,224,.3)), color-stop(100%,rgba(29,136,180,.3)));
+ background: -webkit-linear-gradient(top, rgba(79,192,224,.3) 0%,rgba(29,136,180,.3) 100%);
+ background: -o-linear-gradient(top, rgba(79,192,224,.3) 0%,rgba(29,136,180,.3) 100%);
+ background: -ms-linear-gradient(top, rgba(79,192,224,.3) 0%,rgba(29,136,180,.3) 100%);
+ background: linear-gradient(top, rgba(79,192,224,.3) 0%,rgba(29,136,180,.3) 100%);
}
-#main > footer {
- text-align: center;
- margin-top: 2em;
- padding-top: 1em;
- border-top: 3px double #d3cab7;
- position: relative;
+ article section {
+ width: 108%;
+ float: left;
+ margin: 1em 0 1em -8%;
+ }
+
+ article section article {
+ float: left;
+ width: 25%;
+ margin: 1em 0 1em 8%;
+ }
+
+footer p {
+ margin-bottom: 1em;
+ opacity: .5;
+ -webkit-transition: opacity .2s ease-in-out;
+ -moz-transition: opacity .2s ease-in-out;
+ -o-transition: opacity .2s ease-in-out;
+ transition: opacity .2s ease-in-out;
}
- #main > footer:before {
- content: "";
- display: block;
- width: 100%;
- height: 5px;
- position: absolute;
- left: 0;
- top: -2px;
- border-top: 3px double #fff;
+ footer:hover p {
+ opacity: 1;
}
/* ONE CLASS TO RULE ALL PAPER STACKS */
.paperstack {
padding: 4% 8%;
position: relative;
+ z-index: 0; /* important or the pseudo elements will be over the content */
}
/* Paper background */
@@ -285,7 +351,7 @@ article p {
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
- z-index: -1; /*positioning behind the main content, positive values won't work*/
+ z-index: -1; /* makes element display over the wrapper but behind wrapper content */
}
.paperstack:after {
@@ -297,28 +363,42 @@ article p {
transform: rotate(4deg);
z-index: -2; /*positioning behind the :before element*/
}
+
+/* smaller paperstack within content */
+article section .paperstack:before {
+ left: 3%;
+ width: 98%;
+
+}
+
+article section .paperstack:after {
+ width: 100%;
+ left: 3%;
+ height: 105%;
+}
+
/* END PAPER STACKS */
.button, .button:visited {
display: inline-block;
position: relative;
padding: 1% 3%;
margin: 2em 0;
- color: #cfd1d0;
+ color: #213328;
font-family: 'AllerBold';
font-weight: bold;
text-align: center;
- text-shadow: 0 -1px 0 rgba(0,0,0,.8);
- background: #487457;
- background: -moz-linear-gradient(top, #518363 0%, #487457 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#518363), color-stop(100%,#487457));
- background: -webkit-linear-gradient(top, #518363 0%,#487457 100%);
- background: -o-linear-gradient(top, #518363 0%,#487457 100%);
- background: -ms-linear-gradient(top, #518363 0%,#487457 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#518363', endColorstr='#487457',GradientType=0 );
- background: linear-gradient(top, #518363 0%,#487457 100%);
+ text-shadow: 0 1px 0 rgba(255,255,255,.4);
+ background: #66a076;
+ background: -moz-linear-gradient(top, #66a076 0%, #558763 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66a076), color-stop(100%,#558763));
+ background: -webkit-linear-gradient(top, #66a076 0%,#558763 100%);
+ background: -o-linear-gradient(top, #66a076 0%,#558763 100%);
+ background: -ms-linear-gradient(top, #66a076 0%,#558763 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66A076', endColorstr='#558763',GradientType=0 );
+ background: linear-gradient(top, #66a076 0%,#558763 100%);
width: 43%;
- border: 1px solid #213328;
+ border: 1px solid #3a5c44;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
@@ -346,8 +426,16 @@ article p {
}
.button:hover {
- color: #fff;
- border: 1px solid #213328;
+ border: 1px solid #3a5c44;
+ background: #6ba878;
+ color: #000;
+ background: -moz-linear-gradient(top, #6ba878 0%, #5b9168 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6ba878), color-stop(100%,#5b9168));
+ background: -webkit-linear-gradient(top, #6ba878 0%,#5b9168 100%);
+ background: -o-linear-gradient(top, #6ba878 0%,#5b9168 100%);
+ background: -ms-linear-gradient(top, #6ba878 0%,#5b9168 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6BA878', endColorstr='#5B9168',GradientType=0 );
+ background: linear-gradient(top, #6ba878 0%,#5b9168 100%);
}
/* @group Non-semantic helper classes */

0 comments on commit cee4e6c

Please sign in to comment.
Something went wrong with that request. Please try again.