Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

Collect " Text Effect CSS "

Dev

f:id:thleap:20130522153310p:plain

Collect " Text Effect CSS "

コード

多少shadow の位置やぼかしの量は変更したけど、ほとんど参考にしたブログ記事の通り。
参考: 12 Fun CSS Text Shadows You Can Copy and Paste

CSSは下記の通り。

p {
  font: 34px Helvetica, Sans-Serif;
  font-weight: 600;
  color: rgba(255,255,255,1);
  margin: 20px 0;
  margin-left: 10px;
}

.letter_press {
  color: rgba(0,0,0,0.6);
  text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

.hard_shadow {
  text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}

.double_shadow {
  color: rgba(27,62,78,1);
  text-shadow: 4px 3px 0px rgba(51,146,190,1), 7px 6px 0px rgba(0,0,0,0.15);
}

.down_and_distant {
  text-shadow: 0px 3px 0px rgba(0,0,0,0.3),
               0px 4px 10px rgba(0,0,0,0.15),
               0px 8px 2px rgba(0,0,0,0.1),
               0px 12px 30px rgba(0,0,0,0.1);
}

.close_and_heavy {
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
               0px 8px 13px rgba(0,0,0,0.1),
               0px 18px 23px rgba(0,0,0,0.1);
}

.little_help {
  text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.inset_text {
  background-color: rgba(40,116,152,1);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: rgba(255,255,255,0.8) 0px 2px 1px;
}

.growing {
  text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}

.superhero {
  text-shadow: -2px 2px 0px rgba(119, 208, 250, 1),
               -4px 4px 0px rgba(87, 186, 233, 1),
               -6px 6px 0px rgba(63, 161, 207, 1)
}

.multiple_light_sources {
  text-shadow: 0px 5px 5px rgba(0,0,0,0.15),
               3px 10px 5px rgba(0,0,0,0.05),
               -3px 10px 5px rgba(0,0,0,0.05);
}

.soft_emboss {
  color: rgba(0,0,0,0.6);
  text-shadow: 2px 3px 6px rgba(0,0,0,0.3),
               0px -3px 34px rgba(255,255,255,0.2)
}