WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！

続きを読む

Viteは2020年に発表されたフロントエンドのビルドツールです。最初「ヴァイト」と読んでたんですが、「ヴィート」と読むみたいですね。フランス語で「速い」という意味だそうです。絶賛Reactのお勉強中なので、ViteでReactの環境を作る流れを備忘録的にまとめておきます！
続きを読む

WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！

続きを読む

メッシュグラデーションとは、複数のポイントで色を指定したグラデーションのことです。あえて統一感をなくすことで、遊び心のあるふわふわした印象となります。このメッシュグラデーションをCSSで作成してみましょう！

基本の円形グラデーション

まずは基本的な円形グラデーションの指定方法です。background-image プロパティーで radial-gradient() のカッコ内に開始色と終了色をカンマで区切って指定します。

background-image: radial-gradient(開始色, 終了色);

この時、色を transparent とすると、透明色が指定でき、後述する複数の色を重ねる時に利用できます。ついでに background-attachment: fixed; を合わせて指定すれば要素いっぱいに色を広げられます。

See the Pen
CSS radial-gradient Basic by Mana (@manabox)
on CodePen.

複数のグラデーションカラーを指定

続いて複数のグラデーションカラーを重ねる方法です。上記の radial-gradient() をカンマで区切って指定するだけ！

background-image:
  radial-gradient(色1, transparent),
  radial-gradient(色2, transparent);

See the Pen
CSS multiple radial-gradient by Mana (@manabox)
on CodePen.

ただ、初期値だとどちらの色も要素の真ん中に表示されるので（これはこれでキレイですが）、少し位置をずらしてメッシュっぽくしていきます。

グラデーションの位置を指定

位置の指定には radial-gradient() のカッコ内に at 横の位置 縦の位置 で指定できます。横の位置が 0 なら左端、100% なら右端。縦の位置は 0 なら上、100% なら下です。単位は % 以外にも px などで指定可能です。

background-image: radial-gradient(at 横の位置 縦の位置, 開始色, 終了色)

以下の例では左上に#ff0、右から60%・最下部に#ff0を指定しました。

See the Pen
CSS radial-gradient position by Mana (@manabox)
on CodePen.

四隅に色を入れるとなかなか幻想的です！

See the Pen
CSS multiple radial-gradient 4 colours by Mana (@manabox)
on CodePen.

ちなみに上に記述した色が前面に表示されるので、重なり具合を見ながら調整するといいでしょう。

グラデーションが広がる大きさを指定

円形グラデーションはグラデーション光線の中心点と末端までを0〜100%で構成されています。指定する色が始まる地点を指定すれば、グラデーションの広がり具合を調整できます。指定方法は色の指定の後に半角スペースで区切って記述します。

background-image: radial-gradient(開始色 位置, 終了色 位置)

See the Pen
CSS radial-gradient size by Mana (@manabox)
on CodePen.

ちなみに開始色と終了色の位置を同じ値にするとぼかしがなくなります。これはこれで別の表現ができるのですが、今回は割愛。

メッシュグラデーションギャラリー

いろんなパターンを作ってみました！配色を考えるのも位置を考えるのも楽しいー！参考にしてみてください！

See the Pen
CSS Mesh Gradients 1 by Mana (@manabox)
on CodePen.

See the Pen
CSS Mesh Gradients 2 by Mana (@manabox)
on CodePen.

See the Pen
CSS Mesh Gradients 3 by Mana (@manabox)
on CodePen.

See the Pen
CSS Mesh Gradients 4 by Mana (@manabox)
on CodePen.

便利なジェネレーターもあります

Mesher Toolを使えば複雑なメッシュグラデーションのCSSコードを楽に生成できちゃいます。画面上にある点を動かしてグラデーションの位置を変えたり、「Rondomize」ボタンからランダムに色を表示してくれます。画面右下の「Copy CSS」ボタンからCSSコードをコピーできますよ。

選択する色や位置、大きさ次第で様々な表現が可能となりますね！今回紹介した指定方法以外の書き方もあるので、ぜひ確認してみてください！

radial-gradient() – CSS: カスケーディングスタイルシート | MDN

WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。昨年同様、今年人気だったつぶやきトップ30を紹介します。週間ランキングで1位、2位だったものがほとんどなので面白い記事がつまっていますよ！時事ネタや特設サイト等で既に見ることのできないサイトは省いているので、そんな記事も見逃したくない方はぜひフォローしてみてくださいね！
続きを読む

今年も残りあとわずか！一年間お世話になりました！毎年思いますが早いですね。という事で例年どおり、Webクリエイターボックスが今年1年どんな変貌を遂げたのか、そしてWebクリエイターボックス内でよく読んでもらった記事トップ10などを紹介しようと思います。いくつ覚えていただけてますかね？ :3
続きを読む

Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します。
続きを読む

WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！

続きを読む

2021年もあとわずか！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。
続きを読む

WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！

続きを読む