テキストの装飾

ericat

License: MIT License

Fork
0
Fav
0
View
110
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 1 lines
  • HTML 5 lines
  • CSS 78 lines
## テキストに縁取りをつける
デメリット
- text-stroke:webkitしか対応していない
- text-shadow:2px以上のストロークを設定すると、ストロークに間が空いてくる。
結果:
strokeとshadowの組み合わせ最強
参考:
http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/css-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%B9%E3%83%88%E3%83%AD%E3%83%BC%E3%82%AF-text-stroke/
https://css-tricks.com/examples/TextStroke/

## テキストにグラデーションをつける
title属性にマスクをかける感じ
参考:
http://kudakurage.hatenadiary.com/entry/20111113/1321170623

- 最後の背景にグラデしいてtext-fill-colorで塗りを透明にして
background-clip: textで背景の適用範囲をtextにするやり方は、IEで使えなかった。
  • テキストの装飾
  • テキストの装飾

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

ericat

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags