0017.org

旧1bit::memo。WordPress, PHP, jQuery ...etc

CSS3で無難に使えそうなtext-shadow設定

更新日:

CSS3になって、text-shadowが使えるようになりましたね。
ブラウザの問題はさておき、現実的に使おうと思った時にセンスよく使いたいですよね。
個人的にどんなデザインでも汎用的に使えそうな、オーソドックスなパターンを作ってみました。

基本的には、「微妙に設定されているか、されていないか」くらいがオシャレかなと思っています。デザインは適宜追加していきたいなと思います。

微妙に白シャドウがかかっている

text-shadow: 0px 1px 0px rgba(255,255,255,0.7);

```

text-shadow: 0px 1px 0px rgba(255,255,255,0.7);

```

品良くぼかす

text-shadow: 0px 1px 2px rgba(0,0,0,0.8);

```

text-shadow: 0px 1px 2px rgba(0,0,0,0.8);

```

白い背景で一般的なテキストで使うイメージ

使っても見出しレベルでしょうね。

text-shadow: 0px 1px 2px rgba(0,0,0,0.2);

```

text-shadow: 0px 1px 2px rgba(0,0,0,0.2);

```

-コーディング

Copyright© 0017.org , 2018 AllRights Reserved.