CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方

2024/02/29 14 users CSS モーダル ダイアログ 期待通り スタイル

ダイアログやモーダルを表示する時に、コンテンツの上にオーバーレイを使用します。このオーバーレイはコンテンツの上に表示されるように::backdrop疑似要素で最上位レイヤーにするのが簡単です。 先日アップデートされたChrome 122でこの::backdrop疑似要素の値の継承ルールが変更されました。 Changes to CSS ::backdr... 続きを読む

マルチモーダルAI搭載スマートグラス「Frame」、Brilliant Labsが発表

2024/02/09 5 users frame ウェアラブルデバイス アシスタント 人工知能 周囲

Brilliant Labsは2月8日、マルチモーダルな人工知能（AI）アシスタントを搭載する世界初のスマートグラスだという「Frame」を発表した。スマートグラスとは、周囲に視覚的なオーバーレイを配置し、歩き回るとさまざまなテキストが表示されるウェアラブルデバイスだと考えている人にとって、Frameはまさに待ち望んでいた... 続きを読む

X（旧Twitter）のマスクCTO、リンク付きポストの画像に見出しを重ね表示すると予告

2023/11/23 14 users マスクCTO 旧twitter 見出し ＣＴＯ 予告

XのマスクCTOは、10月に非表示にしたメディア記事のリンクのタイトルを、画像にオーバーレイ表示する形で復活させると予告した。 米X（旧Twitter）のオーナーでCTO（最高技術責任者）のイーロン・マスク氏は11月22日（現地時間）、10月に非表示にしたメディア記事のリンクのタイトルを、画像にオーバーレイ表示する形で... 続きを読む

HTMLはシンプル！ 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir

2023/08/09 14 users class ライブラリ ボーダー 2KB テキスト

画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量（2Kb）ライブラリを紹介します。 HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせ... 続きを読む

デベロッパーツールの新機能が便利！CSS Gridの実装と検証が簡単になるCSS Grid editorとオーバーレイ | コリス

2021/08/02 19 users デベロッパーツール コリス CSS Grid 実装 検証

先日リリースされたChrome 92のデベロッパーツールに、CSS Gridの実装に役立つ新機能が2つ加わりました！ 1つ目はCSS Grid editorでデバッキングツール、2つ目はCSS Gridのオーバーレイ、どちらもWeb制作でCSS Gridを使用する時に大活躍すること間違いなしです。 参考: New CSS Grid debugging tools 機能は簡単に言うと... 続きを読む

デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載 | コリス

2021/04/25 31 users デベロッパーツール Flexbox コリス 実装 検証

先日リリースされたChrome 90のデベロッパーツールに、Flexboxの実装に役立つ新機能が2つ加わりました！ 1つ目はFlexboxエディタでデバッキングツール、2つ目はFlexboxのオーバーレイ、どちらもWeb...記事の続きを読む 続きを読む

Next.js 9.4 Fast RefreshとIncremental Static Regeneration等のアップデート - Qiita

2020/05/12 5 users コンポーネント Qiita 再レンダリング エラー コード

Hot ReloadがReact Refreshを用いたFast Refreshに置き換えられました。 これで編集したファイル内のコードのみが更新され、コンポーネントの状態を失うことなく再レンダリングを行ってくれます。 これに伴いエラーのオーバーレイも再設計され、ページ上ですぐにエラーを確認できるようになっています。 Incremental Sta... 続きを読む

