Steric text used 'text-shadow' property.

edo_m18

2011-02-01 01:02:02

License: MIT License

Fork: 9

Fav: 2

View: 14960

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 3 lines
CSS 21 lines

text-shadowを匠に使って、文字に立体感を付けるサンプル。

サンプルはtextareaになっているので
文字入力ができます。
入力中の文字も立体になるのが分かります。
※Firefox, WebKit系、Operaで見れます。

どこで見つけたか忘れたんですが、面白かったのでコードだけコピってみたｗ

Steric text used 'text-shadow' property.

Steric text used 'text-shadow' property.

text-shadowを匠に使って、文字に立体感を付けるサンプル。サンプルはtextareaになっているので文字入力ができます。入力中の文字も立体になるのが分かります。 ※Firefox, WebKit系、Operaで見れます。どこで見つけたか忘れたんですが、面白かったのでコードだけコピってみたｗ<div> <textarea cols="50" rows="5" class="realText">sample text サンプルテキスト</textarea> </div>textarea { border: none; font-size: 150%; height: 3000px; } .realText { text-shadow: #CCC 0px 1px 0px, #C9C9C9 0px 2px 0px, #BBB 0px 3px 0px, #B9B9B9 0px 4px 0px, #AAA 0px 5px 0px, rgba(0, 0, 0, 0.0976562) 0px 6px 1px, rgba(0, 0, 0, 0.0976562) 0px 0px 5px, rgba(0, 0, 0, 0.296875) 0px 1px 3px, rgba(0, 0, 0, 0.199219) 0px 3px 5px, rgba(0, 0, 0, 0.246094) 0px 5px 10px, rgba(0, 0, 0, 0.199219) 0px 10px 10px, rgba(0, 0, 0, 0.148438) 0px 20px 20px; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

http://jsdo.it/edo_m18/m8FA Steric text used 'text-shadow' property.
Tweet

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/m8FA/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/edo_m18/m8FA" title="Steric text used 'text-shadow' property.">Steric text used 'text-shadow' property. - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code