Skip to main content

Message Box

 


HTML CODE:

<!DOCTYPE html>
<html>
  <head>
    <title>Message Box</title>
    <link rel="stylesheet" href="css/message.css" />
  </head>
<div class="letter-image">
    <div class="animated-mail">
        <div class="back-fold"></div>
        <div class="letter">
            <div class="letter-border"></div>
            <div class="letter-title"></div>
            <div class="letter-context"></div>
            <div class="letter-stamp">
                <div class="letter-stamp-inner"></div>
            </div>
        </div>
        <div class="top-fold"></div>
        <div class="body"></div>
        <div class="left-fold"></div>
    </div>
    <div class="shadow"></div>
</div>
</html>

CSS CODE:

body {
    background: #A0BDFF;
}

.letter-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.animated-mail {
    position: absolute;
    height: 150px;
    width: 200px;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;
   
    .body {
        position: absolute;
        bottom: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 100px 200px;
        border-color: transparent transparent #f85056 transparent;
        z-index: 2;
    }
   
    .top-fold {
        position: absolute;
        top: 50px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 50px 100px 0 100px;
        -webkit-transform-origin: 50% 0%;
        -webkit-transition: transform .4s .4s, z-index .2s .4s;
        -moz-transform-origin: 50% 0%;
        -moz-transition: transform .4s .4s, z-index .2s .4s;
        transform-origin: 50% 0%;
        transition: transform .4s .4s, z-index .2s .4s;
        border-color: #db2f26 transparent transparent transparent;
        z-index: 2;
    }
   
    .back-fold {
        position: absolute;
        bottom: 0;
        width: 200px;
        height: 100px;
        background: #db2f26;
        z-index: 0;
    }
   
    .left-fold {
        position: absolute;
        bottom: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 50px 0 50px 100px;
        border-color: transparent transparent transparent #fb6469;
        z-index: 2;
    }
   
    .letter {
        left: 20px;
        bottom: 0px;
        position: absolute;
        width: 160px;
        height: 60px;
        background: white;
        z-index: 1;
        overflow: hidden;
        -webkit-transition: .4s .2s;
        -moz-transition: .4s .2s;
        transition: .4s .2s;
       
        .letter-border {
            height: 10px;
            width: 100%;
      background: repeating-linear-gradient(
        -45deg,
        #f85056,
        #f85056 8px,
        transparent 8px,
        transparent 18px
      );
        }
       
        .letter-title {
            margin-top: 10px;
            margin-left: 5px;
            height: 10px;
            width: 40%;
            background: #db2f26;
        }
        .letter-context {
            margin-top: 10px;
            margin-left: 5px;
            height: 10px;
            width: 20%;
            background: #db2f26;
        }
       
        .letter-stamp {
            margin-top: 30px;
            margin-left: 120px;
            border-radius: 100%;
            height: 30px;
            width: 30px;
            background: #db2f26;
            opacity: 0.3;
        }
    }
}

.shadow {
    position: absolute;
    top: 200px;
    left: 50%;
    width: 400px;
    height: 30px;
    transition: .4s;
    transform: translateX(-50%);
    -webkit-transition: .4s;
    -webkit-transform: translateX(-50%);
    -moz-transition: .4s;
    -moz-transform: translateX(-50%);
   
    border-radius: 100%;
    background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.0));
}

    .letter-image:hover {
        .animated-mail {
            transform: translateY(50px);
            -webkit-transform: translateY(50px);
            -moz-transform: translateY(50px);
        }
       
        .animated-mail .top-fold {
            transition: transform .4s, z-index .2s;
            transform: rotateX(180deg);
            -webkit-transition: transform .4s, z-index .2s;
            -webkit-transform: rotateX(180deg);
            -moz-transition: transform .4s, z-index .2s;
            -moz-transform: rotateX(180deg);
            z-index: 0;
        }
       
        .animated-mail .letter {
            height: 180px;
        }
       
        .shadow {
            width: 250px;
        }
    }

Comments

Post a Comment

Popular posts from this blog

Toggle animation using CSS!!!

HTML CODE: <! DOCTYPE html > < html > < head >     < meta charset = "utf-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1" >     < title > Toggle </ title >     < link rel = "stylesheet" href = "Toggle.css" > </ head > < body > < input type = "checkbox" id = "day-night" >< label for = "day-night" ></ label > < div class = "content" >         < div class = "moon-sun" ></ div >     < div class = "cuboid floor one" >         < div class = "side" ></ div >         < div class = "side" ></ div >         < div class = "side" ></ div >         < div class = "side" ></ div >         < div class = "side" ></ div >   ...
Post a Comment
Read more

Animated amongus !!!

HTML CODE: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Among Us </ title >     < link rel = "stylesheet" href = "amongus.css" > </ head > < body >     < div class = "player" >         < div class = "visor" ></ div >         < div class = "backpack" ></ div >         < div class = "leg front" ></ div >         < div class = "leg back" ></ div >         < div class = "shade" ></ div >     </ div > </ body > </ html > CSS CODE: html , body {     height : 100vh ; } body {     display : flex ;     align-items : center ; ...
Post a Comment
Read more

Mountains and Truck

  HTML CODE: <! DOCTYPE html > < html >   < head >     < title > Message Box </ title >     < link rel = "stylesheet" href = "css/mountain.css" />   </ head > < div class = "loop-wrapper" >   < div class = "mountain" ></ div >   < div class = "hill" ></ div >   < div class = "tree" ></ div >   < div class = "tree" ></ div >   < div class = "tree" ></ div >   < div class = "rock" ></ div >   < div class = "truck" ></ div >   < div class = "wheels" ></ div > </ div > </ html > CSS CODE: body {     background : #136482 ;     overflow : hidden ;     font-family : 'Open Sans' , sans-serif ;   }   .loop-wrapper {     margin : 0 auto ;     position : relative ;     display : block ...
Post a Comment
Read more