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

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で縦書き

縦書き 文章を縦書きにして右から左へ流す。 縦書きの基本 文章を縦書きにして右から左へ流す。 親{text-align:right; display: inline-block;} 子{writing …

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

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

横並びのデザインをもっと自由に!フレックスボックスレイアウト

子要素のレイアウトを指定する ナビゲーションメニューやページネーション、並列のレイアウト等に欠かせないフレックスボックスレイアウトについてまとめてみました! 横の配置をデザインする「justify-c …

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

隣接セレクタ・間接セレクタ・直下セレクタとは? 隣接セレクタ 要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。 間接セレクタ 要素 …

スクロールがひっかかる?反発して動かない、ページが読めない場合に対応したこと

スクロールできない! スマホでスクロールしようとして気が付きました。(PCでは分かりづらかった) スクロールしようとしても画面が動かない、下にもコンテンツがあるのに閲覧できないことがあったんです。 リ …