グラデーションがくすんでしまうのには原因がある、それを自動的に解決して美しいグラデーションを生成できる無料ツール -Gradient Generator

2024/10/29 334 users 美しいグラデーション デッドゾーン 原因 無料ツール グレー

美しいグラデーションを作成するには、補間するカラーにグレーが含まれないようにすることが重要です。グレーが含まれてしまうと、それがデッドゾーンになり、汚いグラデーションになってしまいます。 このグレーのデッドゾーンを回避し、簡単に美しいグラデーションを生成できる無料ツールを紹介します。 Gradient Gene... 続きを読む

CSSで美しいメッシュグラデーションを作成できる無料ツール、アニメーションで動くメッシュグラデーションも簡単 -MSHR

2024/08/07 12 users CSS アニメーション スマホアプリ 方向 ツール

最近のWebサイトやスマホアプリでよく見かけるのが、メッシュグラデーションです。メッシュグラデーションとは複数のポイント間でカラーをさまざまな方向に流し込んだグラデーションで、動きや変化を表現する方法として人気があります。 この美しいメッシュグラデーションをCSSで簡単に作成できるツールを紹介します。メ... 続きを読む

太巻と細巻を一本で味わう！マッキー寿司をつくる

2024/07/19 13 users マッキー 太字 太巻 巻き寿司 細字

太巻と細巻を１本で味わえないかと考えていたときに、ふとマッキーが目に入った。 太字と細字を１本で兼ねているマッキー。……これだ！！ マッキー寿司を作ろう！！ 理想の巻き寿司 太巻と細巻を1本で味わいたい。細巻を食べていたら、いつの間にか太巻きになっているような、グラデーションの構造に出来ないだろうか。1... 続きを読む

CSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます

2024/06/24 15 users テクニック テキスト 面白いテクニック CSS 背景画像

23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。 たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便... 続きを読む

商用でも完全に無料ですごい！ デザインやイラストでかなり使える有料レベルの高品質なテクスチャ素材 -ResourceBoy

2024/04/25 532 users スモーク 大理石 蜘蛛 シャドウ 水彩

個人でも商用でも完全に無料で利用できる、高品質でさまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ゴールド、大理石、煉瓦塀、スモーク、花火、蜘蛛の巣、シャドウ、クラフトペーパー、ブラックペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとに... 続きを読む

これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles

2024/03/06 206 users CSS HTML ツールチップ デザイ div要素一つ

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。 このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザイ... 続きを読む

【初学者にこそ伝えたい】Vue.js コミュニティ入門

2024/02/19 8 users Vue.js 初学者 ヒント コミュニティ ソースコード

💡 ヒント: コミュニティとはグラデーションである 🚩 序 こんにちは。Vue Beginners (の管理人) です。 すでに多くの方に記事を見ていただけていてとても嬉しく思います。感謝しています。 今回はソースコードは 1 行も出てきません。 ひょっとすると、Vue.js の勉強法や使い方などを求めている方にとっては多少つまら... 続きを読む

商用利用でも完全に無料！ デザインやイラストでかなり使える高解像度テクスチャ素材 -ResourceBoy

2023/10/19 349 users 水彩 段ボール チョークボード 商用 クラフトペーパー

個人でも商用でも完全に無料で利用できる、さまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ホワイトペーパー、ブラックペーパー、クラフトペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難... 続きを読む

【緊急声明】 「体の性のグラデーション（スペクトラム）モデル」は人権侵害です。

2023/05/21 25 users スペクトラム 性分化疾患 人権侵害 緊急声明 とおり

LGBTQ等性的マイノリティの皆さんの説明において，以前から「体の性も性分化疾患の人たちがいるからグラデーション」という説明がされることがあります。 ですが，以前からネクスDSDジャパンでもお伝えしているとおり，学校で体の性にもグラデーションモデルが使われた授業で，不登校になったDSDs当事者のお子さんについ... 続きを読む

最近のWeb制作に役立つ、CSSの便利ツール総まとめ

2023/01/19 165 users CSS Flexbox SVG フォントサイズ Web制作

最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニ... 続きを読む

CSSで実装する時、フロントエンドのデベロッパーは何を考え、どういうことに配慮して実装するのか

2022/11/24 25 users デベロッパー CSS フロントエンド CLAMP レスポンシブ

UIコンポーネントをCSSで実装する時に、何を考えながら実装するのか、どういうことに配慮して実装するのかを紹介します。 CSSの何を使用して配置するのかベストか、レスポンシブの対応方法をはじめ、グラデーションをより美しく実装する方法、clamp()によるフォントサイズの定義、論理プロパティの使用など、CSSの実践的... 続きを読む

商用利用でも完全に無料！ デザインやイラストにぴったり、高解像度8Kのテクスチャ素材がいっぱい -ResourceBoy

2022/11/16 9 users 水彩 段ボール 商用 クラフトペーパー ResourceBoy

個人でも商用でも無料で利用できる、高解像度8Kのさまざまな種類のテクスチャ素材を紹介します。 ホワイトペーパー、ブラックペーパー、クラフトペーパー、段ボール、デニム地、水彩、グラデーションなどが揃っており、それぞれカテゴ...記事の続きを読む 続きを読む

ブックマークしておくと便利！ 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ

2022/08/10 412 users テクスチャ シェイプ アイソメトリック 背景 SVG

WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等... 続きを読む

TVアニメ「僕の心のヤバイやつ」公式サイト

