MyCharBook

Condividi codice - Lillian scheda 3

Anteprima
CSS

<style>
            ::-webkit-scrollbar {

     background: #000000;
     width: 0px;
     cursor: s-resize;
     padding: 0;
     margin-right: 0px;
}

::-moz-selection {

     color: #453f2e;
     background: none;
     text-shadow: 0px 0px 0px #000!important;
}

::selection {

     color: #453f2e;
     background: none;
     text-shadow: 0px 0px 0px #000!important;
}

  /*BASE TAYLOR VERSION*/
  .mycontainer {
     background-color: none; 
     position: relative;
     width: 500px; 
     height: 640px;
     margin:auto;
}
  
 /*BASExALTEZZA*/
 
 .img-base {
     -moz-transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; 
     width: 400px; 
     height:500px;
     left: 50%;
     top: 50%;
     margin-left: 0px;
     margin-top: 0px;
     background:#000 url(https://i.ibb.co/PGCD28d/68d78739052b2c4ce5692210ff5d7d1b.png);
     border: 5px solid #000;
     transition-delay: 1s;
}


.mycontainer:hover .img-base {

     opacity:1;
     background:#000 url(https://i.ibb.co/p1YVRvB/ea3039c83e93e9bd7eecbd0797775497.png);
     transition-delay: 2s;
}


/*SCRITTA*/

.scritta_box {
    position: absolute;
    top: 30%;
    left: 20%;
    transition: all ease-in-out 1s;
    z-index: 2;
    width: 400px;
    height: 340px;
    overflow: hidden;
}
.scritta{
  font-family: ropa sans;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  font-size: 10px;
  position: relative;
  letter-spacing: 4px;
  line-height: 20px;
  margin-bottom:2px;
  top: 0px;
  transition: all ease-in-out 0.8s;
  transition-delay: 0.5s;
  left:2%;
}

.scritta span{
  background: #ccc;
  color: #111;
  font-weight: bold;
  padding: 0px 1px 0px 4px;
}

.scritta2{
  font-family: staatliches;
  text-transform: uppercase;
  color: #21796c;
  width: 200px;
  line-height: 24px;
  position: relative;
  font-size: 30px;
  transition: all ease-in-out 1.4s;
  transition-delay: 0.5s;
  bottom: 0px;
}

.scritta2 span{
  font-family: staatliches;
  -webkit-text-stroke: 1px #0a0a0a;
  color: transparent;
}

.mycontainer:hover .scritta{
  top: -20px;
  transition: all ease-in-out 0.8s;
}

.mycontainer:hover .scritta2{
  bottom: -60px;
  transition: all ease-in-out 0.8s;
  opacity:0;
}




/*BOX*/



