「cosha」画像と同じ色のシャドウを入れてオシャレにしてみた。

こんにちは。FASTCODINGデザイナーの七転び八重子です。
今回は、写真のカラーに合わせて同じカラーのシャドウを入れてくれるJavaScript「cosha（コーシャ）」をご紹介します。スクリプトは非常に軽量で依存性もありません。ライセンスはMITです。

MITライセンス（MIT License）とは？
オープンソースソフトウェアのライセンスのひとつで、無料で基本は自由につかうことができるのが特徴です。
著作権表示（「Copyright (c) 年作者名」）と、このライセンスの全文（英語の文章）orウェブページのURLを記載をソースコードのなかや、同梱の別ファイルなどに下記のような記述を掲載するだけで、改変・再配布・商用利用・有料販売でも、どんなことにでも自由に無料でつかうことができます。

「cosha（コーシャ）」の実装方法
まとめ

「cosha（コーシャ）」の実装方法

cosha

今回は、かっこいいネオンの写真を使って、背景を黒にしてみました。

① 画像を配置してクラスを指定

class=”cosha”を画像に指定します。

<body>
  <img class="cosha" src="images/sample.jpg" alt="sample">
</body>

② JavaScriptファイルを読み込む

JavaScriptファイルは公式GitHubからダウンロードして下さい。
CDNでそのまま読み込ませてもいいです。

<body>
  <img class="cosha" src="images/sample.jpg" alt="sample">

  <script src="https://unpkg.com/cosha@1.1.0/public/cosha.iife.js">
</body>

③ JavaScriptに実行の指定

JavaScriptでは呼び出すための記述のみで大丈夫ですが、オプションを色々指定できます。

cosha();

See the Pen
cosha by 野田英里 (@fikgpnyd)
on CodePen.

④ オプションで位置やカラーを調整する

影の位置

cosha({
  x: '20px',
  y: '6px'
});

ぼかし

cosha({
  blur: '20px'
});

明るさ

cosha({
  brightness: '100%'
});

彩度

cosha({
  saturation: 1.5
});

まとめ

めちゃくちゃ簡単でしたね。でも、なんだか凝った感じな見栄えです。使用する写真によるかなと行った所。今回は、背景を黒にしてかっこいい感じにしてみました。