Skip to content

Instantly share code, notes, and snippets.

@csssecrets

csssecrets/dabblet.css

Last active September 19, 2021 15:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save csssecrets/bc32dc20adea2261c731 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save csssecrets/bc32dc20adea2261c731 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. csssecrets revised this gist Feb 1, 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
    @@ -22,5 +22,5 @@ div::before {
    transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: .5em;
    box-shadow: -.1em .1em .3em rgba(0,0,0,.15)
    box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15)
    }
  2. csssecrets revised this gist Jan 31, 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
    @@ -22,5 +22,5 @@ div::before {
    transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: .5em;
    box-shadow: -.1em .1em .3em rgba(0,0,0,.1)
    box-shadow: -.1em .1em .3em rgba(0,0,0,.15)
    }
  3. csssecrets revised this gist Jan 31, 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
    @@ -1,5 +1,5 @@
    /**
    * Folded corner effect — 30deg
    * Folded corner effect — at an angle
    */

    div {
  4. csssecrets revised this gist Jan 31, 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
    @@ -18,8 +18,9 @@ div::before {
    position: absolute;
    top: 0; right: 0;
    width: 1.73em; height: 3em;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.3)) 100% 0 no-repeat;
    transform: translateY(-1.3em) rotate(-30deg); transform-origin: 100% 100%;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
    transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: .5em;
    box-shadow: -.1em .1em .3em rgba(0,0,0,.1)
    }
  5. csssecrets revised this gist Jan 31, 2015. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,9 +6,7 @@ div {
    position: relative;
    width: 12em;
    background: #58a; /* Fallback */
    background:
    linear-gradient(-150deg, transparent 1.5em, #58a 0);

    background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
    padding: 2em;
    color: white;
    font: 100%/1.6 Baskerville, Palatino, serif;
  6. csssecrets revised this gist Jan 31, 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
    @@ -20,7 +20,8 @@ div::before {
    position: absolute;
    top: 0; right: 0;
    width: 1.73em; height: 3em;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) 100% 0 no-repeat;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.3)) 100% 0 no-repeat;
    transform: translateY(-1.3em) rotate(-30deg); transform-origin: 100% 100%;
    border-bottom-left-radius: .5em; box-shadow: -.1em .1em .2em rgba(0,0,0,.1)
    border-bottom-left-radius: .5em;
    box-shadow: -.1em .1em .3em rgba(0,0,0,.1)
    }
  7. csssecrets revised this gist Jan 31, 2015. 1 changed file with 12 additions and 2 deletions.
    14 changes: 12 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,14 +3,24 @@
    */

    div {
    position: relative;
    width: 12em;
    background: #58a; /* Fallback */
    background:
    linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) 100% 0 no-repeat,
    linear-gradient(-150deg, transparent 1.5em, #58a 0);
    background-size: 3em 1.73em, auto;

    padding: 2em;
    color: white;
    font: 100%/1.6 Baskerville, Palatino, serif;
    border-radius: .5em;
    }

    div::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 1.73em; height: 3em;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) 100% 0 no-repeat;
    transform: translateY(-1.3em) rotate(-30deg); transform-origin: 100% 100%;
    border-bottom-left-radius: .5em; box-shadow: -.1em .1em .2em rgba(0,0,0,.1)
    }
  8. csssecrets revised this gist Jan 31, 2015. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,14 @@
    /**
    * Folded corner effect
    * Folded corner effect — 30deg
    */

    div {
    width: 12em;
    background: #58a; /* Fallback */
    background:
    linear-gradient(-135deg, transparent 50%, rgba(0,0,0,.4) 0) 100% 0 no-repeat,
    linear-gradient(-150deg, transparent 1.4em, #58a 0);
    background-size: 2em 2em, auto;
    linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) 100% 0 no-repeat,
    linear-gradient(-150deg, transparent 1.5em, #58a 0);
    background-size: 3em 1.73em, auto;

    padding: 2em;
    color: white;
  9. csssecrets created this gist Jan 31, 2015.
    16 changes: 16 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    /**
    * Folded corner effect
    */

    div {
    width: 12em;
    background: #58a; /* Fallback */
    background:
    linear-gradient(-135deg, transparent 50%, rgba(0,0,0,.4) 0) 100% 0 no-repeat,
    linear-gradient(-150deg, transparent 1.4em, #58a 0);
    background-size: 2em 2em, auto;

    padding: 2em;
    color: white;
    font: 100%/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.”
    — 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","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}