cosha.jsでおしゃれにカラーシャドウをつけよう！

CSSを使用して画像や文字に影を薄く引いたりすると、コンテンツがリッチに見えたりしますよね。
基本的に影の色を指定するときは１色が多く、写真の色を影として利用することはできませんが
cosha.jsを使用すると画像に合わせて影の色を変えることができます。

まずはサンプルから！

See the Pen colorful-shadow by sayuri (@giraffeweb) on CodePen.light

ソースはいたって簡単！
JSを読み込みます。私はCDNで読み込みましたが公式サイトからダウンロードすることも可能です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/cosha"></script>

imgに適切なクラスを付与してあげます。

<body>
	<ul class="flexBox">
		<li><img class="colorful-shadow" src="https://creatornote.nakweb.com/wp-content/themes/giraffe/images/rightleftslide/01.jpg" alt="画像1"></li>
		<li><img class="colorful-shadow" src="https://creatornote.nakweb.com/wp-content/themes/giraffe/images/rightleftslide/02.jpeg" alt="画像2"></li>
		<li><img class="colorful-shadow" src="https://creatornote.nakweb.com/wp-content/themes/giraffe/images/rightleftslide/05.jpeg" alt="画像3"></li>
	</ul>
</body>

あとはJSでimgタグに指定したクラスを「className」に記載すれば完了！
ｘとｙを指定して影の長さとを調整してみてくださいね！

cosha({
  className: 'colorful-shadow',
  blur: '10px',
  brightness: '125%',
  saturation: '110%',
  x: '2px',
  y: '6px'
});

とっても簡単！みなさんもぜひ試してみてください☆

Share: