Skip to content

Instantly share code, notes, and snippets.

@alexeyten

alexeyten/dabblet.css

Forked from anonymous/dabblet.css
Created March 30, 2012 07:01
Download ZIP

Revisions

  1. alexeyten revised this gist Mar 30, 2012. 3 changed files with 27 additions and 8 deletions.
    31 changes: 25 additions & 6 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,17 +1,36 @@
    /**
    * The first commented line is your dabblet’s title
    * Candy
    */
    html {
    background-color: silver;
    background-image: linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 75%, gray),
    linear-gradient(45deg, gray 26%, transparent 26%, transparent 75%, gray 75%, gray);
    background-size:20px 20px;
    background-position:0 0, 10px 10px;
    min-height: 100%;
    }

    div {
    min-height: 100%;
    background: silver;
    background-image: repeating-linear-gradient(-45deg, silver, silver 25px, gray 26px, gray 50px, silver 51px);
    width: 400px;
    height: 400px;
    transition: background 1s linear;
    height: 16px;
    margin: 10em 0 0 20em;
    background-image:
    linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.25) 8px, rgba(255,255,255,0) 8px),
    repeating-linear-gradient(-45deg, rgba(62,94,207,0.7), rgba(62,94,207,0.7) 10px, rgba(0,0,0,0) 10px, rgba(0,0,0,0) 20px, rgba(62,94,207,0.7) 20px),
    linear-gradient(rgba(96,148,240,0.5),rgba(178,215,251,0.5));
    background-size: 28px 28px;
    transition: background-position 1000s 9999s linear;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: repeat-x, repeat, repeat;
    background-clip: padding-box;
    border-radius: 100px;
    border: 1px solid rgba(0,0,0,.2);
    }



    div:hover {
    background-image: repeating-linear-gradient(45deg, silver, silver 25px, gray 26px, gray 50px, silver 51px);
    background-position: 0 0, 0 50000px, 0 0;
    transition: background-position 1000s 0s linear;
    }
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,3 @@
    <!-- content to be placed inside <body>…</body> -->

    <div>x</div>
    <div></div>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"separate","seethrough":"1","prefixfree":"1","page":"result"}
    {"view":"separate","seethrough":"1","prefixfree":"1","page":"css"}
  2. alexeyten revised this gist Mar 30, 2012. 3 changed files with 11 additions and 8 deletions.
    15 changes: 9 additions & 6 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,13 +2,16 @@
    * The first commented line is your dabblet’s title
    */
    div {
    min-height: 100%;
    background: silver;
    background-image: linear-gradient(45deg, silver 25%, gray 25%, gray 50%, silver 50%, silver 75%, gray 75%);
    background-size: 120px 120px;
    background-repeat: no-repeat;
    background-image: repeating-linear-gradient(-45deg, silver, silver 25px, gray 26px, gray 50px, silver 51px);
    width: 400px;
    height: 400px;
    transition: background 1s linear;
    }

    div {
    margin: 5em;
    height: 20em;


    div:hover {
    background-image: repeating-linear-gradient(45deg, silver, silver 25px, gray 26px, gray 50px, silver 51px);
    }
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,3 @@
    <!-- content to be placed inside <body>…</body> -->

    <div>asd</div>
    <div>x</div>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"separate","seethrough":"1","prefixfree":"1","page":"css"}
    {"view":"separate","seethrough":"1","prefixfree":"1","page":"result"}
  3. @invalid-email-address Anonymous created this gist Mar 30, 2012.
    14 changes: 14 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    /**
    * The first commented line is your dabblet’s title
    */
    div {
    background: silver;
    background-image: linear-gradient(45deg, silver 25%, gray 25%, gray 50%, silver 50%, silver 75%, gray 75%);
    background-size: 120px 120px;
    background-repeat: no-repeat;
    }

    div {
    margin: 5em;
    height: 20em;
    }
    3 changes: 3 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <!-- content to be placed inside <body>…</body> -->

    <div>asd</div>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"separate","seethrough":"1","prefixfree":"1","page":"css"}