Skip to content

Instantly share code, notes, and snippets.

@csssecrets

csssecrets/dabblet.css

Last active November 9, 2022 07:31
Show Gist options
  • Save csssecrets/d9f243ddd7dbffa341a4 to your computer and use it in GitHub Desktop.
Save csssecrets/d9f243ddd7dbffa341a4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. csssecrets revised this gist Jan 30, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,7 @@ main {
    position: relative;
    margin: 0 auto;
    padding: 1em;
    width: 23em;
    max-width: 23em;
    background: hsla(0,0%,100%,.25) border-box;
    overflow: hidden;
    border-radius: .3em;
  2. csssecrets revised this gist Jan 30, 2015. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,8 +6,8 @@ body {
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding-top: calc(50vh - 5em);
    font: 280%/1.6 Baskerville, Palatino, serif;
    padding-top: calc(50vh - 6em);
    font: 150%/1.6 Baskerville, Palatino, serif;
    }

    body, main::before {
    @@ -18,7 +18,7 @@ main {
    position: relative;
    margin: 0 auto;
    padding: 1em;
    width: 19em;
    width: 23em;
    background: hsla(0,0%,100%,.25) border-box;
    overflow: hidden;
    border-radius: .3em;
  3. csssecrets revised this gist Jan 30, 2015. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -38,4 +38,4 @@ main::before {
    }

    blockquote { font-style: italic }
    blockquote footer { font-style: normal; }
    blockquote cite { font-style: normal; }
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    <main>
    <blockquote>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”</em>
    <footer>— <cite>Oscar Wilde, The Picture of Dorian Gray</cite><footer>
    <footer>— <cite>Oscar Wilde, The Picture of Dorian Gray</cite></footer>
    </blockquote>
    </main>
  4. csssecrets revised this gist Jan 30, 2015. 2 changed files with 11 additions and 5 deletions.
    9 changes: 6 additions & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@ body {
    box-sizing: border-box;
    margin: 0;
    padding-top: calc(50vh - 5em);
    font: 180%/1.6 Baskerville, Palatino, serif;
    font: 280%/1.6 Baskerville, Palatino, serif;
    }

    body, main::before {
    @@ -18,7 +18,7 @@ main {
    position: relative;
    margin: 0 auto;
    padding: 1em;
    width: 20em;
    width: 19em;
    background: hsla(0,0%,100%,.25) border-box;
    overflow: hidden;
    border-radius: .3em;
    @@ -35,4 +35,7 @@ main::before {
    z-index: -1;
    -webkit-filter: blur(20px);
    filter: blur(20px);
    }
    }

    blockquote { font-style: italic }
    blockquote footer { font-style: normal; }
    7 changes: 5 additions & 2 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,5 @@
    <main><em>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”</em>
    <br />— Oscar Wilde, The Picture of Dorian Gray</main>
    <main>
    <blockquote>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”</em>
    <footer>— <cite>Oscar Wilde, The Picture of Dorian Gray</cite><footer>
    </blockquote>
    </main>
  5. csssecrets revised this gist Jan 30, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@ main {
    margin: 0 auto;
    padding: 1em;
    width: 20em;
    background: hsla(0,0%,100%,.2) border-box;
    background: hsla(0,0%,100%,.25) border-box;
    overflow: hidden;
    border-radius: .3em;
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
  6. csssecrets revised this gist Jan 30, 2015. 2 changed files with 8 additions and 5 deletions.
    11 changes: 7 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,8 +6,8 @@ body {
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding-top: calc(50vh - 6em);
    font: 150%/1.6 Baskerville, Palatino, serif;
    padding-top: calc(50vh - 5em);
    font: 180%/1.6 Baskerville, Palatino, serif;
    }

    body, main::before {
    @@ -19,8 +19,12 @@ main {
    margin: 0 auto;
    padding: 1em;
    width: 20em;
    background: hsla(0,0%,100%,.3);
    background: hsla(0,0%,100%,.2) border-box;
    overflow: hidden;
    border-radius: .3em;
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
    }

    main::before {
    @@ -29,7 +33,6 @@ main::before {
    top: 0; right: 0; bottom: 0; left: 0;
    margin: -30px;
    z-index: -1;
    xbackground: red;
    -webkit-filter: blur(20px);
    filter: blur(20px);
    }
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
  7. csssecrets revised this gist Jan 30, 2015. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -27,8 +27,9 @@ main::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: -50px;
    margin: -30px;
    z-index: -1;
    xbackground: red;
    -webkit-filter: blur(30px);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    }
  8. csssecrets revised this gist Jan 30, 2015. 1 changed file with 17 additions and 2 deletions.
    19 changes: 17 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,17 +3,32 @@
    */

    body {
    background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding-top: calc(50vh - 6em);
    font: 150%/1.6 Baskerville, Palatino, serif;
    }

    body, main::before {
    background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;
    }

    main {
    position: relative;
    margin: 0 auto;
    padding: 1em;
    width: 20em;
    background: rgba(255,255,255,.3);
    background: hsla(0,0%,100%,.3);
    overflow: hidden;
    }

    main::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: -50px;
    z-index: -1;
    xbackground: red;
    -webkit-filter: blur(30px);
    }
  9. csssecrets revised this gist Jan 30, 2015. 2 changed files with 3 additions and 3 deletions.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@ body {
    font: 150%/1.6 Baskerville, Palatino, serif;
    }

    div {
    main {
    margin: 0 auto;
    padding: 1em;
    width: 20em;
    4 changes: 2 additions & 2 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,2 @@
    <div><em>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”</em>
    <br />— Oscar Wilde, The Picture of Dorian Gray</div>
    <main><em>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”</em>
    <br />— Oscar Wilde, The Picture of Dorian Gray</main>
  10. csssecrets revised this gist Jan 30, 2015. No changes.
  11. csssecrets revised this gist Jan 30, 2015. 2 changed files with 5 additions and 5 deletions.
    8 changes: 4 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,13 +7,13 @@ body {
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding-top: calc(50vh - 6em);
    font: 150%/1.6 Baskerville, Palatino, serif;
    }

    div {
    margin: 10em auto 0;
    margin: 0 auto;
    padding: 1em;
    width: 22em;
    width: 20em;
    background: rgba(255,255,255,.3);
    xcolor: white;
    font: 130%/1.6 Baskerville, Palatino, serif;
    }
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,2 @@
    <div>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”
    <div><em>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”</em>
    <br />— Oscar Wilde, The Picture of Dorian Gray</div>
  12. csssecrets created this gist Jan 30, 2015.
    19 changes: 19 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    /**
    * Frosted glass effect
    */

    body {
    background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0;
    }

    div {
    margin: 10em auto 0;
    padding: 1em;
    width: 22em;
    background: rgba(255,255,255,.3);
    xcolor: white;
    font: 130%/1.6 Baskerville, Palatino, serif;
    }
    2 changes: 2 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <div>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”
    <br />— Oscar Wilde, The Picture of Dorian Gray</div>
    1 change: 1 addition & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    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-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}