テキストに縁や影をつける

css

2020-05-28

text-stroke

境界線を中心にして内外に縁をつけます。

  • テキスト
  • .セレクタ{-webkit-text-stroke: 1px #000;
    text-stroke: 1px #000;}

     

  • 文 字
  • .セレクタ{-webkit-text-stroke: 1px #fff;
    text-stroke: 1px #fff;
    color:transparent;}

     

text-shadow

テキストの外側に縁をつけます。

  • テキスト
  • .セレクタ{text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
                  -1px 1px 0 #FFF, 1px -1px 0 #FFF,
                  0px 1px 0 #FFF,  0-1px 0 #FFF,
                  -1px 0 0 #FFF, 1px 0 0 #FFF;}

     

  • 文字
  • .セレクタ{ text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 15px, rgba(0, 0, 0, 0.2) -1px 1px 15px, rgba(0, 0, 0, 0.2) 1px -1px 15px, rgba(0, 0, 0, 0.2) -1px -1px 15px;}

     

-css
-

関連記事

CSS Transitionで手軽にアニメーションを取り入れたい

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね!

CSS Animationでアニメーションを表現する

JavaScriptを使わずにCSSだけでアニメーションを表現!CSS Animationキーフレームは0%(アニメーションの開始)から100%(終わり)まで細かく指定できます。

スマホ対応の見やすい表を作りたい! tableのCSS設定

よく使うtableのCSSデザイン サイト制作の会社概要や比較表、料金表などでよく使うtable。css設定についてまとめました。例にあげたのは、全部tdの場合です。thが入ると変わってくるものもあり …

「ダークモード」対応の注意点と手順を知りたい!

Webサイトの「ダークモード」対応にチャレンジ! 「ダークモード」とは? パソコンやスマホ等のブラウザ画面に「ライトモード」と「ダークモード」があります。 明るい背景に暗色系の文字が「ライトモード」、 …

cssで作るいろいろなグラデーション

鮮やかなグラデーションを取り入れたサイトをよく見ます。 様々なタイプのグラデーション記述方法をまとめてみました! グラデーションの種類 基本 グラデーションはbackgroundで指定します。先に書い …