Box Shadow

Web Service

CSSでボックスシャドウを作成してくれるジェネレーター「Box Shadow」

CSSでボックスシャドウを簡単に作成できるジェネレーター「Box Shadow」がとても便利だったのでメモがてらご紹介します。シャドウの位置やボカシの強弱などのバーを動かしながら自分にとって最適なボックスシャドウを作り込んでいくことができます。CSSコードもバーを動かす度にリアルタイムで切り替わっていくのがいいですね。

[ads_center]

Box Shadowの使い方

左側にあるバーを弄りながらボックスシャドウを調整していくことができます。使い方自体はとても簡単です。

Box Shadowの使い方

出来上がったら、右側にあるCopy Textというボタンをクリックすると、CSSのコードがコピーされます。

Box Shadowの使い方

とても手軽にCSSでボックスシャドウが作れるので、こういったジェネレーターを活用することで手間も省けて効率的ですね。

Box Shadow CSS Generator | CSSmatic

シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」前のページ

スマホでタッチしながら下に引くと背景画像がズームしていくjQueryプラグイン「Pull and Zoom」次のページ

関連記事

  1. Web Service

    Macで簡単に画像を切り取ったりぼかしやモザイクを入れることができるアプリ「ToyViewer」

    ToyViewerというMacのアプリを使ってみました。起動や動作も早…

  2. Load Info - gif generator

    Web Service

    ローディング中に表示させるアニメーションGIFを作成できるジェネレーター「 Load Info &#…

    ローディング中に表示させるアニメーションGIFを手軽に作成することがで…

  3. CSS Button Generator

    Web Service

    シンプルでお洒落なCSSボタンを作成できる「CSS Button Generator」

    とても良さそうだったので使ってみました。シンプルでお洒落なCSSボタン…

  4. Web Service

    MacのReederで画面右上にRead It LaterとTwitterのアイコンを表示させるやり…

    MacのReederがとても快適なのでちょくちょく使っているんですが、…

  5. Web Service

    テキストのCSSを手軽に設定できる「CSS Type Set」

    ちょっと確認したい時なんかによさそうですね。フォントやフォンサイズなど…

  6. Web Service

    Chromeのダウンロード履歴を自動で消去してくれる拡張機能「Always Clear Downlo…

    ちょっと良さげだったので入れてみました。Google Chromeのダ…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP