CSSのみで色が変化する背景グラデーションを作成する方法


css-gradient-animation

CSSのみで実現する背景グラデーションは既に世の中に知れ渡っていて作成ツールまでありますが、その色が次々と変化させることもできます。
CSS詳しい方なら想像できると思いますが、グラデーションにアニメーションをミックスします。

CSSの書き方

以前からリスペクトしているWebクリエイターボックスさんのサイトがすごく参考になります。
ソースコードも付いていますので、とてもわかりやすと思います。

背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！ - Webクリエイターボックス
CodePenを拝借。

See the Pen
Colourful gradient animation by Mana (@manabox)
on CodePen.

サンプル

実際に4月1日の記事で利用しているサンプルがありますのでご覧ください。


April Fool Generator - demo.minory.org

作成ツール

参考サイトにも紹介されていた、こちらのサイトで簡単に作成できます。
背景にしたい色と、角度、それから変更スピードを選択するだけで作成できます。

A CSS generator to create beautiful animated gradients for use on your website.
CSS Gradient Animator - http://bit.ly/1pEurpP
グラデーションの背景に画像を入れたり、透過も駆使することで、あなたのサイトをもっとカッコイイ背景に変更しましょう！

コメント

コメントを投稿

このブログの人気の投稿

Linuxでファイルの改行コードLF⇔CRLFを変換する方法

イメージ
前回、 Linux で文字コードがUTF-8のファイルに対して、BOM付き⇔BOMなしを 変換 する方法をご紹介しました。 最近ではあまり意識しなくなりましたが、UTFｰ8にはBOM（byte order mark）という厄介な存在があります。今回は、LinuxでこのBOMを付けたり外したりする方法をご紹介します。BOMとは？BOMを簡単に説明すると、そのファイルがUnicodeで符号化されているかどうかを、先... UTF-8のBOM付きとBOMなしを変換する方法（Linux） - Minory 今回は、 改行コード の LF ⇔ CRLF を 変換 する方法をご紹介します！ 3つの改行コード 面倒なことに、 OS によって 改行コード が異なります。 LF: UNIXやUnix系のシステム。Linux、AIX、Xenix、macOS、BeOS、Amiga、RISC OSなど。 CR+LF: CP/M、MP/M、MS-DOS、OS/2、Microsoft Windows。 CR: コモドールによるシステム、Apple IIファミリ、Mac OS（バージョン9まで）、OS-9。 改行コード – Wikipedia 普段からよく使う 改行コード は、 Linux の LF と Window の CRLF です。 利用する システム によっては、これらの 改行コード の違いが邪魔して、動かなかったりします。 そこで、 LF から CRLF 、または CRLF から LF に変換してみましょう。 改行コードを確認する fileコマンドを使う BOM編でもご紹介した file コマンド を利用して確認できます。 file sample.txt このように入力すると、 CRLF の場合は以下のように表示されます。 sample.txt : UTF-8 Unicode (with BOM) text, with CRLF line terminators. 「 with CRLF line terminators 」と表示されれば CRLF 、無ければ LF ということになります。 odコマンドを使う 以下のように実行すると、 od -c sample.txt 改行している箇所が「 \n （ LF ...
続きを読む

RHEL 7でスタティック（静的）ルートを追加する4つの方法

イメージ
今回は、 Linux の ルーティング テーブル に対して、 スタティック （ 静的） ルート を 追加 する方法をいくつかご紹介します。 と言うのも、場合によっては コマンド がなかったり、設定した結果が思うように返ってこないこともあるので、どのような状況にも対応できるように、知っていても損はないと思います。 スタティック（静的）ルートとは？ スタティックルート とは、管理者が宛先 ネットワーク への最適な ルート を手動で設定した ルート のことで、 ネットワーク の状態に変化があった場合でも、他に有効な宛先 ルート があっても、自動的にその ルート に切り替わることはありません。 ルーティングについてはじめから解説。 スタティックルーティングとは - www.infraexpert.com 設定内容の確認方法 ip コマンド を利用して、 ルーティング の設定内容を確認します。 ip r（route） すると、このように表示されます。 default via 192.168.100.254 dev ens160 proto static metric 100 192.168.100.0/24 dev ens160 proto kernel scope link src 192.168.100.10 metric 100 192.168.100.0/24 via 192.168.100.254 dev ens160 proto static metric 101 上の2行はデフォルトで設定されているものですね。 3行目の ルーティング 設定例を見ると、以下のように設定されています。 IPアドレス：192.168.100.0 サブネット：255.255.255.0 ゲートウェイ：192.168.100.254 インターフェース：ens160 メトリック：101 次に、以下の ネットワーク デバイス の情報を見てみましょう。 ip a このように表示されるはずです。 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopbac...
続きを読む

UTF-8のBOM付きとBOMなしを変換する方法（Linux）

イメージ
最近ではあまり意識しなくなりましたが、 UTFｰ8 には BOM （ byte order mark ）という厄介な存在があります。 今回は、 Linux でこの BOM を付けたり外したりする方法をご紹介します。 BOMとは？ BOM を簡単に説明すると、そのファイルが Unicode で符号化されているかどうかを、先頭の見えない 3バイト で表現するものです。 バイトオーダーマーク (英: byte order mark) あるいはバイト順マーク（バイトじゅんマーク）は通称BOM（ボム）といわれる、Unicodeの符号化形式で符号化したテキストの先頭につける数バイトのデータのことである。このデータを元にUnicodeで符号化されていることおよび符号化の種類の判別に使用する。 バイトオーダーマーク – Wikipedia 要は、この 先頭の見えない3バイト が邪魔して、多くのシステムで問題になっています。 LinuxでBOMを変換する まず、以下のコマンドで対象の ファイル が BOM付き か、 BOMなし なのか確認できます。 file sample.txt 実行した結果はこのように表示されます。 sample.txt : UTF-8 Unicode (with BOM) text. この「 (with BOM) 」があったら BOM付き ということですね。 逆になかったら BOMなし という事になります。 それでは 変換 していきましょう。 ここでは、 vi のオプション -c を利用して、 ファイル を開かずに BOM を 変換 していきます。 BOMなし → BOM付き BOM付き にするには、 vi で「 bomb 」をセットして保存しているだけです。 vi -c ‘set bomb’ -c ‘wq!’ sample.txt これで BOM付き になりました！ BOM付き → BOM なし 反対に BOMなし にするには「 nobomb 」をセットします。 vi -c ‘set nobomb’ -c ‘wq!’ sample.txt これで BOMなし になりました！ あとは先程の file コマンド で確認してみてください。
続きを読む