Advertisement

shadow-scan-1

 

マテリアルデザインや最近話題のニューモーフィズム・スタイルで見かける、立体感を演出するドロップシャドウ、影エフェクト。

 

CSS box-shadow examples は、どんなウェブサイトやスマホアプリなどで利用できる、美しいリアル感たっぷりなCSSドロップシャドウ82種類を揃えた、無料のCSS便利ツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSSソースコードをコピペできます。使い勝手もよいので、ワークフローに加えたいサービスのひとつです。

 

 

詳細は以下から。

 

コピペ自由!美しいCSSドロップシャドウを82種類揃えたCSS box-shadow examples

 

CSS box-shadow examples では、リアルな影エフェクトの参考にしたい美しいCSSドロップシャドウが一覧で揃っており、使い方もとてもシンプルです。

 

 

一覧リストの中からお好みのドロップシャドウを選択、クリックするだけで、Webデザイン制作に便利なCSSソースコードをコピーできます。

 

 

以下は収録されているCSSドロップシャドウのサンプル例です。Webデザインの基本となるボックスやカード型レイアウト、ボタンなどあらゆる要素に加えるだけで、ふわりと浮かび上がったような立体感を演出できます。

css-drop-shadow-amples-1

 

 

Web作成を爆速にする、便利CSSオンラインツールまとめ

 

面倒な作業も楽に行うことができる、デザインで使いたいCSSオンラインツールや最新ウェブツールなども一緒に活用してみてはいかがでしょう。

 

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール59個をまとめています。 CSS FlexboxやGridをつかっ
この記事では、ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介します。 「こんなツールが欲しかった」をかたちにし

 

参照元リンク : Beautiful CSS box-shadow examples – CSS Scan