This page is intended for users in Germany. Go to the page for users in United States.

CSSのみで作る三日月のアニメーション(CSS Variablesの説明)

こんばんはこんばんわ!定期的に投稿してみようかなと思ってもう1記事を投稿しました。暇つぶしに見て行って貰えればと思います。

主要なブラウザでCSS3のサポートが充実してきました。CSS3にあるCSS Variablesが便利で、これが実用レベルでサポートされ始めればSASSの利用を減らせるのにと思って勉強する中で思いついたテーマを記事にしました。

という事で、CSSのみで三日月のアニメーションを(CSS Variables+calc+filterの実験)を作成してCodePenにデモを設置して公開しました。

https://codepen.io/tkosuga/pen/xXZGep

デモと詳細な実装はこちらのURLをご確認下さい。

CSS Variablesの使い方

主要なブラウザでCSS3のサポートが充実してきており、今回のデモで利用したCSS VariablesもChrome/Firefox/iOS Safari/Androidでサポートされています、IEはEdgeでサポートされはじめ次バージョンではめでたくサポートされるようです(2017/9/19日時点)。

http://caniuse.com/#search=variablesのキャプチャ。

利用方法は簡単で、:rootの中に--から始める変数名を付けて値を定義します。

:root {
--base-color1: blue;
--base-color2: lightyellow;
--base-color3: blue;
--radius: 125px;
}

使う時はvarを付けて変数名を指定します。直感的ですよね。calcと合わせて利用できますので汎用的な使い方が出来ます。

.crescentmoon2 {
height: calc(var(--radius)*2);
width: calc(var(--radius)*2);
background: var(--base-color);
border-radius: 50%;
background:
linear-gradient(var(--base-color1), transparent),
linear-gradient(-45deg, var(--base-color2), transparent),
linear-gradient(45deg, var(--base-color3), transparent);
background-blend-mode: multiply;
filter: brightness(300%) drop-shadow(5px 5px 10px white);
z-index: 1;
}

今回のデモでは月の半径と色の定義にCSS Variablesを利用しました。CSSで記述すると同じ値が繰り返し登場するので間違って編集してしまったり、探すのが大変だったりします。

CSS Variablesを利用すれば値に名前を付ける事で意味を持たせることが出来るのでCSSのコードが格段に分かり易くなります。CSS Variablesと名称が付いていますが変数のように上書きして利用するものではないため、実質は定数みたいなものですね。

CSS Variablesを使うメリットとデメリット

ある程度のサイト規模があればSaSSを利用してCSSを生成するので特にCSS Variablesを使う事はないかも知れません。実際にECサイト構築でSaSSは使いますがCSS Variablesは使いません。

ですがランディングページやCMSで特集ページを追加したい場合など、ページ単体の制作を行う場合にはブラウザ標準で備わっているCSS Variablesで済ませる事ができれば簡単ですよね。SaSSのインストールやNode.js実行環境をインストールする必要がないのがメリットです。

ただIE含めモバイルブラウザなど、まだ安心して利用できるサポート状況とは言えないため実用できるようになるのは来年か、それ以降になると思われます。

最後に三日月がアニメーションするデモのURLを再掲載します。

https://codepen.io/tkosuga/pen/xXZGep

参考情報

CSS Variables: https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variables
http://caniuse.com/#search=variables

calc: https://developer.mozilla.org/ja/docs/Web/CSS/calc
http://caniuse.com/#search=calc

filter: https://developer.mozilla.org/ja/docs/Web/CSS/filter
http://caniuse.com/#feat=css-filters

ダイアモンドヘッド株式会社s Stellenangebote
4 Likes
4 Likes

Wöchentliches Ranking

Weitere Rankings anzeigen