Skip to content

Instantly share code, notes, and snippets.

@ozinepank

ozinepank/dabblet.css

Forked from daneden/dabblet.css
Created October 10, 2012 10:20
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. ozinepank revised this gist Oct 10, 2012. No changes.
  2. @daneden daneden created this gist Oct 10, 2012.
    125 changes: 125 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,125 @@
    /* CSS Photo Album */
    /* Rebound of this shot by @daryl: http://drbl.in/fwwM */

    * {
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    }

    img {
    display: block;
    }

    html, body {
    min-height: 100%;
    }

    html {
    font: 100%/1.5 Proxima Nova, Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #fff;
    background: #368 url(http://farm8.staticflickr.com/7053/6946650474_12f212c422_z.jpg) center no-repeat;
    background-size: cover;
    -webkit-font-smoothing: antialiased;
    }

    .album {
    position: absolute;
    left: 0;
    right: 0;
    width: 250px;
    margin: auto;
    top: 160px;
    text-align: center;
    }

    .frame {
    padding: 10px;
    border-radius: .25em;
    background-color: rgba(255,255,255,.7);
    width: 180px;
    margin: 0 auto;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.3),
    inset 0 0 0 1px rgba(255,255,255,.2),
    0 1px 2px rgba(0,0,0,.3),
    0 7px 7px -3px rgba(0,0,0,.5);
    }

    .frame:before, .frame:after {
    content:'';
    padding: 10px;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,.5);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.3),
    inset 0 0 0 1px rgba(255,255,255,.2),
    0 1px 2px rgba(0,0,0,.3);
    border-radius: .25em;
    transform: rotate(-5deg);
    }

    .frame:after {
    transform: rotate(5deg);
    }

    .frame i {
    display: block;
    }

    .frame i:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: .25em;
    background-image: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 50%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 2px 1px rgba(255,255,255,.3);
    -webkit-mask-image: -webkit-linear-gradient(#000, transparent)
    }

    .frame img {
    border-radius: .25em;
    }

    .count {
    font-size: .875em;
    font-weight: 700;
    background-color: #ec621f;
    padding: .5em .8em .4em;
    border-radius: .25em;
    position: absolute;
    top: 80px;
    width: 50%;
    margin-left: 20%;
    text-align: right;
    z-index: -1;
    transition: .3s;
    }

    .album:hover .count {
    width: 80%;
    }

    .name {
    font-weight: 700;
    display: inline-block;
    margin: 1em auto;
    padding: .25em 1em;
    background-color: rgba(0,0,0,.6);
    border-radius: 3em;
    transition: .1s;
    transform: scale(.8) translateY(-5px);
    opacity: 0;
    }

    .album:hover .name {
    transform: none;
    opacity: 1;
    }
    8 changes: 8 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <div class="album">
    <figure class="frame">
    <i><img src="http://placedog.com/160/160" width="160" height="160"></i>
    </figure>
    <span class="count">18</span>
    <figcaption class="name">Dogs</figcaption>
    </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","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}