LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

hover it!
CSS
@import url(https://fonts.googleapis.com/css?family=Audiowide);

body {  
  background: url("https://dl.dropboxusercontent.com/u/95690690/Web%20Design%20Public/pattern/ps_neutral.png");
  text-align: center;
}


#logo {
  font-family:Audiowide;
  font-size:150px;
  color: white;
  margin:100px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  
  text-shadow: 
  1px 1px 0 rgba(36,117,203,1),
  13px 3px 0 rgba(36,117,203,0.9),
  5px 5px 0 rgba(36,117,203,0.8),
  17px 7px 0 rgba(36,117,203,0.7),
  9px -15px 0 rgba(36,117,203,0.6),
  -11px 11px 0 rgba(36,117,203,0.5),
  7px -13px 0 rgba(36,117,203,0.4),
  15px 30px 0 rgba(36,117,203,0.3),
  -20px 17px 0 rgba(36,117,203,0.2),
  -19px 19px 0 rgba(36,117,203,0.1),
  30px -21px 0 rgba(36,117,203,0.08),
  23px 23px 0 rgba(36,117,203,0.06),
  -25px 40px 0 rgba(36,117,203,0.04),
  27px 27px 0 rgba(36,117,203,0.02),
  -29px 29px 0 rgba(36,117,203,0.0);
}

#logo:hover {
  -webkit-transform: rotate(1deg) scale(1.02);
  -moz-transform: rotate(1deg) scale(1.02);
  -o-transform: rotate(1deg) scale(1.02);
  -ms-transform: rotate(1deg) scale(1.02);
  transform: rotate(1deg) scale(1.02);
  
  text-shadow: 
  10px 1px 0 rgba(36,117,203,0.1),
  13px 23px 0 rgba(36,117,203,0.2),
  15px 5px 0 rgba(36,117,203,0.03),
  17px 7px 0 rgba(36,117,203,0.04),
  9px 15px 0 rgba(36,117,203,0.2),
  -11px -11px 0 rgba(36,117,203,0.06),
  17px -13px 0 rgba(36,117,203,0.07),
  15px 30px 0 rgba(36,117,203,0.1),
  -20px -17px 0 rgba(36,117,203,0.06),
  -19px 19px 0 rgba(36,117,203,0.08),
  5px 21px 0 rgba(36,117,203,0.02),
  23px -23px 0 rgba(36,117,203,0.1),
  25px 40px 0 rgba(36,117,203,0.2),
  27px 17px 0 rgba(36,117,203,0.1),
  -29px -29px 0 rgba(36,117,203,0.1);
}

#hint {
  margin:100px;
  font-family:Courier;
  font-size:30px;
  font-weight:bold;
  color:#666;
}
Host Instantly Drag and Drop Website Builder

 

Description

A little css transition applied on a text using multiple shadows
Term
Mon, 11/27/2017 - 22:13

Related Codes

Pen ID
Pen ID
Pen ID