2019.09.17スポンサーリンク2018年に引き続き、2019年もグラデーションはWEBサイトに多く使われることになりそうです。いくつかグラデーションが印象的なサイトを集めてみました。Stories薄く入ったドットの升目、オンマウスで浮かび上がる地図など、洗練されてますね。2018グラデーションとゆらゆら動く球体が印象的なサイトです。株式会社Donatelloイラストにも見出しにもボタンにも、青から明るい緑のグラデーションが使われています。定番ともいえるグラデーション。そこで、CSSで簡単にグラデーションを取り入れられるツールを探してきました。Gradient」です。Gradientの画面の見方まずは画面の見方を説明します。初期画面ではスライダーに3つのカーソルがあります。それぞれ「0%(スタート部分)」の色、「50%(真ん中)」の色、「100%(終わり)」の色を指しています。スライダーは左右に移動することができます。このカーソルをクリックすると下の編集エリアで編集できるようになります。編集エリアでは色や透明度をピッカーまたは数値で設定することができます。色を追加する、減らす色を追加するには、スライダーの何もない部分をクリックします。右の色一覧にも追加されます。色を減らすには、右下の色一覧の「×」をクリックします。編集エリアの下ではグラデーションの形状(線状・円形)や角度の設定もできます。イメージからの色抽出や、プリセットカラーからの選択もできます。生成されたコードをコピペ!コードは画面下に表示されます。Compatibility」にチェックを入れるとベンダープレフィックス付きで書き出してくれます。backgroundを指定したい要素にこのコードを貼りつければ完成です。美しいグラデーションでサイトを彩ろうコードはこのようになっています。100%);}また、グラデーションを半透明にすることで、背景写真に重ねてオーバーレイ風にすることもできます。Gradientの「A」値を「50」にすればOK。コードはこのようになっています。グラデーションのコードの後ろに背景に置きたい画像のURLを指定し、さらにbackground-sizeにcoverを指定しています。まとめグラデーションには「rgba」での指定が必要だったりベンダープレフィックスが必要だったりするので、こういったジェネレータはありがたいです。使いこなせるようになりたいです。Favs」の使い方を分かりやすく紹介します。WEB【初心者CSS】忘れやすいCSS疑似要素・疑似クラスまとめCSSの疑似要素・疑似クラスの違いや使い方を初心者向けにわかりやすくまとめました。::first-letter、::first-line、::before、::after、:first-child、:last-child、:nth-child(n)、:nth-child(n-1)、:not(X)のサンプルつき。Doodle」を集めてみました。WEBそのリンク、切れてません?「dead-link-checker」で無料チェック!そのリンク切れを無料でチェックできる「dead-link-checker」の使い方を分かりやすく説明します。無料で使えるおしゃれで手軽なデザインツール、「canva」の使い方をわかりやすくお伝えします。アイキャッチの作り方のサンプルとチュートリアルです。WEB影をつけよう!「box-shadowとborder-radiusジェネレーター」ボックスなどにCSSで簡単に影(box-shadow)をつけられる、「box-shadowとborder-radiusジェネレーター」をご紹介します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。素材アーカイブ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をコピーしました。