By U Zensen.

欲しいものはプログラミングで自分で作る。

ロングシャドウはCSSで作れる!SassやJavaScriptを使えばもっと楽ちん!!

2016 / 8 / 11 2016 / 8 / 12
CSS
ロングシャドウ

はじめに!!

お疲れ様です!ぴーすけです!

去年くらいに流行っていたロングシャドウデザインですが、いちいち画像を作るのって面倒ですよね。

そこで、cssで実現する方法を解説いたします!

【注意】

この記事を書く際に「css ロングシャドウ」で検索していて、少し気をつけていただきたいことに気が付きました。

cssでロングシャドウを作る方法を紹介しているサイトで「cssでロングシャドウを生成するジェネレーター」というサイトが紹介されています。そのリンクを踏むとなぜか怪しいサイトへリダイレクトされてしまいますのでクリックしない方が良いです!(2016/8/10現在)

このURLです。(頭のhは抜いています)
ttp://sandbox.juan-i.com/longshadows/

紹介しているサイト自体は悪気はないと思いますが、リンク先がおかしい感じになっていますので注意が必要です。

もし遷移してしまってもなにもしなければ大丈夫かと思います。遷移してしまうとウィルスがどうのこうのという文言が表示されますが、ウィルスなんて嘘(何度もクリックしてしまいましたが私は今の所問題ないです)なので、焦らずにすぐ画面を閉じるのが最善かと思います。

スポンサードリンク

単純にcssでロングシャドウを実装!!

さて、本題です。早速cssで作ったロングシャドウのDEMOです!

See the Pen xOmpar by p-suke (@p-suke) on CodePen.

解説

ロングシャドウをcssで作るには、text-shadowプロパティを使います。

上記の「css」ボタンを押してみていただければ分かりますが、以下のように記述することで「shadow」というクラスを持った文字にロングシャドウをつけることができます。

<p class="shadow">sample</p>
.shadow {
  text-shadow: 1px 1px #222,
                    2px 2px #222,
                    3px 3px #222,
                    /** 繰り返し */
                    100px 100px #222; 
}

この記述で何をしているかというと、1pxの影を右下に1pxずつずらして配置しているのです。それを100pxまで記述し、100px分の影を作り出しています。

さらに、ロングシャドウを枠から出さないようにするにはoverflowプロパティを使います。

もちろん枠を作るために、divなどの要素でロングシャドウを作った文字を囲みます。

<div>
 <p class="shadow">sample</p>
</div>
.shadow {
  overflow: hidden;
  text-shadow: 1px 1px #222,
                    2px 2px #222,
                    3px 3px #222,
                    /** 繰り返し */
                    100px 100px #222; 
}

これでデモのようなロングシャドウができます!

でもこれだとcssがものすごく長くなってしまうので修正が大変です。少し色を変えたくなっても100行近く変更が必要です。 なので、Sassで関数を作って対応しましょう。

Sassの関数でロンクシャドウを作る!!

See the Pen xOmYbo by p-suke (@p-suke) on CodePen.

解説

text-shadowプロパティの値となる値を生成する関数「longShadow()」を作ってみました!「SCSS」ボタンを押すと詳細が見れます。

この関数には二つの引数があり、第一引数は「影の長さ」、第二引数は「影の色」を入れることができます。

longShadow()関数でなにをしているのかというととても単純です。

/**
 * ロングシャドウを作成するメソッド
 * text-shadowのプロパティに対して使う
 * 
 * $maxCnt ループ回数
 * $color 影の色
 */
@function longShadow($maxCnt, $color) {
  //値保存用の変数を用意する(初期値として1px目の値を入れる)
  $rs: 1px  1px  $color;

  //$maxCntの数だけループする(値にどんどん追加していく
  @for $value from 2 through $maxCnt { 
    $rs: $rs ,1px * $value 1px * $value $color
  }

  //値を返す
  @return $rs
}
.shadow{
  /** text-shadowの値を取得するために以下のような感じで使う */
  text-shadow: longShadow(100, #222);
}

結局は一番初めに用意したような値を生成する関数ですが、影の長さや色を修正するのが簡単になりました。

しかし、Sassなんて使ってねーよって方のために同じような関数をJavaScriptでも作ってみました!

JavaScriptの関数でロングシャドウのを作る!!

See the Pen JKwrZz by p-suke (@p-suke) on CodePen.

原理はSassでの関数と同じです。以下のような感じで使います。

/**
 * ロングシャドウ用の値を生成する
 * (text-shadow用の値)
 * 
 * @maxCnt ループ回数(影の長さ)
 * @color 影の色
 */
var longShadow = function(maxCnt, color) {
  var rs = '';
  for (var i = 1; i < maxCnt; i += 1) {
    if (i > 1) {
      rs += ','
    }
    rs += i + 'px ' + i + 'px ' + color;
  }
  return rs;
}
<p class="shadow">sample</p>

<script>
  //影を付けたい要素を取得して、text-shadowに値を設定
  var shadow = document.getElementsByClassName('shadow');
  shadow[0].style.textShadow = longShadow(100, '#222');
</script>

さらに、影の方向を設定できる関数をSassとJavaScriptで!!

Sass

See the Pen rLoXNj by p-suke (@p-suke) on CodePen.

JavaScript

See the Pen vKbYqV by p-suke (@p-suke) on CodePen.

どちらも第三引数(x軸の方向)と第4引数(y軸)を用意したので、そこに値を入れることで影の方向が変わります。

詳しくはソースをみてください!

以上!!

以上、cssでロングシャドウを作る方法でした!

単純にcssだけでもできますし、それを管理しやすいようにSassで作ることもできますし、JavaScriptでも簡単に作ることができます!

是非やってみてください!

ちなみにPhotoshopでやる方法
(プラグインをダウンロードする必要がありますが、めちゃくちゃ簡単でした。)

たった1クリックでロングシャドウを作る方法
Pocket

コメント

コメントを残す