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

WEB会議などで使える背景画像 - 古典に親しむ | 国文学研究資料館

在宅勤務やテレワーク、遠隔授業などでWeb・TV会議アプリケーション等の背景としてご利用いただける画像です。すべて国文学研究資料館が所蔵する資料から作成しています。ご活用いただければ幸いです。「データベース」をクリックすると、使用している作品の書誌情報や他の画像をご覧いただくこともできます。

ddt2000 2021/01/07

リンク

CSSアニメーションで動く背景に！CSSアニメーションバックグラウンド12選

動的なWEBデザインは今では当たり前。ただ実装しようと思うとサイトが重くなってしまったり、ゴチャゴチャしたりしてしまいますよね。そこで今回は軽量かつ、シンプルでオシャレな実用的な動く背景CSSをご紹介します。ぜひ自身の制作するサイトに組み込んでみてはいかがでしょうか。ホタルが飛ぶアニメーション背景CSSSee the Pen CSS Fireflies by Mike Golus (@mikegolus) on CodePen. グラデーションの色が変化するアニメーション背景CSSSee the Pen Pure CSS3 Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen. 動く方眼アニメーション背景CSSSee the Pen Pure css infinite background animati

ddt2000 2019/04/30

リンク

[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js

動画を背景としてブラウザいっぱいに、もしくは指定したコンテナいっぱいに配置するレスポンシブ対応の単体で動作する軽量スクリプトを紹介します。 Bideoはおそらく、Background Videoの略でしょうかね。

ddt2000 2016/05/25

リンク

[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル

動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。デモページ：下までスクロール実装使用するリソースチュートリアルにあたり、下記のリソースを使用しています。 jQuery jquery.mb.YTPlayer YouTubeの動画を背景として表示するjQueryのプラグインフォント：Google Fonts (Raleway, Lato) アイコン：Font Awesome 背景に使う動画の注意点背景に使う動画は、下記の点に注意してください。動

ddt2000 2015/02/03

リンク

ポリゴンスタイルやジオメトリックスタイルの背景素材 30 - NxWorld

個人的にすごい好みなので、いつか機会があれば使用させてもらおうと思って見かけてはメモしていた、ポリゴンスタイル（Polygo or Low-Poly）やジオメトリックスタイル（Geometric）の背景素材を整理兼ねてまとめました。中には有償素材もありますがどれも安価なものですし、様々なデザインが数十種類同梱されているようなものなのでお得だと思います。個人的に今までは同系色を使ったものを多く見かける印象でしたが、カラフルなものやブラーやグラデーションといった別の効果を組み合わせているようなものも多いです。紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。

ddt2000 2014/12/10

リンク

[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

ddt2000 2014/07/10

リンク

スクリプト無し、動画をページの背景いっぱいに表示する方法

jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。実装は、非常にシンプルです。 HTML 動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。 <body> ... コンテンツ ...  <video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted> <source src="http://mattgrossdesign.com/raw-media/wood

ddt2000 2014/05/29

リンク

背景に動画を使ったWebサイトの作り方

2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。動画を用意するまずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。自分で

ddt2000 2014/02/12

リンク

背景いっぱいに画像を表示、スライドショー化にも対応した軽量なjQueryプラグイン・BACKSTRETCH

同じようなの沢山あるのですが、軽量って言葉に弱い。背景一杯に画像を表示、スライドショー化も可能なjQueryプラグインです。圧縮版なら2KBほどですので導入しやすいですね。背景一杯に表示出来るやつでスライドショーにも対応で軽量です。圧縮して2KBくらい。しないで5KBくらいです。似たようなのは一杯あるので他にも探してみてください。個人的にはこれはカスタマイズしやすそうだったのでちょっと使ってみようかなと思います。 IE7でもOK。6だとfixedが効かないので、ちょっとアレです。コード<script src="https://ajax.google apis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.backstretch.min.js"></script> <script>

ddt2000 2012/03/11

リンク

[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher

デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴セットアップはシンプル全てのモダンブラウザをサポート画像は一枚だけでなく、複数枚にも対応対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロードサイトの「Download」よりファイル一式をダウンロードします。一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi

ddt2000 2012/02/10

リンク

はてなブックマーク

タグ

関連タグで絞り込む (17)

背景に関するddt2000のブックマーク (11)

お知らせ

今週のはてなブックマーク数ランキング（2024年11月第2週）

今週のはてなブックマーク数ランキング（2024年11月第1週）

月間はてなブックマーク数ランキング（2024年10月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス