Skip to content

Instantly share code, notes, and snippets.

@maxhoffmann

maxhoffmann/dabblet.css

Created December 20, 2011 09:20
Download ZIP

Revisions

  1. Maximilian Hoffmann revised this gist Aug 9, 2012. No changes.
  2. Maximilian Hoffmann revised this gist Aug 9, 2012. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@ <h3>Small Avatars</h3>
    <h3>Big Avatar</h3>

    <a href="http://twitter.com/max_hoffmann" class="circle">
    <img src="http://behance.vo.llnwd.net/profiles9/545710/5a1ba5c679a44708c9b068d14cd1e7c8.jpg" alt="avatar">
    <img src="http://api.twitter.com/1/users/profile_image?screen_name=max_hoffmann&size=original" alt="avatar">
    </a>

    <h4>Tested and works on:</h4>
    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","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
  3. Maximilian Hoffmann revised this gist Mar 25, 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
    @@ -34,6 +34,6 @@ ul { width: 250px; margin: 0 auto; text-align: left; line-height: 1.8; }
    }
    .circle:hover {
    transition: ease-out 0.3s;
    transform: scale(0.8) rotate(20deg);
    transform: scale(0.8) rotate(20deg) translateZ(0);
    }
    a.circle { color: transparent; } /* IE fix: removes blue border */
    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","prefixfree":"1","page":"html"}
    {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
  4. Maximilian Hoffmann revised this gist Jan 5, 2012. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <h1>CSS3 Border-Radius with Border</h1>

    <p>Square image can be any size. Crossbrowser support. Minimal workaround.</p>
    <p>Square image can be any size. Crossbrowser support. One class only.</p>

    <h3>Small Avatars</h3>

    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","prefixfree":"1","page":"css"}
    {"view":"split-vertical","prefixfree":"1","page":"html"}
  5. Maximilian Hoffmann revised this gist Dec 20, 2011. 2 changed files with 2 additions and 3 deletions.
    3 changes: 1 addition & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -24,8 +24,7 @@ ul { width: 250px; margin: 0 auto; text-align: left; line-height: 1.8; }
    display: inline-block; /* circle wraps image */
    margin: 5px;
    border-radius: 50%; /* relative value */
    padding: 3px; /* border width */
    background: white; /* border color */
    border: 3px solid white;/* border width */
    box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
    transition: linear 0.25s;
    }
    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","prefixfree":"1","page":"html"}
    {"view":"split-vertical","prefixfree":"1","page":"css"}
  6. intuive revised this gist Dec 20, 2011. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <h1>CSS3 Border-Radius with Border</h1>

    <p>Square image can be any size. Crossbrowser support. Simple workaround.</p>
    <p>Square image can be any size. Crossbrowser support. Minimal workaround.</p>

    <h3>Small Avatars</h3>

    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","prefixfree":"1","page":"css"}
    {"view":"split-vertical","prefixfree":"1","page":"html"}
  7. intuive revised this gist Dec 20, 2011. 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-vertical","prefixfree":"1","page":"html"}
    {"view":"split-vertical","prefixfree":"1","page":"css"}
  8. intuive revised this gist Dec 20, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <h1>CSS3 Border-Radius with Border</h1>

    <p>Square image can be any size. Crossbrowser support. Futureproof workaround.</p>
    <p>Square image can be any size. Crossbrowser support. Simple workaround.</p>

    <h3>Small Avatars</h3>

  9. intuive revised this gist Dec 20, 2011. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <h1>CSS3 Border-Radius with Border</h1>

    <p>Square image can be any size. Crossbrowser support. Futureproof.</p>
    <p>Square image can be any size. Crossbrowser support. Futureproof workaround.</p>

    <h3>Small Avatars</h3>

    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","prefixfree":"1","page":"css"}
    {"view":"split-vertical","prefixfree":"1","page":"html"}
  10. intuive revised this gist Dec 20, 2011. No changes.
  11. intuive revised this gist Dec 20, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -20,8 +20,8 @@ ul { width: 250px; margin: 0 auto; text-align: left; line-height: 1.8; }
    /* Circle Avatar Styles */

    .circle {
    line-height: 0;
    display: inline-block;
    line-height: 0; /* remove line-height */
    display: inline-block; /* circle wraps image */
    margin: 5px;
    border-radius: 50%; /* relative value */
    padding: 3px; /* border width */
  12. intuive revised this gist Dec 20, 2011. 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
    @@ -37,4 +37,4 @@ ul { width: 250px; margin: 0 auto; text-align: left; line-height: 1.8; }
    transition: ease-out 0.3s;
    transform: scale(0.8) rotate(20deg);
    }
    a.circle { color: transparent; } /* IE fix: removes blue border */
    a.circle { color: transparent; } /* IE fix: removes blue border */
  13. intuive revised this gist Dec 20, 2011. 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
    @@ -23,9 +23,9 @@ ul { width: 250px; margin: 0 auto; text-align: left; line-height: 1.8; }
    line-height: 0;
    display: inline-block;
    margin: 5px;
    border-radius: 50%;
    padding: 3px; /* border width */
    background: white; /* border color */
    border-radius: 50%; /* relative value */
    padding: 3px; /* border width */
    background: white; /* border color */
    box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
    transition: linear 0.25s;
    }
  14. intuive revised this gist Dec 20, 2011. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,8 @@ ul { width: 250px; margin: 0 auto; text-align: left; line-height: 1.8; }
    transition: linear 0.25s;
    }
    .circle img {
    border-radius: 50%; /* true circle */
    border-radius: 50%; /* relative value for
    adjustable image size */
    }
    .circle:hover {
    transition: ease-out 0.3s;
  15. intuive revised this gist Dec 20, 2011. No changes.
  16. intuive revised this gist Dec 20, 2011. 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
    @@ -35,6 +35,5 @@ ul { width: 250px; margin: 0 auto; text-align: left; line-height: 1.8; }
    .circle:hover {
    transition: ease-out 0.3s;
    transform: scale(0.8) rotate(20deg);
    cursor: pointer;
    }
    a.circle { color: transparent; } /* IE fix: removes blue border */
  17. intuive revised this gist Dec 20, 2011. No changes.
  18. intuive revised this gist Dec 20, 2011. 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
    @@ -23,14 +23,14 @@ ul { width: 250px; margin: 0 auto; text-align: left; line-height: 1.8; }
    line-height: 0;
    display: inline-block;
    margin: 5px;
    padding: 3px;
    border-radius: 50%;
    background: white;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
    padding: 3px; /* border width */
    background: white; /* border color */
    box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
    transition: linear 0.25s;
    }
    .circle img {
    border-radius: 50%;
    border-radius: 50%; /* true circle */
    }
    .circle:hover {
    transition: ease-out 0.3s;
  19. intuive revised this gist Dec 20, 2011. No changes.
  20. intuive revised this gist Dec 20, 2011. 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
    @@ -17,7 +17,7 @@ a { color: RoyalBlue; font-weight: normal; text-decoration: none; }
    a:hover { color: CornflowerBlue; }
    ul { width: 250px; margin: 0 auto; text-align: left; line-height: 1.8; }

    /* Avatar Styles */
    /* Circle Avatar Styles */

    .circle {
    line-height: 0;
  21. intuive revised this gist Dec 20, 2011. 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
    @@ -4,10 +4,10 @@

    /* General Styles */

    body { text-align: center;
    background: url(http://subtlepatterns.com/patterns/white_texture.png);
    min-height: 100%; font: 100 14px sans-serif;
    color: #444555; text-shadow: 0 2px white;
    body { background: url(http://subtlepatterns.com/patterns/white_texture.png);
    font: 100 14px sans-serif;
    color: #444555; text-shadow: 0 2px white;
    text-align: center;
    }
    ::-moz-selection { background: rgba(0,0,0,0.1); }
    ::selection { background: rgba(0,0,0,0.1); }
  22. intuive revised this gist Dec 20, 2011. 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
    @@ -4,7 +4,7 @@

    /* General Styles */

    body { padding-top: 20px; text-align: center;
    body { text-align: center;
    background: url(http://subtlepatterns.com/patterns/white_texture.png);
    min-height: 100%; font: 100 14px sans-serif;
    color: #444555; text-shadow: 0 2px white;
    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","prefixfree":"1","page":"html"}
    {"view":"split-vertical","prefixfree":"1","page":"css"}
  23. intuive revised this gist Dec 20, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -37,4 +37,4 @@ <h4>Tested and works on:</h4>
    <li>Firefox 7+</li>
    <li>IE9 (no transition)</li>
    </ul>
    <p>Have a bugfix? Send me a tweet: <a href="http://twitter.com/max_hoffmann" title="switch to twitter">@max_hoffmann</a></p>
    <p>Found a bug? Send me a tweet: <a href="http://twitter.com/max_hoffmann" title="switch to twitter">@max_hoffmann</a></p>
  24. intuive revised this gist Dec 20, 2011. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <h1>CSS3 Border-Radius with Border</h1>

    <p>Image can be any size. Crossbrowser support. Futureproof.</p>
    <p>Square image can be any size. Crossbrowser support. Futureproof.</p>

    <h3>Small Avatars</h3>

    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","prefixfree":"1","page":"css"}
    {"view":"split-vertical","prefixfree":"1","page":"html"}
  25. intuive revised this gist Dec 20, 2011. No changes.
  26. intuive revised this gist Dec 20, 2011. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    <h1>CSS3 Border-Radius with Border</h1>

    <p>Image can be any size. Crossbrowser support. Futureproof.</p>

    <h3>Small Avatars</h3>

    <a href="http://twitter.com/dabblet" class="circle">
  27. intuive revised this gist Dec 20, 2011. 2 changed files with 3 additions and 3 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,12 +7,12 @@
    body { padding-top: 20px; text-align: center;
    background: url(http://subtlepatterns.com/patterns/white_texture.png);
    min-height: 100%; font: 100 14px sans-serif;
    color: #444; text-shadow: 0 2px white;
    color: #444555; text-shadow: 0 2px white;
    }
    ::-moz-selection { background: rgba(0,0,0,0.1); }
    ::selection { background: rgba(0,0,0,0.1); }
    h1 { font-weight: 100; font-size: 2.7em; }
    h3 { color: #555; font-size: 1.6em; }
    h3 { color: #555666; font-size: 1.6em; }
    a { color: RoyalBlue; font-weight: normal; text-decoration: none; }
    a:hover { color: CornflowerBlue; }
    ul { width: 250px; margin: 0 auto; text-align: left; line-height: 1.8; }
    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","prefixfree":"1","page":"html"}
    {"view":"split-vertical","prefixfree":"1","page":"css"}
  28. intuive revised this gist Dec 20, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,6 +33,6 @@ <h4>Tested and works on:</h4>
    <li>Chrome 16</li>
    <li>Safari 5.1</li>
    <li>Firefox 7+</li>
    <li><a href="http://dabblet.com/result/gist/1500919" title="show on IE">IE9</a> (no transition)</li>
    <li>IE9 (no transition)</li>
    </ul>
    <p>Have a bugfix? Send me a tweet: <a href="http://twitter.com/max_hoffmann" title="switch to twitter">@max_hoffmann</a></p>
  29. intuive revised this gist Dec 20, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,6 +33,6 @@ <h4>Tested and works on:</h4>
    <li>Chrome 16</li>
    <li>Safari 5.1</li>
    <li>Firefox 7+</li>
    <li>IE9 (no transition)</li>
    <li><a href="http://dabblet.com/result/gist/1500919" title="show on IE">IE9</a> (no transition)</li>
    </ul>
    <p>Have a bugfix? Send me a tweet: <a href="http://twitter.com/max_hoffmann" title="switch to twitter">@max_hoffmann</a></p>
  30. intuive revised this gist Dec 20, 2011. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -28,7 +28,7 @@ <h3>Big Avatar</h3>
    <img src="http://behance.vo.llnwd.net/profiles9/545710/5a1ba5c679a44708c9b068d14cd1e7c8.jpg" alt="avatar">
    </a>

    <h4>Circle tested and works on:</h4>
    <h4>Tested and works on:</h4>
    <ul>
    <li>Chrome 16</li>
    <li>Safari 5.1</li>
    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","prefixfree":"1","page":"css"}
    {"view":"split-vertical","prefixfree":"1","page":"html"}