CSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます
23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。 たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便利です。 実際の動作は、デモページでご覧ください。 See the Pen Gradient Overlay with border-image by coliss (@coliss) on CodePen. HTMLはシンプルです。 テキストのh1要素と背景を設定したdiv要素があるだけです。
CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方
ダイアログやモーダルを表示する時に、コンテンツの上にオーバーレイを使用します。このオーバーレイはコンテンツの上に表示されるように::backdrop疑似要素で最上位レイヤーにするのが簡単です。 先日アップデートされたChrome 122でこの::backdrop疑似要素の値の継承ルールが変更されました。 Changes to CSS ::backdrop inheritance by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 これまでの::backdrop疑似要素 アップデートされた::backdrop疑似要素 これまでの::backdrop疑似要素 フルスクリーンに表示する要素用のAPIを定義するFullscreen APIでは、最上位レイヤーや::backdrop疑
CSSだけでアニメーション実装 〜カード型リンクHover編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まずはこちらのカード型リンクのHoverアニメーションを作っていきます。 Hoverしたときに、 ピンク背景のブロックを上から重ねる 「READ MORE」というテキストをFadeInする 以上の2つの動きを実装しています。 ピンク背景のブロックを上から重ねる ピンクの背景をtransformを使って位置移動をしており、初期位置を、すべてカードの外に出るように指定しています。 カードの外に出ていても、カード要素に overflow: hidden; を指定しておくことによって、要素外の部分は隠れています。 「READ MORE」というテキストをFadeInする READ MOREのテキストは、通常時に opacity: 0; を指定して透明にし、Hoverした際に opacity: 1; にアニメーションをしています。 カード型リンク～左から右へ～ 次にカード型リンクのHoverアニメーシ
CSSの疑似クラス「:focus-within」が素晴らしい理由
CSSの疑似クラス「:focus-within」を使用して、フォームの入力時にハイライト表示させるテクニックを紹介します。 :focus-withinは適用した要素の子孫要素にフォーカスに当たった時に起動するセレクタで、効果的に使用すると非常に便利です。 Why CSS :focus-within is amazing by Chris Bongers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLの構造 CSSの疑似クラス「:focus-within」 :focus-withinの効果をより素晴らしいものにする :focus-withinのサポートブラウザ はじめに ここでお話するのは、フォーカスされた要素にスタイルする:focusセレクタのことではありません。:focus-withinは、その中の子孫要素
CSSの疑似要素:beforeと:afterでUI要素を実装するテクニックのまとめ
CSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。 Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。 Uncommon Use Cases For Pseudo Elements by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 疑似要素で、親子のホバーエフェクト 一覧のリスト 疑似要素で、クリック可能領域のサイズを広くする 疑似要素を使用したオーバーレイ 疑似要素で、シャドウエフェクト :afterと:beforeのどちらを使うべきか ファイル拡張子を元にリンクのスタイル設定 疑似要
メトロライクなUIと大胆なオーバーレイエフェクトが気持ち良い EXPANDING OVERLAY EFFECT / Maka-Veli .com
CodropsでMARY LOUという方が書かれていたんですが、可愛かったのでご紹介。 CSS/JS/で作られていて、デモでは天気予報を作られているんですが、アイコンはフォント。オーバーレイエフェクトもとても良い感じです。 メトロっぽいデザイン、増えてきましたよね。 個人的には結構好きなんですが、色と枠内のバランスをミスると一気に下品な感じになりがちなので結構難しい・・・ ダウンロードも出来ます。詳しく知りたい方はこちら PUTTING CSS CLIP TO WORK: EXPANDING OVERLAY EFFECT / Codrops http://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/ メトロライクなUIと大胆なオーバーレイエフェクトが気持ち良い
[CSS]画像やコンテンツや動画を表示するCSS3で実装したLightbox
動画を表示 対応ブラウザはFirefox, Chrome, Safari, Operaの最新のバージョンで、IE6/7ではJavaScriptを使用することで動作させています。 スタイルシートのオフ時には、各リンクはページ内アンカーとして動作し、下記のように表示されます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デベロッパーツールの新機能が便利！CSS Gridの実装と検証が簡単になるCSS Grid editorとオーバーレイ
デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載