[B! CSS3][背景] ajinorichanのブックマーク

ajinorichan id:ajinorichan

CSS3と背景に関するajinorichanのブックマーク (4)

[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）
動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も！ Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。以前紹介した時（前の記事）からアップデートされ、実装の解説も充実しているので、改めて許可を得て翻訳しました。中の人は、Smashing Magazineのエディタさんです。動画を背景に使う時の大切なポイントデモ CSSで動画を背景にしたコンテンツを実装する方法動画を背景に使う時の大切なポイント動画をサイトに使う時は、動画が単にかっこいいからという理由ではなく、サイトのメッセージが伝えられる動画を使用しましょう。動
ajinorichan 2014/09/10
背景

動画

レスポンシブ

CSS3
リンク
[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。デモを幅480pxで表示コンセプト「background-size」をビューポート全体をカバーするために使う「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。「Media Queries」をスマフォ対策として使うスマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
ajinorichan 2014/07/02
コーディング

CSS3

背景
リンク
フルスクリーン背景がスライドショーになるCSS3サンプル:phpspot開発日誌
Fullscreen Background Image Slideshow with CSS3 | Codrops フルスクリーン背景がスライドショーになるCSS3サンプル。ページ全体の背景がCSS3によってアニメーションされ切り替わるサンプルとチュートリアルが公開されています。画像・文字が綺麗にクロスフェードしながら切り替わってなかなかカッコいいものがCSS3をベースに構築されていて勉強になりつつ、そのまま使えそうですデモページ ISDNの時代などはページ全体を背景にすることはタブーでしたが回線の高速化で珍しくなくなりましたね。今後、よりPCのスペックがあがり回線環境がよくなることで未来はもっともっとリッチになっていきそうですね関連エントリ CSS3のアニメーションサンプル４７ピュアCSS3でタイピングアニメーションするデモ CSS3で実装された画像スライドショーサンプル C
ajinorichan 2012/01/15
CSS3

背景
リンク
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest techno logies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
ajinorichan 2011/12/15
HTML5
リンク
1