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

2025/01/23 138 users スモーク 大理石 蜘蛛 シャドウ 水彩

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

グラデーションがくすんでしまうのには原因がある、それを自動的に解決して美しいグラデーションを生成できる無料ツール -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を紹介します。 このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザイ... 続きを読む

商用利用でも完全に無料！ デザインやイラストでかなり使える高解像度テクスチャ素材 -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の実践的... 続きを読む

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

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

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

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

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

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

グラデーション付き影をコピペ作成 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... 続きを読む

グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションを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 を使って実装した例を紹介します。 ... 続きを読む

最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？ | コリス

2021/09/22 307 users コリス SVG ホログラム シャドウ ノイズ

CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chi... 続きを読む

政治的立場にグラデーションがあることを許せない人々 - メロンダウト

2021/04/01 146 users メロンダウト 立場 人々

前々回の記事が広く読まれたみたいで、ツイッターのフォロワーも１００人ぐらい増えたのですが、それとは別に左翼であろう人からDMで白饅頭氏の肩を持つなという長文DMが寄せられてきてかなり困惑しました。晒したりはしないですけど。 こんな泡沫ブロガーにDMするほどの布教活動なんてやってるから左翼は支持されないっ... 続きを読む

グラデーションを美しくするには配色が重要、真ん中辺りがグレーにくすんでしまうのを避ける方法 | コリス

2021/03/31 13 users 色相環 Photoshop コリス 真ん中 配色

グラデーションに美しい色を選んだのに、なぜかくすんでいることはありませんか？ 真ん中辺りがグレーにくすんでしまうのは、選択した2つのカラーを結ぶ線が色相環の真ん中を通過しているのが原因です。 美しいグラデーションを作成するためにどうすればよいのか、紹介します。 Photoshopなどのデザインツールだけでなく... 続きを読む

今村夏子『ピクニック』を読んで何も感じない人間と外部の語りにこそ本質が宿るドキュメンタリー - 太陽がまぶしかったから

2021/03/09 13 users 台詞 花束 ピクニック 本質 本作

『ピクニック』を読んで何も感じない人間 既に32回ぐらい詳細なネタバレをくらって脳内上映ができるようになってしまった『花束みたいな恋をした』。本作に「『ピクニック』を読んでも何も感じない人間」という台詞が二回あると教えてもらって読んでみたのだけど、この「何も感じない」にはグラデーションがあると思えた... 続きを読む