[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法 | コリス

2019/05/21 52 users sticky コリス position CSS レイアウト

CSSのposition: sticky;を使用して、スティッキーヒーローセクションを実装する方法について紹介します。 スティッキーヒーローセクションとは、画像などをスクロールした際に固定し、その固定された画像の上にスクロールさせるコンテンツ要素です。固定された画像はズームさせたり、オーバーレイにすることもできます。... 続きを読む

10分で分かる！Adobe XDの新機能や実践的な使い方が学べるAdobe公式チュートリアルファイル中級編 | コリス

2018/06/21 75 users コリス ブッダ 四則計算 固定ヘッダ Adobe XD

Adobe XDは毎月アップデートされ、6/19のアップデートでは待望の固定ヘッダ・フッタ、アートボードのオーバーレイ、数値フィールドの四則計算に対応しました。Webサイトやスホマアプリの制作に役立つ機能ばかりで、作業がどんどん便利になっています。 そんな新機能も含めた使い方が学べる「Adobe XDスターターキット中... 続きを読む

LINEトークルーム内に自社Webアプリ展開　Messaging APIに新機能 - ITmedia NEWS

2018/06/06 34 users Messaging API ITmedia News

LINEの企業向けAPI「Messaging API」に新機能。自社Webアプリの入力画面などをLINEのトークルーム上にオーバーレイ表示できる「LINE Front-end Framework（LIFF）」が登場した。 LINEは、企業向けAPI型LINEアカウントで活用できる「Messaging API」の新機能として、LINEのトークルーム内で動作するWebアプリを実装できる「LINE Fr... 続きを読む

デザインやイラストに使えるベクター完備が助かる！複雑な形を組み合わせた美しい曼荼羅のデザイン素材 | コリス

2017/12/14 24 users コリス マンダラ 曼荼羅 ベクター完備 テクスチャ

デザインやイラストの背景やワンポイントに使ったり、テクスチャやオーバーレイとして使ったり、組み合わせて拡大・縮小・着色して利用できるベクター完備の曼荼羅（まんだら）の素材を紹介します。 個人でも商用でも無料、クライアントのプロジェクトや販売する同人誌にもクレジット無しで利用できます。 Colorful Mandala Abstract Geometric 曼荼羅の素材は、ベクター完備。 .ai（I... 続きを読む

イラストや文字に、テクスチャや背景に、ざらっとした質感を与えるPhotoshopの無料ブラシ素材 | コリス

2017/11/15 17 users ブラシ コリス 形状 ブラシ素材 レトロ風

イラストや文字に、ざらっとした質感を与えるPhotoshopのブラシ素材を紹介します。テクスチャ用とボーダー用のブラシが揃っており、さまざまな形状に利用できます。 ブラシをオーバーレイで重ねるだけで、レトロ風のデザインが完成です。 16 Subtle Grunge Photoshop Brushes Collection ブラシの使用前（左）と使用後（右）。 イラストや文字にはテクスチャ用のブラシ... 続きを読む

Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js | コリス

2017/10/10 66 users アクセシブル モーダルダイアログ モーダル コリス ライブラリ

ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドライン に準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モ... 続きを読む

二重露光やオーバーレイで写真をオシャレに加工できる『Pixlr』がいかす！画像をテクニカルに仕上げたいなら使ってみてね - wepli.2

2017/07/31 46 users Pixlr iPhoneアプリ テクニカル wepli.2

2017 - 07 - 31 二重露光やオーバーレイで写真をオシャレに加工できる『Pixlr』がいかす！画像をテクニカルに仕上げたいなら使ってみてね Androidアプリ iPhoneアプリ 画像を簡単に加工できるアプリは色々とリリースされていますが、本日ご紹介する『Pixlr』なら二重露光やオーバーレイなどを使って簡単にテクニカルな写真に仕上げることができちゃいます。僕も普段から使っている画像加... 続きを読む

iOSのビデオ作成アプリ「Clips」に、ディズニーとピクサーのキャラクターが登場 | TechCrunch Japan

2017/07/22 11 users CLiPS Pixar iOS トランジション ウッディー

Appleの超簡単 ビデオ編集アプリのClips が、4月の公開以来初めて大きく改訂された。追加された中で最大の目玉はコンテンツだ ―― 何といってもDisney/Pixarの世界から数多くのライセンス付きキャラクターが加わった。あのミッキーやウッディーがオーバーレイやトランジションのアニメーションになって登場する。 コンテンツは、簡単で失敗のないUIと並ぶClipsの大きなセールスポイントであり... 続きを読む

CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる–[FIT BLOG-フィットブログ]

2017/07/20 34 users 描画モード ブレンドモード Illustrator 内藤 康太

PhotoshopやIllustratorなどのグラフィックツールに搭載されている、ブレンドモード(描画モード)と呼ばれる機能をご存知でしょうか。要素と要素を重ねあわせることで、様々な効果を作り出すことのできる機能なのですが、実はこのブレンドモード機能、CSSの...コーディング 　内藤 康太 / 2017.07.20 CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる... 続きを読む

Cerevo、速度表示付きの運転席動画が作れるスポーツカメラ - デジカメ Watch

2017/03/16 22 users Cerevo デジカメ Watch スポーツカメラ 直販価格

REC-1（左）。右のLOG-1が同梱されている。 株式会社Cerevoは3月16日、センサーユニットを同梱するスポーツカメラ「REC-1」を発売した。直販価格は2万9,990円（税別）。出荷予定は4月下旬を予定している。 Cerevoのスポーツ用品ブランド「XON」シリーズの最新モデル。スポーツカメラの「REC-1」で記録した動画に、センサーユニット「LOG-1」で得たデータをオーバーレイ表示さ... 続きを読む

[CSS]レスポンシブ対応のグリッドの幅は？ カラム数は？ 溝のサイズは？ グリッド作成に役立つ万能ツール -Graaf | コリス

2017/02/13 38 users フレームワーク コリス 既存 数値 グリッド

人気が高いWebサイトやフレームワークなどで、実際に使用されているグリッドをページ上にオーバーレイで重ねて表示できるデザイン用のツールを紹介します。 既存のグリッドだけでなく、幅・カラム数・溝の数値を簡単に変更できる優れ ...記事の続きを読む 続きを読む

商用利用無料、紙・キャンバス・布・水彩・電子基板など高解像度で高品質なテクスチャ素材のまとめ | コリス

2016/01/18 101 users クライアント 質感 ポスター コリス 用途

Webデザインに背景として使ったり、写真や文字にオーバーレイで重ねたり、同人誌やポスターの紙のデザインで質感を加えたり、高解像度・高品質なテクスチャ素材を紹介します。 紙やノート・キャンバス・布・水彩・木・モニター・電子基板など、さまざまな用途で利用できるものをまとめました。 ここで紹介しているテクスチャ素材はすべて、個人・商用利用ともに無料で、クライアントのプロジェクトや同人誌などの販売品に利用... 続きを読む

Cerevo新アクションカムは、スノボの荷重/重心データを自分視点映像にオーバーレイ - AV Watch

2015/09/03 15 users スノボ 荷重 バインディング Cerevo AV Watch

ニュース Cerevo新アクションカムは、スノボの荷重/重心データを自分視点映像にオーバーレイ （2015/9/4 00:00） Cerevoは2日、Bluetooth通信対応スノーボード・バインディング「SNOW-1」と連携し、自分視点のスノーボード撮影動画に、荷重などのスノーボードの測定データを重ねて表示可能にするアクションカメラ「REC-1」を発表した。今冬の発売を予定しており、価格は299... 続きを読む

閲覧中のWebページのワイヤーフレームをオーバーレイ表示出来るChromeエクステンション・「Instant Wireframe」 - かちびと.net

2015/05/30 14 users コンテナ ワイヤーフレーム Chrome拡張 精度 ダミー画像

Instant Wireframe Instant Wireframeは閲覧中のWebページのワイヤーフーレムを表示するChrome拡張です。起動すると閲覧しているWebページの画像部分がダミー画像になったりコンテナがオーバーレイ表示されます。まだβ版で、オーバーレイ表示するだけのもののようですが、今後精度が向上したりダウンロード出来るようになったりすると嬉しいですね。 Instant Wiref... 続きを読む

ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」 | bl6.jp

2015/04/30 20 users ミニマルテイスト ナビゲーションメニュー メニューアイコン

jQuery fatNavはミニマルテイストなフルスクリーンのナビゲーションメニューを実装することができます。デモではメニューアイコンをクリックするとオーバーレイでアニメーション付きのメニューが表示されます。フワッとさりげない感じで表示されるのがとてもお洒落ですね。 以下はjQuery fatNavのデモになります。シンプルでスッキリしたデザインが特徴的です。 デモ メニューはフェードでズームイン... 続きを読む

[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2 | コリス

2015/03/19 161 users コリス jQuery Zepto スクリプト エフェクト

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。 アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、... 続きを読む

フルスクリーンでオーバーレイの検索ボックス - Weblog - Hail2u.net

2015/02/11 62 users Weblog hail2u.net トグル vmin CSS

増えてきたフルスクリーンでオーバーレイの検索ボックスだが、まだこれといった無難な実装方法はないように見える。今だとvw/vh/vmin/vmax単位を使ってレイアウト、:target擬似クラスを使ってトグルという形にすれば、ほぼCSSで実現できそうだ。 View Demo: Fullscreen Overlay Searchbox デモではShow Searchboxというリンクをクリックすると検... 続きを読む

Webデザインで魅力的なビジュアルを作りだすパステルカラーの効果的な使い方 | コリス

2014/12/24 82 users パステル イエロー 淡いピンク デザイナー トレンド

Webデザインでパステルカラーを使うのは最近のトレンド、またはそれ以上といってもよいでしょう。魅力的なビジュアルを作るために、デザイナーがマスターしておきたいパステルカラーの効果的な使い方を紹介します。 「パステル」と聞くと、淡いピンクやイエローを思い浮かべる人が多いかもしれません。ここで紹介するパステルにはもっと多くのカラーがあります。 Solasie パステル調の写真やパステルをオーバーレイさ... 続きを読む