 Win XP, IE 8 with jquery-ie-text-shadow |
 Mac OS X 10.8, Safari 6 |
- Internet Explorer 7, 8, 9で、CSSの
text-shadowを polyfill で実現する jQuery プラグインです。 - 5年後10年後 こどもたちが健やかに育つ会というウェブサイトで使用しています。
- 他の同様のプラグイン、ライブラリと比較すると以下の点で優れています。
- 複数の影を指定できる。 (CSS-3 Text-Shadowと比較)
- 表示の再現性が高くモダンブラウザの
text-shadowに近い。
node.js でテストページを生成してテストしています。
(heygrady / textshadowと比較)
- こちらにデモページがあります。
- jQuery plugin for
text-shadowpolyfill for Internet Explorer 7, 8 and 9. - It's used in web site www.5nen10nen.com.
- It's superior to other similar libraries and plugins at these points.
- You can apply multiple shadows. (VS CSS-3 Text-Shadow)
- Quality of rendering are better and more sililar to moderen browser's
text-shadow. Tested with exhaustive test page generated with node.js. (VS heygrady / textshadow)
- Here is Demonstration page.
- jQueryをインクルードした後に、このライブラリをインクルードしてください。
Internet Explorer 以外で不要な処理を実行しないため、 Internet Explorerの条件付きコメントを使うことをおすすめします。 - 適用したい jQuery オブジェクトに対して、
ieTextShadow()メソッドを呼び出してください。 - CSSの
text-shadowプロパティで指定したスタイルが自動的に適用されます。
- It is necessary to include this library after jQuery.
I recommend that you use Internet Explorer's conditional comment. - Call
ieTextShadow()method of jQuery DOM object that you'd like to apply text-shadow. - The style that defined by CSS
text-shadowproperty is applied.
<script src="jquery-1.7.1.min.js"></script>
<!--[if lt IE 10]>
<script src="jquery-ie-text-shadow.js"></script>
<script>
$(document).ready(function() {
$('.emboss').ieTextShadow();
}
</script>
<![endif]-->
<style>
.emboss {
text-shadow: 0px -1px #222222, 0px 2px #FFFFFF;
}
</style>
<div class="emboss">Emboss</div>ieTextShadow()メソッドの引数に、text-shadowプロパティの値を指定すると、CSSのスタイルを上書きできます。
- You can overwrite CSS
text-shadowproperty by arguments ofieTextShadow()method.
$('.emboss').ieTextShadow('4px -4px 10px red, -4px -4px 10px green');- 2行以上にまたがる長いテキストに適用すると、適用部分の後に意図しない改行が入ってしまいます。
面倒ですが、単語ごとに
<span>タグで区切ると回避できます。 - ブラウザのウィンドウサイズの変更等に伴い、テキストがリフローされた場合、影は再レイアウトされません。その結果、ベースのテキストとtext-shadowが分離していまいます。
- When apply to inline elements with long text running two or more lines,
unintended line break are inserted after elements.
You may separate a word with a
<span>tag to fix it. - When you resize window and text are reflowed, shadows are separated from text unintentionally.
- Original version was created by Martin Hintzmann 2008 martin [a] hintzmann.dk
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent