超高速！ デザインやイラストに最適な色を組み合わたカラーパレット🎨を生成する無料ツール -Colour Palette Generator選択したカラー・テーマに基づいて、デザインやイラストに最適な色を組み合わたカラーパレットを生成する無料のオンラインツールを紹介します。 操作は快適👍で、超高速🔥！ 気になったカラーパレットはすぐに無料でダウンロードでき、さまざまなプロジェクトで使用できます。
【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita
概要 みなさんは、このドロップシャドウを見てどう思いますか？ ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね？ この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！ ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは２次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。
200種類の白色から指定された白を当てる狂気のゲームが無料公開。面白いと楽しめるか難しさに顔面蒼白となるか、色への知識と経験が問われる白熱の見極めチャレンジ
百千万億 萬（つもいよろず）氏は5月11日（水）、200パターンの白色のなかから指定された1色を見つけ出すゲーム『White 200』をオンライン上で無料公開した。 思い立って、200色の白の中から目的の白を探すゲームを作りました！ みんな遊んでね！ 200色の白から見つけよう！ – White 200 https://t.co/DxYz87J9qa #white_200 pic.twitter.com/QpxpfOa1dk — 百千万億 萬 (@TumoiYorozu) May 11, 2022 本作は、画面左上に表示されたカラーコードと一致する白色を200色の候補のなかから探していくブラウザゲーム。ルール自体はシンプルながら、色に対する知識や経験が問われる難易度となっている。 ゲームを起動すると、比較的グラデーションが視認しやすい200色でのチュートリアルが開始。回答自体は何度でも行え
半永久的に変色・退色しないスゴい塗料の仕組み ニュースイッチ by 日刊工業新聞社
神戸大学大学院工学研究科の杉本泰助教らは、半永久的に変色・退色しない塗料を開発した。光の波長程度の微細構造による分光を利用した構造色によるもので、色素を用いないため分解による変色や退色が起きない。従来の構造色塗料の課題を解消し、見る角度に依存せず、明確な色合いを実現。塗料や顔料のほか、化粧品やバイオ材料などの素材としての活用や微小ディスプレーへの応用など、広い用途を見込む。 同塗料の原料は直径ナノメートル（ナノは１０億分の１）レベルのケイ素結晶の微細粒子。真球に近い形状の整った粒子作製技術を用い、作製した粒子を直径ごとに分離する。光の波長程度の直径を持つ球形の内部で発生する光の散乱と、粒子の集団による増幅効果による「ミー共鳴」現象により、粒子の直径ごとに特定の波長の光を強く散乱する。粒子のサイズによって色合いを制御できる。粒子が分散した溶液により大面積への塗布も容易。 通常の色素を使った顔
【CSS】「なんかグラデーションが汚くなるんだけど」を解決する。 - Qiita
概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか？ 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この記事を読んで理解すれば、綺麗なグラデーションが簡単に作れるようになるでしょう。 原因 1. RGBについて理解する RGBは、赤（Red）、緑（Green）、青（Blue）の3つの色を それぞれ、0~255の値を指定することで、色が作られます。 例えば、 R: 255, G: 0, B: 0 → 赤 R: 255, G: 255, B: 0 → 黄色 このように色が指定されます。 では、RGB全てが同じ値の時はどんな色になるでしょうか？ 答えは、↑このようにグレースケールカ
グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する
2023年2月7日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 この記事は動画でも紹介しています。動画派の方はこちらを御覧ください！ このテキストを実装したい！ Macbook Proの紹介ページにあるグラデーションカラーのテキストです。スクロールするとグラデーションの位置も変わるのがわかりますね！ Intersection Observerとは？ 従来、スクロールに合わせて要素を操るには scroll というイベントを利用していました。ただ、それだと画面サイズが変わったら再計算しないといけ
かおりゅ on Twitter: "とんでもないサイトを知ってしまった。絵描きやデザイナー大歓喜のカラーチャート『Colorbase』https://t.co/CLWprkukt6 色を選ぶと、その色の補色・類似色・同じ明るさを持つ色・白と合わせた時の見やすさ・色相… https://t.co/rOgsnechfT"
とんでもないサイトを知ってしまった。絵描きやデザイナー大歓喜のカラーチャート『Colorbase』https://t.co/CLWprkukt6 色を選ぶと、その色の補色・類似色・同じ明るさを持つ色・白と合わせた時の見やすさ・色相… https://t.co/rOgsnechfT
Web制作の現場で使えるWebサービス13選！無料で使えるサービスを集めてみた | BUILD Journal
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
一般にガラスの単レンズでは色収差や球面収差などが強く生じますが、人間の目のレンズである水晶体では、なぜそのようなことが生じないのでしょうか？脳の方で補正しているのでしょうか？
回答 (9件中の1件目) 網膜の視細胞には、三原色の色を見分ける3種類の「錐体細胞」と、色は見分けられないが暗い所で感度が高い「桿体細胞」があります。色を見分ける錐体細胞は視野の中心部に密集しており、周囲はほとんど桿体細胞が分布しています。すなわち、網膜では中心部（すなわち水晶体レンズの光軸）付近でしか色を捉えていません。したがって、レンズの光軸から外れた所で生じる、色収差による色ずれは、網膜で捉えられていません。 これは信じがたいことだと思われるかもしれません。私も子供の頃は信じがたいと思いました。我々が周囲の光景を見る時、視線の先だけがカラーでその周囲はモノクロだとは見えず、光景の...
【パワポ研の決算資料探訪①】Goodpatch社の決算説明資料はシンプルが故に美しい｜パワポ研
決算説明会資料というものがあります。株主に向けて、当期あるいは通期の決算説明を行うための資料です。主に企業のIR室（Investor Relations）、つまり企業が株主向けに現況や今後の見通しを広報する活動を主に実施する部門が書きます。 そのIR室の役割の一つに決算説明会資料の作成がありますが、これはすごく骨の折れる作業な一方で、報われない作業でもあります。なぜなら、IR担当部という全然力がないような部が、関係各所に数字をもらったり現況を把握したりレビューしてもらったりし、その上えらい人からも余計な口出しが色々と入るからです。労多くして、という典型例ですね。 しかし、今回ご紹介するGoodpatch社についてはそれはあてはまりません。なぜなら、Goodpatch社は「デザイン」という業務が事業に大きく影響するからです。そんな会社が、自社の発表する資料で手を抜くわけがなく、またそれの見栄
News Up ５＋３が７になるのはなぜ？共感覚という個性 | NHKニュース
「子どもが、５＋３＝７と間違える。聞いてみたら、数字に色が付いて見えていた」子どもの母親という人のツイートです。子どもがなぜ、こうした答えを書いたのか、色が付いて見えたのか。 実は数字や文字などに、色彩などほかの感覚が一緒になって感じられる人がいます。「共感覚」と呼ばれる現象です。５＋３を７にしたのには理由があったんです。（ネットワーク報道部 記者 目見田健・加藤陽平）
【photoshop】風景写真をイラスト・アニメ風に加工する｜ヱノプルギスの夜 / こころ動かす者
（2019.02.23に書いたブリコルールのブログ記事の引越しです） 写真をイラストっぽく使いたいなどの局面はいろいろありまして、備忘録も兼ねて。 会社の近所で撮影した写真をこんな感じでイラスト風にして、弊社のキャラクターと合わせてみました。まあまあアニメのワンシーンのようにも見えなくもない？？ 最近だと、アプリで簡単に写真をイラスト風に変換できるものもありますが、photoshopを使います。 ベースとなるレイヤーを作成・調整する もとの写真はこちらです。 なんの変哲もない、何年か前に撮ってフォルダの奥底で眠っていた写真ですが、空を抜きやすい写真を選ぶとよいです。 【イメージ】＞【色調補正】＞【HDRトーン…】を選択します。 他のサイトなどでもHDRトーンを使って紹介しているところは多いです。私もこれを使います。HDRトーンの正しい使い方は正直なところ自分はわかっていません…。調整がまと
個人開発のUI設計術 - Crieit
あんど( @ampersand_xyz )と申します。 クイズメーカーなど、色々なサービスを個人でリリースしているフリーのエンジニアです。 個人開発を支える技術のアドベントカレンダーではサービスを構築するArchitectureに関する技術の話題が多いなか、周りの方やマシュマロからの匿名メッセージ質問でUIのことに関する質問などが多かったので、本投稿ではUIやデザイン周りに関するTechnic…と言えるほど上等なものではないのですが、そのあたりの技術をお話したいと思います。 なお、自分は正直かなり我流で適当にやっているので、もっといい方法のツッコミなど歓迎しております。 1.画面サイズの最大・最小幅を最初に決めておく まずはじめにここを決めます。 いかにリキッドデザインやレスポンシブで画面を作成するといえども、極端に幅が小さい、または大きいデバイスを相手にする場合、どうしてもサイズ整合性を
見えない色、見えてしまう色 ～脳が感じる色のふしぎ～ 静岡科学館る・く・る 講演 2013年
静岡科学館る・く・る ９階イベントホール 2013年1月13日（日） 13：30～14：30 見えない色、見えてしまう色 ～脳が感じる色のふしぎ～ 立命館大学文学部人文学科心理学専攻（心理学域） 北岡 明佳 email HP （立命館大学 文学部 心理学専攻） Since January 3, 2013 ハンドアウト <色の錯視クイズ> 左のハートと物理的に同じ色は（1）（2）（3）のうちどれでしょう。 問1 解答 問2 解答 問3 解答 問4 解答 問5 解答 問6 解答 問7 解答 問8 解答 問9 解答 問10 解答 2012/8/17 ムンカー錯視を用いた作品「赤の渦巻き」↓ 赤紫がかった赤い螺旋とオレンジ色がっかった赤い螺旋があるように見えるが、どちらも同じ赤である。 Copyright A.Kitaoka 2002 ムンカー錯視を用いた作品「緑の渦巻き」↓ 黄緑の螺旋と青緑の
ワードアートは白抜きと二重の袋文字を最初に教えるべきである（Office2010以降） - わえなび ワード＆エクセル問題集 waenavi
Word・Excel・PowerPointには、ワードアートという便利な機能があります。しかし、残念ながら、パソコン教室や市販のテキストでは、ダサい作成例だけを紹介して、インパクトがあって目立つ！などという珍妙な説明をしています。 これは完全に間違いです。このような手抜きをすると、安上がりで低レベルな内容であるという、悪い印象を与えます。 初心者が最初に身につけるべき基本的な技法は「白抜き」と「袋文字」です。今回は、この２つの技法について、まとめて出題します。繰り返し練習して「正しいワードアート」の使い方を覚えましょう。 なお、この記事ではOffice2010以降で説明します。Word・Excel・PowerPoint共通です。Office2010以降では、ワードアートは テキストボックス と統合されています。詳しくはこちらの記事をご覧ください。 わえなび ワード＆エクセル問題集 id:w
知らないと損する！？色の相性についての考え方と組み合わせの方法 - MIKINOTE
色というのものは、組み合わせ次第で、さまざまな印象をあたえることが出来ます。そういう意味で、何かを作り出す際には非常に重要な要素の1つであると言えます。 ここ最近、僕が読者になっているいるブログのいくつかで、ブログのデザインや配色についての話が多いので、ちょいと書いてみることにしました。 色に対する感覚って、生まれ持ってのセンスだ！という話がけっこう多いです。けれども、「センスが良い配色」と言うのは、結局は色についての理論的なものを知っていないと、なかなか出来ないものだったりするんですよ。美術でもデザインでも、努力はセンスに勝ります。 特に、色と色の組み合わせってのは重要です。単体だと美しい色でも、別の色を組み合わせると途端に汚い色に見えちゃったり、逆に一見するとみすぼらしい色に見えても、別の色と組み合わせるとすごく美しい組み合わせに見えることもあります。 そして、色の相性や色に対するセン
なぜドレスの色の錯覚はおきたか？-色の恒常性- - Sideswipe
ドレスの写真って？ インターネットで見る人によって二通りの色に見えるドレスの画像が話題になっていました。結論からいえばこのドレスは青と黒なのですが、「青と黒に見える」派と「白と金に見える」派に分かれるのです。あなたはどちらに見えますか？ 引用元: http://swiked.tumblr.com/image/139988249090 「ディスプレイが違うから」といった説明も見受けられますが、同じディスプレイを見て意見が割れている方もいることから、影響はあるにしても主要因ではなさそうです。 また、「年をとると網膜の細胞が衰えて云々」という意見もありますが、老若男女はあまり関係なく青黒派と白金派がいるので、こちらの影響も少なさそうです*1。 それではこの理由について解説してみます。間違えてたら教えてください。 30秒で分かる説明 人間は周囲の状況が変わっても同じものは同じ色で見えるように脳内で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のUIデザインで見かける、美しいCSSグラデーションのコードのまとめ -Design Gradients
色見本と配色サイト - color-sample.com