.box {
    position: relative;
    z-index: 3;
    float: left;
    overflow: auto;
    opacity: 1;
    -moz-transition: all ease-in-out 1s;
    -webkit-transition: all ease-in-out 1s;
    -o-transition: all ease-in-out 1s;
    width: 350px;
    height: 0px;
    left: 62%;
    top: 36%;
    margin-left: -218.5px;
    margin-top: 335.5px;
    box-shadow: 0px 0px 5px #000;
    transform: rotate(0deg);
    transition-delay: 2.0s;
    background: url(https://imgur.com/rpwQNQe.png);
}

.mycontainer:hover .box {
     height: 150px;
     margin-top: 220px;
     transition-delay: 1.7s;
}

.text {
    position: absolute;
    padding: 5px;
    z-index: 3;
    float: left;
    overflow: auto;
    opacity: 1;
    width: 338px;
    height: 130px;
    left: 26%;
    top: 53%;
    margin-left: -91px;
    margin-top: -77.5px;
    background: none;
    color: #636666;
    font-family: tahoma;
    font-size: 10px;
    line-height: 9px;
    letter-spacing: 0px;
    text-align: justify;
    text-shadow: 1px 1px 0px #000;
}

/*TITLE*/

.title_box {
    position: absolute;
    margin-top: 400px;
    margin-left: 28px;
    letter-spacing: 15px;
    color: red;
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: blur(0.8px);
    transition: ease 1s;
    text-align: center;
    width: 266px;
    opacity: 0;
    font-size: 11px;
    font-family: Tahoma;
}

.mycontainer:hover .title_box {
    position: absolute;
    margin-top: 73%;
    margin-left: 70px;
    letter-spacing: 10px;
    color: #1e1d1d;
    filter: blur(0.8px);
    background: -webkit-linear-gradient(#873f17, #1c1515);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition-delay: 1.2s;
    background-color: #0a0a0a;
    opacity: 1;
}



/* FRIENDS*/

.amiki {
    position: absolute;
    z-index: 0;
    float: left;
    overflow: hidden;
    opacity: 0;
    -moz-transition: all ease-in-out 1s;
    -webkit-transition: all ease-in-out 1s;
    -o-transition: all ease-in-out 1s;
    width: 266px;
    height: 100px;
    left: 7%;
    top: 89%;
    margin-left: 40px;
    margin-top: -12%;
    background: url(https://imgur.com/rpwQNQe.png);
    box-shadow: 0px 0px 5px #000;
    transform: rotate(-8deg);
    transition-delay: 1.2s;
}

.mycontainer:hover .amiki {
    opacity: 1;
    margin-top: -4%;
    transform: rotate(1deg);
    transition-delay: 2.5s;
}

.text_amiki {
     position: absolute;
      z-index:1; 
      float: left; 
      overflow: hidden; 
      opacity: 1;
     width: 150px;
     height: 82px;
     left: 35%;
     top: 45%;
     margin-left: -55px;
     margin-top: -16px;
     background: none;
     color: #636666;
     font-family: tahoma;
     font-size: 10px; 
     line-height: 10px; 
     letter-spacing: 0px;
     text-align: center;
     text-shadow: 1px 1px 0px #000;
}



/*LET'S GIF */

.gif {
    position: absolute;
    z-index: 1;
    float: left;
    overflow: hidden;
    opacity: 1;
    -moz-transition: all ease-out 1.5s;
    -webkit-transition: all ease-out 1.5s;
    -o-transition: all ease-out 1.5s;
    width: 84px;
    height: 84px;
    left: 0%;
    top: 58%;
    margin-left: 150px;
    margin-top: 30px;
    transform: rotate(15deg);
    opacity: 0;
    background: none;
    transition-delay: 0.2s;
    text-align: center;
}

.mycontainer:hover .gif {
    height: 85px;
    margin-left: 54%;
    top: 83%;
    transform: rotate(-15deg);
    transition-delay: 0.2s;
    opacity: 1;
}




/*WE NEVER GO OUT OF STYLE*/



b, i {
     color: #ab7523;
     font-family: times new roman; 
     font-size: 9px;
     line-height: 9px;
     letter-spacing: 1px;
}

a {
     text-decoration:none!important;
}

d {
     font-family: Arial; 
     color: #73501c;
     text-transform: uppercase;
     font-weight: bold;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
}

e {
    font-family: georgia;
    text-transform: uppercase;
    font-size: 8px;
    line-height: 9px!important;
    letter-spacing: 3px;
    color: #593d14;
    text-shadow: 1px 1px 0px #111;
}



o {
     color: #73501c;
     font-family: georgia; 
     font-size: 7px;
     font-weight: bold;
     line-height: 9px;
     letter-spacing: 3px; 
     text-transform: uppercase;
     text-shadow: 1px 1px 0px #111; 
} 

k {
     color: #51450d; 
     font-size: 8px;
     font-weight: bold;
     line-height: 8px;
     letter-spacing: 3px; 
     text-transform: uppercase;
     text-decoration: underline dashed #73501c;
} 

v {
    color: #593d0b;
    font-size: 6px;
    font-weight: bold;
    line-height: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: underline dotted#857049;
}

</style>
Condividi codice - Lillian scheda 3

CSS

HTML
