Skip to content

Instantly share code, notes, and snippets.

@maxhoffmann

maxhoffmann/dabblet.css

Created December 20, 2011 09:20
Show Gist options
  • Save maxhoffmann/1500919 to your computer and use it in GitHub Desktop.
Save maxhoffmann/1500919 to your computer and use it in GitHub Desktop.
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"}