CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しい関数「light-dark()」が便利すぎる！
CSS Color Module Level 5に追加された新しい関数light-dark()を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark Mode Color Switching with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライトモードまたはダークモードへの対応 light-dark()関数によるライトモードとダークモードの対応 <color>値以外への対応は？ light-dark()関数のブラウザサポート light-dark
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.3
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第3弾となる今回は、フォントやテキストに関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Three. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フォントによって伝わり方が変わる 2. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 3. ダークで見やすくするためにはフォントを重くする 4. 書体の選択によって、感情表現を生み出すことができる 5. 複数の書体を使用する場合は、最大2種類のルールを守る 6. すべて大文字で読みやすくするには、文字間隔
SVGファビコンのカラーをダークモード時にCSSで変更できるの知ってた？
ダークモードに対応している時に、SVGファビコンのカラーをCSSで変更するテクニックを紹介します。 当ブログはダークモードに対応していませんが、ダークモードの周りもいろいろ充実してきましたね。 画像: ツイートより 元ネタは、下記ツイートからです。 💡 Change the color of your favicon when dark mode is enabled.#codyhousenugget pic.twitter.com/Hie9Pgt9MQ — CodyHouse (@CodyWebHouse) July 7, 2020 ファビコンをSVG画像にする利点は、スクリーンの解像度を気にすることなく、1つのファイルでファビコンを提供できることです。対応ブラウザはIEを除く、すべての主要なブラウザでサポートされています。
CSSでダークモード対応、メディアクエリ「prefers-color-scheme」の使用方法と注意点
iPhoneやAndroidでもダークテーマが採用され、ダークモードに対応するWebサイトやスマホアプリが増えてきました。 ほんの数行のCSSのみでダークモードに対応する方法と注意点を紹介します。 Dark mode in a website with CSS by Tom Brow 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのみで対応するWebサイトのダークモード ダークテーマでお勧めのテキストと背景のカラー ダークテーマではカラーの彩度は下げる ダークモードについてさらなる情報 CSSのみで対応するWebサイトのダークモード まずは、私のサイトhttps://tombrow.com/を見てみてください、ダークモードとライトモードがあります。表示されるモードはデバイスの設定に従います。 https://tombro
UIデザイナーから学ぶ！今までのカラーシステムと一貫性を保ちつつ、ダークモードに対応する方法を解説
デザイナーに、構造化が求められる要件がここ数年で急増しています。また、スマホやデスクトップの両方のOSにダークモードが導入されたことで、新たなデザインの領域を増やす必要もあります。 今までのカラーシステムと一貫性を保ちつつ、ダークモードの新しい配色を簡単に適用できるようにするカラーシステムを作成する方法を紹介します。 Dark Mode — Working with Color Systems by Søren Clausen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 色に役割を割り当てる カテゴリ 1: 色合い カテゴリ 2: 背景 カテゴリ 3: 前景要素 その他の場合 色の割り当て ダークモードへの対応 Sketch用のカラーシステム 色に役割を割り当てる すべてのシステムがそうであるように、最も重要なことは根拠です
Webサイトをダークモードに対応させよう
2020年10月16日 CSS, JavaScript ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。有機ELディスプレイでは省エネにもなるそうです。今回はそんなダークモードの設定を紹介します！ ↑私が10年以上利用している会計ソフト！ とにかく夜間見えづらい！ 私、夜間に車を運転していると、暗い所では対向車のライト以外ほとんど何も見えない状態なんですが、みんなそんなもんだと思ってたんですよね。でも話しているとどうやら私以外の人はライトじゃない部分もちゃんと見えていると…。みんな見えてるからちゃんと運転できてるってことか！こりゃー私には危険だわ
CSSブレンドモードで画像を彩ろう
2018年11月12日 CSS Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード（描画モード）」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです！今回はそんなCSSブレンドモードにフォーカスしてみようと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…によると、IE以外のモダンブラウザーに対応しています。 ブレンドモード一覧 基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。 body { background: #0bd url(beach-footprint.jpg) no-repeat;
[CSS]シンプルなスタイルシートで書かれたグラデーションを使ったかっこいい背景のテクニック -Cool Gradient
ブラウザいっぱいの背景や小さいサイズのパネルにも使える、CSSグラデーションを使った背景テクニックを紹介します。画像の使用はもちろん一切無しです。 ヴィンテージのディスプレイみたいで、面白い演出ができそうですね。 Cool Gradient 実装は非常にシンプル、コピペで簡単に利用できます。 HTML デモではdivとspanの二つを使用していますが、背景用にはdiv一つのみでOKです。 <div><span>Cool Background</span></div> CSS まずは、美しいグラデーションのスタイルシートから。 グラデーションの設定は楕円（ellipse）状でボックスの一番遠い角に合わせて（farthest-corner）います。 div { position: fixed; width: 100%; height: 100%; background-image: -webk
rgba()とfilterで背景だけを透過させる。 | かえラボBlog
"背景だけ"を透過させたい時には、background-colorにrgba()で色と不透明度を指定してやるだけでOKです。 ･･･最近のブラウザは。 rgba()に対応してないブラウザ、まぁ主にアレですが･･･にもオリジナルな素晴らしい機能filter: alpha()があります。 filter: alpha(opacity=50)とやると要素の不透明度が50％になるというやつです。 0.5じゃなくて50と指定するところもまた強い自己主張を感じますね。昔気質とでも言いましょうか。 しかし、この素敵機能filter: alpha()では、"背景だけ"でなく子要素含め、すべて透過してしまいます。 とても面倒見が良いです。 しかし、今回のように"背景だけ"に透過を適用したい。そんな時は"DirectX FilterのGradient Filter"の出番です。 これを使って背景にグラデ
PIEバグレポート
この記事は1年以上前の記事のため、内容が古い可能性があります。 複数のタグの中にあるブロック要素のタグを角丸にする場合、角丸が効かない場合があります。 例） <div class="box_outer"> <div class="box"> PIEではIEでも<br /> 角丸・ドロップシャドウ・グラデーションを<br /> 実行できます。 </div> </div> この要素の各スタイルは以下の通り .box_outer{ padding:20px; background-color:#FFF; } .box { padding:20px; background-color:#EEE; border:solid 1px #000; /*角丸*/ -moz-border-radius: 15px; /*FireFox*/ -webkit-border-radius: 15px; /* Sa
[JS]さまざまなDOM要素にツールチップを表示するスクリプト -Bubble Popup
テキストリンクをはじめ、p, span要素のテキスト、li要素のテキスト、div要素、img要素などさまざまなDOM要素に、アニメーションを伴ったツールチップを表示するjQueryのプラグインを紹介します。 jQuery Bubble Popup v.2.0 デモページ：さまざまなDOM要素への実装例 [ad#ad-2] Bubble Popupの対応ブラウザ Internet Explorer 6.5, 7, 8, 9 (beta) Firefox 3.5.x Safari 5.0.x Opera 10.x Chrome 6.0.x iCab 4.x Webkit based browser (reKonq, Arora) KHTML-based browser (Konqueror) Bubble Popupの主な特徴 あらゆるDOM要素にツールチップ、ポップアップを作成できます。 ツ
ウノウラボ Unoh Labs: PHPで暗号化・復号化あれこれ
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Archetype, Digital Typography Design Tool by Our Own Thing, using Google web fonts