Skip to content

Instantly share code, notes, and snippets.

@oli

oli/dabblet.css

Created March 26, 2012 06:56
Download ZIP

Revisions

  1. oli revised this gist Mar 26, 2012. 2 changed files with 2 additions and 1 deletion.
    1 change: 1 addition & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    /* Styling hr elements */
    /* ref: http://html5doctor.com/small-hr-element/ */
    body {background: #ddd;}
    h1 {font-weight: normal; font-size: 1.5em;}
    ol {margin-top: 5em;}
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","seethrough":"","prefixfree":"1","page":"html"}
    {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
  2. oli created this gist Mar 26, 2012.
    44 changes: 44 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    /* Styling hr elements */
    body {background: #ddd;}
    h1 {font-weight: normal; font-size: 1.5em;}
    ol {margin-top: 5em;}
    hr {margin: 1.5em 0;}
    hr:nth-child(2) {
    border: 0;
    border-top: 1px solid #999;
    }
    hr:nth-child(3) {
    border: 0;
    border-top: 6px dashed #bbb;
    }
    hr:nth-child(4) {
    border: 0;
    border-top: 6px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.7);
    }
    .borders {
    position: relative;
    border: 0;
    }
    .borders:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:4px;
    left:4px;
    right:4px;
    bottom:4px;
    border:4px solid #fff;
    background:#4aa929;
    }
    .borders:after {
    content:"";
    position:absolute;
    z-index:-1;
    top:6px;
    left:6px;
    right:6px;
    bottom:6px;
    border:2px solid #999;
    background:#4aa929;
    }
    16 changes: 16 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <h1>Styling <code>&lt;hr></code> elements</h1>
    <div>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr class="borders">
    </div>
    <ol>
    <li>default <code>&lt;hr></code>
    <li>1px <code>border-top</code>
    <li>6px dashed <code>border-top</code>
    <li>border with <code>box-shadow</code>
    <li><code>&lt;hr></code> with <a href="http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/">gen content borders</a>
    </ol>

    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split","seethrough":"","prefixfree":"1","page":"html"}