|
|
(6 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
− | <html><nowiki>
| |
− | <head>
| |
− | <style>
| |
− | body {
| |
− | background-color: #1a1a1a;
| |
− | font-family: calibri, "helvetica neue", helvetica, arial, sans-serif;
| |
− | color: #232323;
| |
− | }
| |
| | | |
− | h2 {
| |
− | font-size: 16px;
| |
− | font-weight: bold;
| |
− | }
| |
− |
| |
− | #content {
| |
− | position: relative;
| |
− | width: 965px;
| |
− | margin: 0 auto;
| |
− | padding: 5px 5px 5px 5px;
| |
− | background: black;
| |
− | color: black;
| |
− | line-height: 1.5em;
| |
− | z-index: 2;
| |
− | }
| |
− |
| |
− | .wrapper {
| |
− | margin: 0 auto;
| |
− | width: 950px;
| |
− | height: 500px;
| |
− | }
| |
− |
| |
− | .description {
| |
− | margin-top: 60px;
| |
− | font-size: 28px;
| |
− | line-height: 28px;
| |
− | color: #fff;
| |
− | font-family: cambria, georgia, serif;
| |
− | }
| |
− |
| |
− | .description a {
| |
− | color: #fff;
| |
− | }
| |
− |
| |
− | .block {
| |
− | margin-bottom: 30px;
| |
− | -webkit-border-radius: 2px;
| |
− | border-radius: 2px;
| |
− | }
| |
− |
| |
− | .col1, .col2, .col3 {
| |
− | float: left;
| |
− | -webkit-hyphens:auto;
| |
− | -moz-hyphens:auto;
| |
− | -ms-hyphens:auto;
| |
− | hyphens:auto;
| |
− | word-wrap:break-word;
| |
− | font-size: 12px;
| |
− | margin: 5px 10px;
| |
− | }
| |
− |
| |
− | .col1, .col2, .col3 {
| |
− | width: 180px;
| |
− | }
| |
− |
| |
− | .block1 {
| |
− | background-color: #A0E0A9;
| |
− | }
| |
− |
| |
− | .block2 {
| |
− | background-color: #00ADA7;
| |
− | }
| |
− |
| |
− | .block-wrapper {
| |
− | margin: 40px auto 30px auto;
| |
− | text-align: left;
| |
− | }
| |
− |
| |
− | .block-wrapper label {
| |
− | padding: 5px 10px;
| |
− | position: relative;
| |
− | z-index: 20;
| |
− | display: block;
| |
− | height: 30px;
| |
− | cursor: pointer;
| |
− | color: #333;
| |
− | line-height: 30px;
| |
− | font-size: 18px;
| |
− | font-weight: bold;
| |
− | text-shadow: 0px 1px #ccc;
| |
− | }
| |
− |
| |
− | .block-wrapper label:hover {
| |
− | background: #fff;
| |
− | -webkit-border-radius: 2px;
| |
− | border-radius: 2px;
| |
− | }
| |
− |
| |
− | .block-wrapper input:checked + label,
| |
− | .block-wrapper input:checked + label:hover {
| |
− | background-color: #ccc;
| |
− | -webkit-border-radius: 2px;
| |
− | border-radius: 2px;
| |
− | }
| |
− |
| |
− | .block-wrapper input {
| |
− | display: none;
| |
− | }
| |
− |
| |
− | .block-wrapper .block-content {
| |
− | background-color: #fff;
| |
− | margin-top: -1px;
| |
− | overflow: hidden;
| |
− | height: 0px;
| |
− | position: relative;
| |
− | z-index: 10;
| |
− | -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
| |
− | -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
| |
− | -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
| |
− | -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
| |
− | transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
| |
− | -webkit-border-radius: 2px;
| |
− | border-radius: 2px;
| |
− | }
| |
− |
| |
− | .block-wrapper input:checked ~ .block-content {
| |
− | -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
| |
− | -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
| |
− | -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
| |
− | -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
| |
− | transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
| |
− | }
| |
− |
| |
− | .block-wrapper input:checked ~ .block-content {
| |
− | height: 160px;
| |
− | }
| |
− | </style>
| |
− | </head>
| |
− | <body>
| |
− | <div class="wrapper">
| |
− | <div class="description">
| |
− | <p>A simple accordion using only CSS3. Huzzah!</p>
| |
− | </div>
| |
− | <div class="block-wrapper">
| |
− | <div class="block block1">
| |
− | <input id="bl1" name="bl1" type="checkbox" />
| |
− | <label for="bl1">Click to expand</label>
| |
− | <div class="block-content">
| |
− | <br><!-- Hacky, I know. -->
| |
− | <div class="col1">
| |
− | <h2>Col1</h2>
| |
− | <p>The surface is fine and powdery. I can kick it up loosely with my toe. </p>
| |
− | </div>
| |
− | <div class="col2">
| |
− | <h2>Col2</h2>
| |
− | <p>It does adhere in fine layers, like powdered charcoal, to the sole and sides of my boots.</p>
| |
− | </div>
| |
− | <div class="col3">
| |
− | <h2>Col3</h2>
| |
− | <p>I only go in a small fraction of an inch, maybe an eighth of an inch, but I can see the footprints of my boots and the treads in the fine, sandy particles.</p>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div class="block block2">
| |
− | <input id="bl2" name="bl2" type="checkbox" />
| |
− | <label for="bl2">Click to expand me too!</label>
| |
− | <div class="block-content">
| |
− | <br><!-- Hacky, I know. -->
| |
− | <div class="col1">
| |
− | <h2>Col1</h2>
| |
− | <p>The Earth is the only world known so far to harbor life.</p>
| |
− | </div>
| |
− | <div class="col2">
| |
− | <h2>Col2</h2>
| |
− | <p>There is nowhere else, at least in the near future, to which our species could migrate.</p>
| |
− | </div>
| |
− | <div class="col3">
| |
− | <h2>Col3</h2>
| |
− | <p>Visit, yes. Settle, not yet. Like it or not, for the moment the Earth is where we make our stand.</p>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | </div> <!-- End .log -->
| |
− | </div> <!-- End .wrapper -->
| |
− | </body>
| |
− | </nowiki>
| |
− | </html>
| |