タグ グラデーション
人気順 10 users 50 users 100 users 500 users 1000 users「Google Chrome」のキャラ「くろーむ」ちゃんがアニメ化、声優は上坂すみれさんが担当。ユーザーの反応から生まれたキャラクターが公式に採用され、第1話と2話が無料公開
この度、公開されたアニメの主人公である「くろーむ」は、Googleの公式SNSにて投稿された「Chrome のロゴ、実は微妙にグラデーションがかかってる」という内容に対して、「手足角生えてるみたいに見えた」というユーザーの反応から、実際にキャラクターのイラストが多数描かれたことで公式にキャラクター化されたものだ... 続きを読む
グラデーションがくすんでしまうのには原因がある、それを自動的に解決して美しいグラデーションを生成できる無料ツール -Gradient Generator
美しいグラデーションを作成するには、補間するカラーにグレーが含まれないようにすることが重要です。グレーが含まれてしまうと、それがデッドゾーンになり、汚いグラデーションになってしまいます。 このグレーのデッドゾーンを回避し、簡単に美しいグラデーションを生成できる無料ツールを紹介します。 Gradient Gene... 続きを読む
CSSで美しいメッシュグラデーションを作成できる無料ツール、アニメーションで動くメッシュグラデーションも簡単 -MSHR
最近のWebサイトやスマホアプリでよく見かけるのが、メッシュグラデーションです。メッシュグラデーションとは複数のポイント間でカラーをさまざまな方向に流し込んだグラデーションで、動きや変化を表現する方法として人気があります。 この美しいメッシュグラデーションをCSSで簡単に作成できるツールを紹介します。メ... 続きを読む
太巻と細巻を一本で味わう!マッキー寿司をつくる
太巻と細巻を1本で味わえないかと考えていたときに、ふとマッキーが目に入った。 太字と細字を1本で兼ねているマッキー。……これだ!! マッキー寿司を作ろう!! 理想の巻き寿司 太巻と細巻を1本で味わいたい。細巻を食べていたら、いつの間にか太巻きになっているような、グラデーションの構造に出来ないだろうか。1... 続きを読む
CSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます
23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。 たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便... 続きを読む
商用でも完全に無料ですごい! デザインやイラストでかなり使える有料レベルの高品質なテクスチャ素材 -ResourceBoy
個人でも商用でも完全に無料で利用できる、高品質でさまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ゴールド、大理石、煉瓦塀、スモーク、花火、蜘蛛の巣、シャドウ、クラフトペーパー、ブラックペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとに... 続きを読む
これは便利! HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。 このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザイ... 続きを読む
【初学者にこそ伝えたい】Vue.js コミュニティ入門
💡 ヒント: コミュニティとはグラデーションである 🚩 序 こんにちは。Vue Beginners (の管理人) です。 すでに多くの方に記事を見ていただけていてとても嬉しく思います。感謝しています。 今回はソースコードは 1 行も出てきません。 ひょっとすると、Vue.js の勉強法や使い方などを求めている方にとっては多少つまら... 続きを読む
商用利用でも完全に無料! デザインやイラストでかなり使える高解像度テクスチャ素材 -ResourceBoy
個人でも商用でも完全に無料で利用できる、さまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ホワイトペーパー、ブラックペーパー、クラフトペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難... 続きを読む
【緊急声明】 「体の性のグラデーション(スペクトラム)モデル」は人権侵害です。
LGBTQ等性的マイノリティの皆さんの説明において,以前から「体の性も性分化疾患の人たちがいるからグラデーション」という説明がされることがあります。 ですが,以前からネクスDSDジャパンでもお伝えしているとおり,学校で体の性にもグラデーションモデルが使われた授業で,不登校になったDSDs当事者のお子さんについ... 続きを読む
最近のWeb制作に役立つ、CSSの便利ツール総まとめ
最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニ... 続きを読む
CSSで実装する時、フロントエンドのデベロッパーは何を考え、どういうことに配慮して実装するのか
UIコンポーネントをCSSで実装する時に、何を考えながら実装するのか、どういうことに配慮して実装するのかを紹介します。 CSSの何を使用して配置するのかベストか、レスポンシブの対応方法をはじめ、グラデーションをより美しく実装する方法、clamp()によるフォントサイズの定義、論理プロパティの使用など、CSSの実践的... 続きを読む
商用利用でも完全に無料! デザインやイラストにぴったり、高解像度8Kのテクスチャ素材がいっぱい -ResourceBoy
個人でも商用でも無料で利用できる、高解像度8Kのさまざまな種類のテクスチャ素材を紹介します。 ホワイトペーパー、ブラックペーパー、クラフトペーパー、段ボール、デニム地、水彩、グラデーションなどが揃っており、それぞれカテゴ...記事の続きを読む 続きを読む
ブックマークしておくと便利! 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ
WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等... 続きを読む
TVアニメ「僕の心のヤバイやつ」公式サイト
とうとうアニメ化していただくことになりました! 私含め、心待ちにしていただいた方も多いかもしれません。 柔らかなグラデーションのように、2人の関係や心の内の変化を丁寧にじっくりと描いてきた作品ですので、音楽や動き、色彩が加わることによってさらに繊細に表現できる映像化を嬉しく思います。 これも変わらず... 続きを読む
フォトショップで写真をハーフトーン、ドット加工!おすすめ素材16選 - PhotoshopVIP
写真の濃淡をさまざまなサイズの丸いドットで表現する、ハーフトーン加工。 印刷されたレトロなコミック漫画のような仕上がりから、グラデーションで色付けしたりと、人気の高い写真やイラスト加工のひとつです。 今回は、フォトショップでボタンをクリックするだけでハーフトーン効果を作成できるおすすめ素材を厳選セ... 続きを読む
masiki 『ゆうだち』6/3~6/15@新宿眼科画廊 on Twitter: "Eye of the Precure💐 個人的に魅力を感じるプリキュアの瞳を有線七宝で再現してみました👀虹彩の特徴やグラデーションを再現したくて手持ち
Eye of the Precure💐 個人的に魅力を感じるプリキュアの瞳を有線七宝で再現してみました👀虹彩の特徴やグラデーションを再現したくて手持ちの釉薬厳選&調合したよ〜(4枚目は施釉途中のもの)それぞれ何キュアか分かるかな?… https://t.co/vhX1LxU59J 続きを読む
グラデーション付き影をコピペ作成 CSS Shadow Gradients とおすすめツール - PhotoshopVIP
グラデーションは鮮やかな配色や動く流体Blobシェイプなど、さまざまな方法や見せ方で見かけるようになっています。 2色の配色によるグラデーションをつかった影、シャドウグラデーション(英: Shadow Gradients)を手軽に作成できるオンラインツール「CSS Shadow Gradients」が公開されています。 CSS Shadow Gradients... 続きを読む
【CSS】「なんかグラデーションが汚くなんだけど」を解決する。 - Qiita
概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか? 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この... 続きを読む
CSSで区切り線を実装するのは、flexboxが簡単で便利! レスポンシブ対応の区切り線を実装するテクニック
要素間の区切り線をレスポンシブ対応にする時、どのように実装していますか? flexboxで実装すると、1つのコードでコンテンツに合わせて伸縮し、デスクトップもスマホにも対応、スクリーンサイズに合わせて垂直・水平にも切り替えるのにも対応できます。さらに、区切り線をグラデーションや破線にするのも簡単です。 CSS... 続きを読む
シンプルで使いやすいのが登場! UIのデザインで役立つ、色に関する便利なツールがまとめて利用できる -hue.tools
指定したカラーの色相、さまざまな詳細情報、混色・ブレンド・変換・グラデーションなどを生成できるオンラインツールを紹介します。 最近のUIデザインで見かける複数のカラーを使用した美しいグラデーションを生成したり、そのカラーを使用したUIデザインや写真素材なども表示され、色に関する便利なツールがまとめて利... 続きを読む
グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
グラデーションを作成した時に、中央がグレーに濁ってしまうこと(グレーデッドゾーン)があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当... 続きを読む
CSSで複数の色を組み合わせたメッシュグラデーションを作成する方法
2022年1月5日 CSS メッシュグラデーションとは、複数のポイントで色を指定したグラデーションのことです。あえて統一感をなくすことで、遊び心のあるふわふわした印象となります。このメッシュグラデーションをCSSで作成してみましょう! 基本の円形グラデーション まずは基本的な円形グラデーションの指定方法です。bac... 続きを読む
UIデザインの最近のトレンド、近未来的なかっこいいグラデーションを実装するCSSのテクニック
近未来的なかっこいい印象を与えるグラデーションを使用した、テキスト・ボタン・背景のスタイルを実装するCSSのテクニックを紹介します。 白地のテキストをわずかに輝かせたり、ダークモードに映えるグラデーションでテキストやボタンを目立たせたり、カードに美しいグラデーションの背景を実装したり、少し色味を変え... 続きを読む
関数型はプログラミングスタイル
命令型及び関数型はプログラミングスタイル。命令型と関数型の間は0/1ではなく、グラデーションがある。 関数型へのアプローチ 可変の変数(var)を使わず、不変の変数(val)を使う 可変のオブジェクト(mutable)を使わず、不変のオブジェクト(immutable)を使う voidやUnitなどの戻り値のない関数は使わない。高階関数を使う... 続きを読む