Gradient」を紹介しましたが、今回はさらにCSSでグラデーションにアニメーション効果を追加できるジェネレータをご紹介します。ジェネレータ好きすぎるでしょと思いますよね。作って下さった方にはいつも感謝しています。「おすすめジェネレータまとめ」といったサイトは沢山ありますが、使い方までは指南してくれなかったりするんですよね...。「コードをコピペしたけど動かないんだけど!」と悩んだことも多々あります。いまもしょっちゅうあります。このサイトは超初心者のためのものなので(自分含む)、使い方をなるべくわかりやすく案内する、できれば実践サンプルも付ける、ということを頭に置いて書いています。いうことで今回はグラデーションが時間と共に変化する、グラデーション+CSSアニメーションジェネレータの使い方です。Animatorまずは下のサンプルを見てみて下さい。美しいグラデーションでサイトを彩ろう赤~青のグラデーションが変化していくのがわかると思います。これをCSSのみで実装できるんです。背景がプレビュー、パネルの左が編集エリア、右が生成されたCSSです。色を追加するまずは色を2色以上選びます。colour+」をクリックするとカラーピッカーが表示されるので、色を選択します。カラーコードで指定してもOK。色が決まったら「Select」。この作業を2回以上繰り返します。「Preview」をクリックすると背景が変わります。(わたしいっつもReset押しちゃうのです。皆様もお気をつけください...)右のコードも書き変わっています。この時点でも背景がゆっくり動いているのが解るかと思います。Angle」はグラデーションの角度で、初期値は「270°」です(右のコードの「270deg」がここにあたります)。このホイールがなかなか調整が難しいのですが、約90deg、約180degに設定したときのサンプルをご覧ください。90degだと左右入れ替わるような感じ、180degだとグラデーションが縦になります。Angle」はアニメーションの動きの角度です。Angle」を真上・真下に揃えると、縦に動くようになります。グラデーション・アニメーションの速度を変える「Speed」で動きの速さを変えることができます。カーソルが右に行くほど速くなります。こちらも「Preview」をクリックしないとプレビューに反映されません。生成されたコードをコピペ!グラデーションが設定できたら右のコードをコピペしていきます。そのままコピペしてもCSSエラーになります。@-webkit...より前の部分は要素が指定されていないからですね。いったコードが表示されていたとします。50%}}そしてこの部分の背景に使いたい、といったHTMLコードがあるとします。50%}}こうなります。美しいグラデーションでサイトを彩ろう背景に画像を置いたサンプル前回「グラデーションを半透明にすることで、背景写真に重ねてオーバーレイ風にする」のサンプルでやったように、半透明のグラデーションを写真に重ねることもできます。写真に透明なグラデーションを重ねてオーバーレイしかもグラデーションは変化するまずHTMLコードはこんなかんじ。class="gradesample3">写真に透明なグラデーションを重ねてオーバーレイしかもグラデーションは変化する</div"></div">CSSはこんなかんじ。Gradient」をわかりやすくご紹介します。Update)から1カ月経ちましたので、気付いた事などを。WEB【初心者CSS】Cocoonで「斜めの背景」を使う方法Cocoonで「斜めの背景」を使う方法です。初心者向けのCSSです。無料で使えるおしゃれで手軽なデザインツール、「canva」の使い方をわかりやすくお伝えします。アイキャッチの作り方のサンプルとチュートリアルです。WEB【初心者CSS】忘れやすいCSS疑似要素・疑似クラスまとめCSSの疑似要素・疑似クラスの違いや使い方を初心者向けにわかりやすくまとめました。::first-letter、::first-line、::before、::after、:first-child、:last-child、:nth-child(n)、:nth-child(n-1)、:not(X)のサンプルつき。Webグランプリ」受賞サイトを調べてみました。Webグランプリ」は企業サイトのみが参加できる、WEBサイトAWORDです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。素材アーカイブ2020年2月2020年1月2019年12月2019年11月2019年10月2019年9月2019年8月おすすめサーバこのサイトでも使用しています。まとめAUTHOR書いた人nullll未経験から突然小さな会社のインハウスWebデザイナーになりましたので、WEBサイト制作に役立つ情報のメモを残そうと思います。同じような方の参考になれば幸いです。nullll14人気記事Cocoonをコーポレートサイトっぽくカスタマイズ!1トップページ編2019.10.152020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!6おまけ:新着情報編2019.11.262020.01.14Cocoonをコーポレートサイトっぽくカスタマイズ!7おまけ:ヘッダに電話番号編2019.12.122020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!2メニュー編2019.10.162020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!3料金表編2019.10.182020.01.09nullll未経験から突然小さな会社のインハウスWebデザイナーになりましたので、WEBサイト制作に役立つ情報のメモを残そうと思います。同じような方の参考になれば幸いです。Reserved.検索メニューWEBWORDPRESSWORKSいろいろプロフィールタイトルとURLをコピーしました。