タグ オーバーレイ
人気順 10 users 50 users 100 users 500 users 1000 usersCSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます
23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。 たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便... 続きを読む
CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方
ダイアログやモーダルを表示する時に、コンテンツの上にオーバーレイを使用します。このオーバーレイはコンテンツの上に表示されるように::backdrop疑似要素で最上位レイヤーにするのが簡単です。 先日アップデートされたChrome 122でこの::backdrop疑似要素の値の継承ルールが変更されました。 Changes to CSS ::backdr... 続きを読む
マルチモーダルAI搭載スマートグラス「Frame」、Brilliant Labsが発表
Brilliant Labsは2月8日、マルチモーダルな人工知能(AI)アシスタントを搭載する世界初のスマートグラスだという「Frame」を発表した。スマートグラスとは、周囲に視覚的なオーバーレイを配置し、歩き回るとさまざまなテキストが表示されるウェアラブルデバイスだと考えている人にとって、Frameはまさに待ち望んでいた... 続きを読む
X(旧Twitter)のマスクCTO、リンク付きポストの画像に見出しを重ね表示すると予告
XのマスクCTOは、10月に非表示にしたメディア記事のリンクのタイトルを、画像にオーバーレイ表示する形で復活させると予告した。 米X(旧Twitter)のオーナーでCTO(最高技術責任者)のイーロン・マスク氏は11月22日(現地時間)、10月に非表示にしたメディア記事のリンクのタイトルを、画像にオーバーレイ表示する形で... 続きを読む
HTMLはシンプル! 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量(2Kb)ライブラリを紹介します。 HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせ... 続きを読む
デベロッパーツールの新機能が便利!CSS Gridの実装と検証が簡単になるCSS Grid editorとオーバーレイ | コリス
先日リリースされたChrome 92のデベロッパーツールに、CSS Gridの実装に役立つ新機能が2つ加わりました! 1つ目はCSS Grid editorでデバッキングツール、2つ目はCSS Gridのオーバーレイ、どちらもWeb制作でCSS Gridを使用する時に大活躍すること間違いなしです。 参考: New CSS Grid debugging tools 機能は簡単に言うと... 続きを読む
デベロッパーツールがさらに便利に!Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載 | コリス
先日リリースされたChrome 90のデベロッパーツールに、Flexboxの実装に役立つ新機能が2つ加わりました! 1つ目はFlexboxエディタでデバッキングツール、2つ目はFlexboxのオーバーレイ、どちらもWeb...記事の続きを読む 続きを読む
Next.js 9.4 Fast RefreshとIncremental Static Regeneration等のアップデート - Qiita
Hot ReloadがReact Refreshを用いたFast Refreshに置き換えられました。 これで編集したファイル内のコードのみが更新され、コンポーネントの状態を失うことなく再レンダリングを行ってくれます。 これに伴いエラーのオーバーレイも再設計され、ページ上ですぐにエラーを確認できるようになっています。 Incremental Sta... 続きを読む
[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法 | コリス
CSSのposition: sticky;を使用して、スティッキーヒーローセクションを実装する方法について紹介します。 スティッキーヒーローセクションとは、画像などをスクロールした際に固定し、その固定された画像の上にスクロールさせるコンテンツ要素です。固定された画像はズームさせたり、オーバーレイにすることもできます。... 続きを読む
10分で分かる!Adobe XDの新機能や実践的な使い方が学べるAdobe公式チュートリアルファイル中級編 | コリス
Adobe XDは毎月アップデートされ、6/19のアップデートでは待望の固定ヘッダ・フッタ、アートボードのオーバーレイ、数値フィールドの四則計算に対応しました。Webサイトやスホマアプリの制作に役立つ機能ばかりで、作業がどんどん便利になっています。 そんな新機能も含めた使い方が学べる「Adobe XDスターターキット中... 続きを読む
LINEトークルーム内に自社Webアプリ展開 Messaging APIに新機能 - ITmedia NEWS
LINEの企業向けAPI「Messaging API」に新機能。自社Webアプリの入力画面などをLINEのトークルーム上にオーバーレイ表示できる「LINE Front-end Framework(LIFF)」が登場した。 LINEは、企業向けAPI型LINEアカウントで活用できる「Messaging API」の新機能として、LINEのトークルーム内で動作するWebアプリを実装できる「LINE Fr... 続きを読む
デザインやイラストに使えるベクター完備が助かる!複雑な形を組み合わせた美しい曼荼羅のデザイン素材 | コリス
デザインやイラストの背景やワンポイントに使ったり、テクスチャやオーバーレイとして使ったり、組み合わせて拡大・縮小・着色して利用できるベクター完備の曼荼羅(まんだら)の素材を紹介します。 個人でも商用でも無料、クライアントのプロジェクトや販売する同人誌にもクレジット無しで利用できます。 Colorful Mandala Abstract Geometric 曼荼羅の素材は、ベクター完備。 .ai(I... 続きを読む
イラストや文字に、テクスチャや背景に、ざらっとした質感を与えるPhotoshopの無料ブラシ素材 | コリス
イラストや文字に、ざらっとした質感を与えるPhotoshopのブラシ素材を紹介します。テクスチャ用とボーダー用のブラシが揃っており、さまざまな形状に利用できます。 ブラシをオーバーレイで重ねるだけで、レトロ風のデザインが完成です。 16 Subtle Grunge Photoshop Brushes Collection ブラシの使用前(左)と使用後(右)。 イラストや文字にはテクスチャ用のブラシ... 続きを読む
Web制作者は要チェック!モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js | コリス
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドライン に準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モ... 続きを読む
二重露光やオーバーレイで写真をオシャレに加工できる『Pixlr』がいかす!画像をテクニカルに仕上げたいなら使ってみてね - wepli.2
2017 - 07 - 31 二重露光やオーバーレイで写真をオシャレに加工できる『Pixlr』がいかす!画像をテクニカルに仕上げたいなら使ってみてね Androidアプリ iPhoneアプリ 画像を簡単に加工できるアプリは色々とリリースされていますが、本日ご紹介する『Pixlr』なら二重露光やオーバーレイなどを使って簡単にテクニカルな写真に仕上げることができちゃいます。僕も普段から使っている画像加... 続きを読む
iOSのビデオ作成アプリ「Clips」に、ディズニーとピクサーのキャラクターが登場 | TechCrunch Japan
Appleの超簡単 ビデオ編集アプリのClips が、4月の公開以来初めて大きく改訂された。追加された中で最大の目玉はコンテンツだ ―― 何といってもDisney/Pixarの世界から数多くのライセンス付きキャラクターが加わった。あのミッキーやウッディーがオーバーレイやトランジションのアニメーションになって登場する。 コンテンツは、簡単で失敗のないUIと並ぶClipsの大きなセールスポイントであり... 続きを読む
CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる–[FIT BLOG-フィットブログ]
PhotoshopやIllustratorなどのグラフィックツールに搭載されている、ブレンドモード(描画モード)と呼ばれる機能をご存知でしょうか。要素と要素を重ねあわせることで、様々な効果を作り出すことのできる機能なのですが、実はこのブレンドモード機能、CSSの...コーディング 内藤 康太 / 2017.07.20 CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる... 続きを読む
Cerevo、速度表示付きの運転席動画が作れるスポーツカメラ - デジカメ Watch
REC-1(左)。右のLOG-1が同梱されている。 株式会社Cerevoは3月16日、センサーユニットを同梱するスポーツカメラ「REC-1」を発売した。直販価格は2万9,990円(税別)。出荷予定は4月下旬を予定している。 Cerevoのスポーツ用品ブランド「XON」シリーズの最新モデル。スポーツカメラの「REC-1」で記録した動画に、センサーユニット「LOG-1」で得たデータをオーバーレイ表示さ... 続きを読む
[CSS]レスポンシブ対応のグリッドの幅は? カラム数は? 溝のサイズは? グリッド作成に役立つ万能ツール -Graaf | コリス
人気が高いWebサイトやフレームワークなどで、実際に使用されているグリッドをページ上にオーバーレイで重ねて表示できるデザイン用のツールを紹介します。 既存のグリッドだけでなく、幅・カラム数・溝の数値を簡単に変更できる優れ ...記事の続きを読む 続きを読む
商用利用無料、紙・キャンバス・布・水彩・電子基板など高解像度で高品質なテクスチャ素材のまとめ | コリス
Webデザインに背景として使ったり、写真や文字にオーバーレイで重ねたり、同人誌やポスターの紙のデザインで質感を加えたり、高解像度・高品質なテクスチャ素材を紹介します。 紙やノート・キャンバス・布・水彩・木・モニター・電子基板など、さまざまな用途で利用できるものをまとめました。 ここで紹介しているテクスチャ素材はすべて、個人・商用利用ともに無料で、クライアントのプロジェクトや同人誌などの販売品に利用... 続きを読む
Cerevo新アクションカムは、スノボの荷重/重心データを自分視点映像にオーバーレイ - AV Watch
ニュース Cerevo新アクションカムは、スノボの荷重/重心データを自分視点映像にオーバーレイ (2015/9/4 00:00) Cerevoは2日、Bluetooth通信対応スノーボード・バインディング「SNOW-1」と連携し、自分視点のスノーボード撮影動画に、荷重などのスノーボードの測定データを重ねて表示可能にするアクションカメラ「REC-1」を発表した。今冬の発売を予定しており、価格は299... 続きを読む
閲覧中のWebページのワイヤーフレームをオーバーレイ表示出来るChromeエクステンション・「Instant Wireframe」 - かちびと.net
Instant Wireframe Instant Wireframeは閲覧中のWebページのワイヤーフーレムを表示するChrome拡張です。起動すると閲覧しているWebページの画像部分がダミー画像になったりコンテナがオーバーレイ表示されます。まだβ版で、オーバーレイ表示するだけのもののようですが、今後精度が向上したりダウンロード出来るようになったりすると嬉しいですね。 Instant Wiref... 続きを読む
ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」 | bl6.jp
jQuery fatNavはミニマルテイストなフルスクリーンのナビゲーションメニューを実装することができます。デモではメニューアイコンをクリックするとオーバーレイでアニメーション付きのメニューが表示されます。フワッとさりげない感じで表示されるのがとてもお洒落ですね。 以下はjQuery fatNavのデモになります。シンプルでスッキリしたデザインが特徴的です。 デモ メニューはフェードでズームイン... 続きを読む
[JS]かっこいい!ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2 | コリス
画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。 アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、... 続きを読む
フルスクリーンでオーバーレイの検索ボックス - Weblog - Hail2u.net
増えてきたフルスクリーンでオーバーレイの検索ボックスだが、まだこれといった無難な実装方法はないように見える。今だとvw/vh/vmin/vmax単位を使ってレイアウト、:target擬似クラスを使ってトグルという形にすれば、ほぼCSSで実現できそうだ。 View Demo: Fullscreen Overlay Searchbox デモではShow Searchboxというリンクをクリックすると検... 続きを読む