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

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

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

商用でも完全に無料ですごい！ デザインやイラストでかなり使える有料レベルの高品質なテクスチャ素材 -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のテクスチャ素材を紹介します。 ホワイトペーパー、ブラックペーパー、クラフトペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難... 続きを読む

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

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

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

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

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

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

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

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

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

【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 下記は各ポイントを意訳したものです。 ※当... 続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

これでもう、グラデーションにできてしまう濃淡の縞に困らない！バンディングをおさえるJavaScriptライブラリ | コリス

2019/09/17 61 users ハンティング コリス ビジター 濃淡 美しいグラデーション

制作時の最適なモニターや最適な照明環境で美しいグラデーションを作成しても、ビジターの環境ではバンディングと呼ばれる濃淡の縞ができてしまうかもしれません。 Webページの背景などに使用するグラデーションにできてしまうバンディングをおさえ、滑らかに表示するためのJavaScriptライブラリを紹介します。 js-noisy... 続きを読む

大企業アジャイルの勘所 #devlovex #devlovexd

2019/06/23 461 users DevLOVEX アジャイル イル 黒田 スライド

大企業アジャイルの勘所 #devlovex #devlovexd 1. 大企業アジャ イルの勘所 黒田　樹 @i2key #DevLoveX 2. 若干、愛ゆえにアジャイルをDisりますが、アジャイルの精神は大好きです。 色々なグラデーションがあるなかですべての事情を網羅することは不可能なので コントラスト強めにスライドを構成しています。解釈は読み... 続きを読む

[CSS]三角形で繋がったパンくずのナビゲーションを実装するスタイルシートのテクニックまとめ | コリス

2019/05/09 59 users シャドウ コリス バリエーション 山形 テクニック

サイトのパンくずやフォームのステップでよく見かける、ブロックに三角形の山形を隣接させたリンクの列をCSSで実装するテクニックを紹介します。 CSSでの実装方法はいろいろあり、またCSSでシャドウやグラデーションを適用したバリエーションの実装方法も解説します。 Oh, the Many Ways to Make Triangular Breadcrumb ... 続きを読む

[CSS]実装がこれなら思っていたより簡単！グラデーションが変化する美しいエフェクトを実装するスタイルシート | コリス

2019/03/07 67 users コリス CSS 実装 美しいエフェクト ポパー

最近ではグラデーションの使い方がいろいろ進化しています。中でも、ホバーやスクロールに合わせて、グラーデションが変化するエフェクトは非常に美しく、一度は試してみたい実装だと思います。 ホバーすると、マウスの動きに追従してグラデーションが変化するボタンを実装するスタイルシートのテクニックを紹介します。... 続きを読む

何の変哲もない石を割ったらなんと！世にも美しく輝くオパールが出現！（オーストラリア） : カラパイア

2019/02/07 53 users 変哲 オパール カラパイア オーストラリア 出現

オパールの産地オーストラリアの採掘場で、石の中にできたブラックオパールを披露する瞬間映像がとても美しいと反響を呼んでいる。 茶色の石にある青色の筋。その線に沿って開くと、ため息がでるほど見事なブルーのグラデーションが現れた。 誰よりも先に天然の宝石と出会うオパール採掘者の醍醐味がここにある。 Stunni... 続きを読む

[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny | コリス

2019/01/21 50 users スクリプト MITライセンス 単体 軽量スクリプト 反射

スマホの傾きを感知し、それに合わせてグラデーションを光の反射のようにシミュレートさせる軽量スクリプトを紹介します。 スクリプトは単体で動作し、MITライセンスで利用できます。 Shiny Shiny -GitHub Sh...記事の続きを読む 続きを読む

最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニック | コリス

2019/01/15 86 users コリス CSS-Tricks グラデーシ CSS ボーダー

ここ一年でグラデーションの使い方がだいぶ進化してきました。使用するカラーだけでなく、使用する場所にも変化が見られます。 Webサイトやスマホアプリで最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニックを紹介します。 Gradient Borders in CSS ※CSS-TRICKSがリニューアルされ、グラデーシ... 続きを読む

「指を入れるだけ」でネイルが印刷できるデジタルネイルプリンター「PriNail」｜FINDERS

2018/11/16 369 users FINDERS インク ネイル 小泉成器 高解像

小泉成器は、デジタルネイルプリンター「PriNail」を12月1日より発売する。 本機は、爪に直接プリントするために最適化された印刷システムを採用。1,200dpiの高解像で印刷されるため、グラデーションや精細なイラストや写真など、人の手では描けないようなデザインも再現できる。インクは水性顔料を採用。肌についても水... 続きを読む

Chromeの最新機能が楽しいぞ! CSSで円グラフや集中線が描けるconic-gradient入門 - ICS MEDIA

2018/09/11 70 users CSS 円錐 ICS MEDIA Chrome 円グラフ

2018年9月にリリースされたGoogle Chrome 69で、CSSの新しいグラデーション手法conic-gradient()関数がサポートされました。conic（円錐）の名のとおり、円錐状にグラデーションを描画するものです。conic-gradient()関数を使用すると、円錐状のグラデーションはもちろん、集中線や市松模様といった表現が手軽に実装でき... 続きを読む

ウェブサイトをもっと面白く！コピペ可能なHTML/CSSスニペット75個まとめ 2018年7月度 - PhotoshopVIP

2018/07/10 118 users グリッチエフェクト マイクロインタラクション テクニック

ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。2018年を代表するグラフィックデザインのトレンドでもある、グラデーションやグリッチエフェクト、ちょっとした動きが魅力的なマイクロインタラクション、CSS Gridプロパティの実践的な使い方など、... 続きを読む

「メルカリ アッテ」サービス提供終了のお知らせ | 株式会社メルカリ

2018/03/16 293 users メルカリ iOS版 株式会社ソウゾウ マチ 株式会社メルカリ

株式会社メルカリのグループ会社である株式会社ソウゾウは、地域コミュニティアプリ「メルカリ アッテ」のサービス提供（iOS版、Android版、Web版）を、2018年5月31日をもちまして終了させていただくことになりました。 「メルカリ アッテ」は、地域での暮らしが豊かになる場所、同じまちに暮らす人と人とのつながりのグラデーションになる場所を目指し、2016年3月よりサービス提供をしておりましたが... 続きを読む