Skip to content

Instantly share code, notes, and snippets.

@koenveldhuizen

koenveldhuizen/dabblet.css

Created February 17, 2012 22:51
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. koenveldhuizen revised this gist Feb 27, 2012. 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
    @@ -18,7 +18,7 @@ float:left;
    width:200px;
    padding:10px 10px 40px 10px;
    background: #fff;
    box-shadow: 0px 0px 5px #000;
    box-shadow: 0px 0px 5px #666;
    }
    img:nth-child(even){transform:rotate(2deg);}
    img:nth-child(3n+1){transform:rotate(-5deg);}
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","prefixfree":"1","page":"css"}
    {"view":"split","seethrough":"","prefixfree":"1","page":"result"}
  2. koenveldhuizen revised this gist Feb 18, 2012. 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
    @@ -33,7 +33,7 @@ z-index: 5;
    }
    /**
    to do:
    use attr alt or title for nicely written tirle on the slab of the picture
    use attr alt or title for nicely written title on the slab of the picture
    some image effect like noise or something like that would be nice :D
    **/

  3. koenveldhuizen revised this gist Feb 17, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","prefixfree":"1","page":"html"}
    {"view":"split","prefixfree":"1","page":"css"}
  4. koenveldhuizen revised this gist Feb 17, 2012. 2 changed files with 16 additions and 17 deletions.
    31 changes: 15 additions & 16 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,20 +1,19 @@
    <!-- content to be placed inside <body>…</body> -->
    <div id="container">
    <a href"#"><img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" title="test" alt="test" /></a>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    </div>

    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","prefixfree":"1","page":"css"}
    {"view":"split","prefixfree":"1","page":"html"}
  5. koenveldhuizen revised this gist Feb 17, 2012. 3 changed files with 8 additions and 10 deletions.
    14 changes: 6 additions & 8 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -31,12 +31,10 @@ transform: scale(1.25);
    position: relative;
    z-index: 5;
    }
    /**
    to do:
    use attr alt or title for nicely written tirle on the slab of the picture
    some image effect like noise or something like that would be nice :D
    **/


    img:after {
    content: attr(alt);
    display:block;
    width:900px;
    height:900px;
    z-index:8;
    position:relative;
    color:#000;}
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <!-- content to be placed inside <body>…</body> -->
    <div id="container">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" title="test" alt="test" />
    <a href"#"><img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" title="test" alt="test" /></a>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","prefixfree":"1","page":"html"}
    {"view":"split","prefixfree":"1","page":"css"}
  6. koenveldhuizen revised this gist Feb 17, 2012. 2 changed files with 12 additions and 1 deletion.
    11 changes: 11 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,8 @@ margin:40px auto;}
    img{
    transition: .30s linear;
    display:block;
    postion:relative;
    z-index:0;
    float:left;
    width:200px;
    padding:10px 10px 40px 10px;
    @@ -29,3 +31,12 @@ transform: scale(1.25);
    position: relative;
    z-index: 5;
    }

    img:after {
    content: attr(alt);
    display:block;
    width:900px;
    height:900px;
    z-index:8;
    position:relative;
    color:#000;}
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <!-- content to be placed inside <body>…</body> -->
    <div id="container">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" title="test" alt="test" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
  7. koenveldhuizen revised this gist Feb 17, 2012. 2 changed files with 17 additions and 13 deletions.
    28 changes: 16 additions & 12 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,20 @@
    <!-- content to be placed inside <body>…</body> -->
    <div id="container">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" /><img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" /><img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" /><img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" /><img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" alt="test"/>
    </div>

    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","prefixfree":"1","page":"css"}
    {"view":"split","prefixfree":"1","page":"html"}
  8. koenveldhuizen revised this gist Feb 17, 2012. 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
    @@ -9,7 +9,7 @@ min-height:100%;
    div#container{
    width:900px;
    margin:40px auto;}
    img{
    img{
    transition: .30s linear;
    display:block;
    float:left;
  9. koenveldhuizen revised this gist Feb 17, 2012. 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
    @@ -10,7 +10,7 @@ div#container{
    width:900px;
    margin:40px auto;}
    img{
    -webkit-transition: .30s linear;
    transition: .30s linear;
    display:block;
    float:left;
    width:200px;
  10. koenveldhuizen revised this gist Feb 17, 2012. 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
    @@ -10,7 +10,7 @@ div#container{
    width:900px;
    margin:40px auto;}
    img{
    transition: .30s linear;
    -webkit-transition: .30s linear;
    display:block;
    float:left;
    width:200px;
  11. koenveldhuizen revised this gist Feb 17, 2012. No changes.
  12. koenveldhuizen revised this gist Feb 17, 2012. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -8,8 +8,9 @@ min-height:100%;
    }
    div#container{
    width:900px;
    margin:0 auto;}
    margin:40px auto;}
    img{
    transition: .30s linear;
    display:block;
    float:left;
    width:200px;
    @@ -24,4 +25,7 @@ background: #fdfbfb;}

    img:hover{
    transform:rotate(0deg);
    transform: scale(1.25);
    position: relative;
    z-index: 5;
    }
  13. koenveldhuizen revised this gist Feb 17, 2012. 1 changed file with 0 additions and 3 deletions.
    3 changes: 0 additions & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -16,7 +16,6 @@ width:200px;
    padding:10px 10px 40px 10px;
    background: #fff;
    box-shadow: 0px 0px 5px #000;
    z-index:0;
    }
    img:nth-child(even){transform:rotate(2deg);}
    img:nth-child(3n+1){transform:rotate(-5deg);}
    @@ -25,6 +24,4 @@ background: #fdfbfb;}

    img:hover{
    transform:rotate(0deg);
    width:300px;
    z-index:8;
    }
  14. koenveldhuizen revised this gist Feb 17, 2012. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -25,7 +25,6 @@ background: #fdfbfb;}

    img:hover{
    transform:rotate(0deg);
    position:relative;
    width:300px;
    z-index:8;
    }
  15. koenveldhuizen created this gist Feb 17, 2012.
    31 changes: 31 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    /**
    * Very simple css3 polaroid styling
    */
    body{
    background: #f06;
    background: linear-gradient(45deg, orange, yellow);
    min-height:100%;
    }
    div#container{
    width:900px;
    margin:0 auto;}
    img{
    display:block;
    float:left;
    width:200px;
    padding:10px 10px 40px 10px;
    background: #fff;
    box-shadow: 0px 0px 5px #000;
    z-index:0;
    }
    img:nth-child(even){transform:rotate(2deg);}
    img:nth-child(3n+1){transform:rotate(-5deg);}
    img:nth-child(2n+1){
    background: #fdfbfb;}

    img:hover{
    transform:rotate(0deg);
    position:relative;
    width:300px;
    z-index:8;
    }
    16 changes: 16 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <!-- content to be placed inside <body>…</body> -->
    <div id="container">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" /><img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" /><img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" /><img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" /><img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200px" />
    </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":"split","prefixfree":"1","page":"css"}