Gradient borders / BB 10 comment box

by sanford

HTML

<div class="zeep" />

CSS

div {width:400px;
    background: -webkit-linear-gradient(top, rgba(228,245,0,0) 0, rgba(228,245,0,0) 1px,rgba(228,245,0,.4) 2px,rgba(228,245,0,1) 320px,rgba(228,245,0,1) 384px,blue 385px,rgba(42,176,237,1) 386px); /* Chrome10+,Safari5.1+ */
    height: 400px;
    ZZborder:1px solid silver;
    border-radius: 20px;
    border-bottom-right-radius: 0px;
    position:absolute;
   -webkit-transition: all 620ms ease-in;
    transition: all 620ms ease-in;
}
div:after {
    content:"";
    font-size:0;
    width: 0;
    max-height:0;
    overflow:hidden;
    border-right: 46px solid rgba(228,245,0,1);
    border-bottom: 46px solid transparent;
    position:relative;
    left:100%;
    top:368px;
    margin-left: -46px;
    box-shadow: 1px 0px 0px 0 silver;
}
div:before {
    width:397px;
    height: 400px;
    border-color:silver;
    border-style: solid;
    border-width: 2px 2px 0 1px;
    border-radius: 20px;

    position:absolute;
    Zoverflow:hidden;
    content:"";
    font-size:400px;
    top:0;
    left:0;
    z-index:-1;
}
body {padding:30px;}

div.zeep:hover {
    background-position:  0 -400px;
}

JavaScript

/**
Based on the BB Q10 comment style

Gradient border is done using a bordered div behind the main one. Since the main content area fades in vertically, the top of border appears to fade out

Edit: The main impetus for the gradient border was that I couldn't get the silver border to appear on the right of the dogear at lower right (since it already IS a border to get the triangle).  But then I realized could use box-shadow for that (no feather) so I started working on that in /1

The animation is just another thing to look into.


*/