WEBサイト制作効率化のための、
デザイン・wordpressの試作や覚え書き

css

CSSで影をつける

2020-05-27

box-shadow

box-shadow:左右の距離 上下の距離 ぼかし 広がり 色 inset; で設定します。

insetを付けると、ボックスの内側に影がつきます。

※透過画像のpngにも、その形状ではなく四角く影を落とします。

filter

「filter」はphotoshop等の画像編集ソフトを使わずに、画像をぼかしたり、明度や彩度を変えたり、その他様々な機能を持ちます。そのうちの一つがドロップシャドウです。

「box-shadow」で設定できるinsetは使えません。
こちらもpngやsvgにも使用できます。また、IEでは対応していません。

-css

関連記事

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

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

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

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

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

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

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

cssでテキストに縁や影をつけます。

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。普段は埼玉のWeb制作会社に勤務しています。