商用でも完全に無料ですごい！ デザインやイラストでかなり使える有料レベルの高品質なテクスチャ素材 -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回ぐらい詳細なネタバレをくらって脳内上映ができるようになってしまった『花束みたいな恋をした』。本作に「『ピクニック』を読んでも何も感じない人間」という台詞が二回あると教えてもらって読んでみたのだけど、この「何も感じない」にはグラデーションがあると思えた... 続きを読む

ユニコーンっていったら白でしょうって思ってたら、最近は蛍光ゆめかわ色..

2021/02/17 101 users ユニコーン ターゲット 年齢 低年齢化 初体験

ユニコーンっていったら白でしょうって思ってたら、最近は蛍光ゆめかわ色のグラデーションみたいのがユニコーンカラーって言われてて、なんかそんな色に染めるのがユニコーン界で流行ってるらしい。 たぶん、初体験の年齢が下がってユニコーン好みのティーンズ美少女が軒並み非処女に→ターゲットが低年齢化→女児好みのパ... 続きを読む

アニメ調3Dキャラクターの作り方（テクスチャ編）｜MuRo｜pixivFANBOX

2020/12/07 16 users テクス テクスチャ モデリング 作り方 造形

この解説は、造形を作る（モデリング）からの話ではなく、色塗り（テクスチャ）を使ってアニメ調にする話です。 テクスチャの作り方でアニメ的な雰囲気に見せる方法を解説していきます。 1. テクスチャをベタ塗りにする まず、テクスチャをベタ塗りにします。元のテクスチャから色を選択してグラデーションがないテクス... 続きを読む

CSSのスゴ技！美しいグラデーションのボーダー、角丸や半円のテクニックを使用したチケットを実装する方法 | コリス

2020/11/10 12 users コリス 半円 CSS ボーダー スゴ技

CSSで実装された美しいグラデーションのボーダー、さらにはそれを角丸し、半円を加えたチケットを実装するスタイルシートのテクニックを紹介します。 グラデーションのボーダーは割と簡単に実装できますが、角丸にするのは目から鱗でした。また、簡単なJavaScriptで3Dも再現されています。 Gradient borders with curves... 続きを読む

幅いっぱいの画像に与えるさまざまなCSSグラデーションを簡単に生成できる便利ツール -The Hero Generator | コリス

2020/05/11 19 users ジェネレーター コリス CSSグラデーション カスタマイズ

ヒーローヘッダに使用する幅いっぱいの画像に与えるさまざまなグラデーションのスタイルシートを1クリックで生成できるジェネレーターを紹介します。 グラデーションのカスタマイズや自分の画像をアップロードすることもできるので、出...記事の続きを読む 続きを読む

CSSは奥が深い！グラデーションとシャドウをこれまでより美しく実装するテクニック | コリス

2020/01/17 32 users コリス 美しいグラデーション UIデザイン スマホアプリ

WebサイトやスマホアプリのUIデザインでよく使用されるグラデーションとシャドウをより美しく実装するスタイルシートのテクニックを紹介します。 このテクニックを使用したプラグインやオンラインツールもリリースされているので、思い通りの美しいグラデーションとシャドウを簡単に利用できます。 Using easing for mor... 続きを読む