2022/08/01 208 users ヤバいやつ TVアニメ 心待ち 公式サイト 色彩

とうとうアニメ化していただくことになりました！ 私含め、心待ちにしていただいた方も多いかもしれません。 柔らかなグラデーションのように、2人の関係や心の内の変化を丁寧にじっくりと描いてきた作品ですので、音楽や動き、色彩が加わることによってさらに繊細に表現できる映像化を嬉しく思います。 これも変わらず... 続きを読む

フォトショップで写真をハーフトーン、ドット加工！おすすめ素材16選 - PhotoshopVIP

2022/06/27 6 users 濃淡 PhotoshopVIP フォトショップ コミック漫画

写真の濃淡をさまざまなサイズの丸いドットで表現する、ハーフトーン加工。 印刷されたレトロなコミック漫画のような仕上がりから、グラデーションで色付けしたりと、人気の高い写真やイラスト加工のひとつです。 今回は、フォトショップでボタンをクリックするだけでハーフトーン効果を作成できるおすすめ素材を厳選セ... 続きを読む

masiki 『ゆうだち』6/3~6/15@新宿眼科画廊 on Twitter: "Eye of the Precure💐 個人的に魅力を感じるプリキュアの瞳を有線七宝で再現してみました👀虹彩の特徴やグラデーションを再現したくて手持ち

2022/06/14 9 users ゆうだち https t.co プリキュア 新宿眼科画廊

Eye of the Precure💐 個人的に魅力を感じるプリキュアの瞳を有線七宝で再現してみました👀虹彩の特徴やグラデーションを再現したくて手持ちの釉薬厳選&調合したよ〜（4枚目は施釉途中のもの）それぞれ何キュアか分かるかな？… https://t.co/vhX1LxU59J 続きを読む

グラデーション付き影をコピペ作成 CSS Shadow Gradients とおすすめツール - PhotoshopVIP

2022/06/13 11 users PhotoshopVIP 配色 オンラインツール 見せ方 方法

グラデーションは鮮やかな配色や動く流体Blobシェイプなど、さまざまな方法や見せ方で見かけるようになっています。 2色の配色によるグラデーションをつかった影、シャドウグラデーション（英: Shadow Gradients）を手軽に作成できるオンラインツール「CSS Shadow Gradients」が公開されています。 CSS Shadow Gradients... 続きを読む

【CSS】「なんかグラデーションが汚くなんだけど」を解決する。 - Qiita

2022/04/08 297 users Qiita 茶色 CSS 真ん中あたり みなさん

概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか？ 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この... 続きを読む

CSSで区切り線を実装するのは、flexboxが簡単で便利！ レスポンシブ対応の区切り線を実装するテクニック

2022/03/08 75 users Flexbox CSS レスポンシブ対応 テクニック 破線

要素間の区切り線をレスポンシブ対応にする時、どのように実装していますか？ flexboxで実装すると、1つのコードでコンテンツに合わせて伸縮し、デスクトップもスマホにも対応、スクリーンサイズに合わせて垂直・水平にも切り替えるのにも対応できます。さらに、区切り線をグラデーションや破線にするのも簡単です。 CSS... 続きを読む

シンプルで使いやすいのが登場！ UIのデザインで役立つ、色に関する便利なツールがまとめて利用できる -hue.tools

2022/02/28 9 users 色相 ツール 変換 美しいグラデーション UIデザイン

指定したカラーの色相、さまざまな詳細情報、混色・ブレンド・変換・グラデーションなどを生成できるオンラインツールを紹介します。 最近のUIデザインで見かける複数のカラーを使用した美しいグラデーションを生成したり、そのカラーを使用したUIデザインや写真素材なども表示され、色に関する便利なツールがまとめて利... 続きを読む

グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法

2022/01/27 576 users CSS 美しいグラデーション 中央 解説 現象

グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当... 続きを読む

CSSで複数の色を組み合わせたメッシュグラデーションを作成する方法

2022/01/05 10 users Bac CSS 遊び心 複数 統一感

2022年1月5日 CSS メッシュグラデーションとは、複数のポイントで色を指定したグラデーションのことです。あえて統一感をなくすことで、遊び心のあるふわふわした印象となります。このメッシュグラデーションをCSSで作成してみましょう！ 基本の円形グラデーション まずは基本的な円形グラデーションの指定方法です。bac... 続きを読む

UIデザインの最近のトレンド、近未来的なかっこいいグラデーションを実装するCSSのテクニック

2021/12/02 166 users CSS 白地 テクニック UIデザイン トレンド

近未来的なかっこいい印象を与えるグラデーションを使用した、テキスト・ボタン・背景のスタイルを実装するCSSのテクニックを紹介します。 白地のテキストをわずかに輝かせたり、ダークモードに映えるグラデーションでテキストやボタンを目立たせたり、カードに美しいグラデーションの背景を実装したり、少し色味を変え... 続きを読む

関数型はプログラミングスタイル

2021/11/28 13 users プログラミングスタイル immutable val void

命令型及び関数型はプログラミングスタイル。命令型と関数型の間は0/1ではなく、グラデーションがある。 関数型へのアプローチ 可変の変数(var)を使わず、不変の変数(val)を使う 可変のオブジェクト(mutable)を使わず、不変のオブジェクト(immutable)を使う voidやUnitなどの戻り値のない関数は使わない。高階関数を使う... 続きを読む

JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する

2021/11/11 17 users Intersection Observer スクロール

2021年11月11日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 ... 続きを読む