Skip to content

Instantly share code, notes, and snippets.

@nrrrdcore
Last active March 3, 2025 22:54

Revisions

  1. Julie Ann Horvath revised this gist Mar 22, 2013. 2 changed files with 0 additions and 0 deletions.
    File renamed without changes.
    File renamed without changes.
  2. nrrrdcore revised this gist May 10, 2012. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions bended-shadow.css
    Original file line number Diff line number Diff line change
    @@ -43,6 +43,11 @@
    border: 1px solid #D0D0D0;
    border-bottom: 1px solid #CACACA;
    z-index: 1;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    -ms-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    -o-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }

    #photo {
  3. nrrrdcore revised this gist May 10, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion bended-shadow.css
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@
    -ms-transform: rotate(-3deg) skew(-10deg);
    transform: rotate(-3deg) skew(-10deg);
    left: 16px; /* Decrease px to increase spread */
    bottom: 16px; /* Decrease to lower shadow */
    bottom: 17px; /* Decrease to lower shadow */
    z-index: 0; /* Important! should be (-1) beneath your content container */
    }

  4. nrrrdcore revised this gist May 10, 2012. No changes.
  5. nrrrdcore revised this gist May 10, 2012. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions bended-shadow.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div class="bended-shadow">
    <div id="content">
    Put your Content/Image here.
    </div>
    </div>
  6. nrrrdcore created this gist May 10, 2012.
    68 changes: 68 additions & 0 deletions bended-shadow.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    .bended-shadow {
    position: relative;
    width: 500px;
    margin: 200px auto;
    }

    .bended-shadow::before, .bended-shadow::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 30px;
    -webkit-box-shadow: 0 0 36px rgba(0,0,0,1);
    -moz-box-shadow: 0 0 36px rgba(0,0,0,1);
    -ms-box-shadow: 0 0 36px rgba(0,0,0,1);
    -o-box-shadow: 0 0 36px rgba(0,0,0,1);
    box-shadow: 0 0 36px rgba(0,0,0,1);
    -webkit-transform: rotate(-3deg) skew(-10deg);
    -moz-transform: rotate(-3deg) skew(-10deg);
    -o-transform: rotate(-3deg) skew(-10deg);
    -ms-transform: rotate(-3deg) skew(-10deg);
    transform: rotate(-3deg) skew(-10deg);
    left: 16px; /* Decrease px to increase spread */
    bottom: 16px; /* Decrease to lower shadow */
    z-index: 0; /* Important! should be (-1) beneath your content container */
    }

    .bended-shadow::after {
    -webkit-transform: rotate(3deg) skew(10deg);
    -moz-transform: rotate(3deg) skew(10deg);
    -o-transform: rotate(3deg) skew(10deg);
    -ms-transform: rotate(3deg) skew(10deg);
    transform: rotate(3deg) skew(10deg);
    left: auto;
    right: 16px; /* Decrease px to increase spread */
    }

    #content {
    position: relative;
    bottom: 4px;
    padding: 3px;
    background-color: #FFF;
    min-height: 400px;
    border: 1px solid #D0D0D0;
    border-bottom: 1px solid #CACACA;
    z-index: 1;
    }

    #photo {
    background-color: #EEE;
    border: 1px solid #D0D0D0;
    min-height: 408px;
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.09);
    -moz-box-shadow: inset 0 0 3px rgba(0,0,0,.09);
    -ms-box-shadow: inset 0 0 3px rgba(0,0,0,.09);
    -o-box-shadow: inset 0 0 3px rgba(0,0,0,.09);
    box-shadow: inset 0 0 3px rgba(0,0,0,.09);
    }

    h1 {
    font-family: 'Helvetica Neue';
    font-weight: bold;
    font-size: 90px;
    text-align: center;
    padding-top: 70px;
    color: #818486;
    letter-spacing: 0;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5), 0 2px 1px rgba(255,255,255,.6);
    }