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) }