[CSS] object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニックHTML内にインラインで配置した動画や画像を、背景画像のようにブラウザいっぱいに表示するCSSのテクニックを紹介します。 レスポンシブに完全対応、スマホでもデスクトップのあらゆるサイズのスクリーンでも最適なサイズで表示されます。
![[CSS] object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/eca9086338399b021f0f7184c9d87872b7931c55/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017053101-01.png)
2016年人気が高かった！CSSの制作、確認、検証に便利なオンラインツール厳選20個のまとめ
Webサイトのデザインもコーディングもやるべきタスクがどんどん増えてきました。それらの手間がかかる面倒な事は、楽にできるツールやサービスを利用することで効率化がはかれます。 CSSの制作、確認、検証に役立つ便利なオンラインツールやサービスを紹介します。
Apple風のかっこよくて美しいデザインの背景49種類を簡単に実装できるスタイルシート -HUE.css | コリス
文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。 画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。 元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方 使い方は、簡単です。 「hue.css」をダウンロードし、外部
デキるデザイナーはみんな使ってる！背景にすぐ使えるすごいデザインテクニックのまとめ
画像や文字などを配置する時、背景をどのようにするかでデザインは劇的に変わります。 Webや紙のデザインに効果があり、すぐに使える背景のすごいデザインテクニックを紹介します。 Ultimate Guide to Designing With Backgrounds 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 背景のデザインとは ベタ一色の背景 高いコントラストのベタ一色の背景 テクスチャの背景 グラデーションの背景 写真をつかった背景 形をつかった背景 透明の背景 ブラーを適用した背景 カラーをオーバーレイさせた背景 文字のスペースがある背景 パターンの背景 イラストの背景 空白スペースをつかった背景 グリッドをつかった背景 背景のデザインとは 背景はグラフィックデザインを築く基礎となるものです。 テクスチャとカラーはデザインに奥行
[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js
動画を背景としてブラウザいっぱいに、もしくは指定したコンテナいっぱいに配置するレスポンシブ対応の単体で動作する軽量スクリプトを紹介します。 Bideoはおそらく、Background Videoの略でしょうかね。
![[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/442270a5803a50e9c86fc69781ff5060493cfb53/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016052501.png)
[Photoshop]シームレスなテクスチャをワンクリックで作るアクションを作った
外で写真を撮ってきたりして、それを背景素材として使ったり出来るといいですよね。その写真、モノによってはシームレスに出来ますよ。 写真で撮ってきたテクスチャに使えそうな画像をワンクリックでシームレスな画像に作り変えられるアクションを作りました。自由に使って結構ですのでどんどん写真撮ってwebサイトの背景とかに使っちゃってください。例によって前置きいらない人はダウンロードへGO！ シームレスパターンの基本的な作り方 アクションファイルにしちゃってるのでそれをダウンロードすれば終わりですけど、作り方を知りたい人の為に一応書いておきます。 基本的にはシームレスなパターンの作り方というのは斜め45°に回転させた正方形を敷き詰めていくということが重要です。
![[Photoshop]シームレスなテクスチャをワンクリックで作るアクションを作った](https://cdn-ak-scissors.b.st-hatena.com/image/square/ef4921c030237c6860695b71450570e2af879f42/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F10%2Fphotoshop-seamless-texture-02-150x150.png)
背景画像のフリー素材サイト10選！デザインで悩んだときに役立ちます | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
1. Subtle Patternsオススメ https://www.toptal.com/designers/subtlepatterns/ 一番よく利用してます。商用利用可の、シンプルで使いやすいシームレスの画像がたくさんあります。 2. Background Labs http://backgroundlabs.com/ 色・タグから検索できます。花柄やイラストがはいった、カラフルで派手なパターンの画像やイラストが多いです。 3. pattern cooler https://www.patterncooler.com/ 選んだデザインの柄の大きさや色をカスタマイズできます。派手派手なデザインがほとんどなので使いどころは難しかもしれません。 4. TextureKing https://www.textureking.com/ テクスチャ画像をお探しのときはこちら。木目・コンクリート
シンプルなのに効果的！美しい背景画像を作成するテクニックのまとめ
背景はデザインにおいて、非常に重要な要素です。 ビジュアルの土台となり、他の要素がどのように見えるか決定する要因となります。 要素を引き立たせる美しい背景画像を作成するシンプルなテクニックを5つ紹介します。 5 Simple Tools to Create Beautiful Backgrounds 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 不透明度を調整したカラーオーバーレイを使用する ぼやけた背景と対になるアイコンを使用する コピースペースと共にイメージを使用する モノクロの背景にネオンカラーのテキストを使用する 形をテキストホルダーとして使用する 不透明度を調整したカラーオーバーレイを使用する 背景となる写真画像にカラーオーバーレイを加えることで、デザインの印象を引き起こします。デザインする時のポイントは、まずは画像は彩度
Photoshopで美しい背景をつくる！グラデーションやブラーの効果的な使い方が学べるチュートリアルのまとめ
美しいぼけやブラーを描いたり、写真の背景に目立つようテキストを磨りガラスに載せたり、モザイクやラインを使って幾何学状にしたり、美しい背景をつくるPhotoshopのチュートリアルを紹介します。 各チュートリアルは30分くらいで出来るものなので、ぜひお試しあれ。
[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル
動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモページ：下までスクロール 実装 使用するリソース チュートリアルにあたり、下記のリソースを使用しています。 jQuery jquery.mb.YTPlayer YouTubeの動画を背景として表示するjQueryのプラグイン フォント：Google Fonts (Raleway, Lato) アイコン：Font Awesome 背景に使う動画の注意点 背景に使う動画は、下記の点に注意してください。 動
![[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b3413c8d26665727debe1c206713a14699cabe5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015020310-01.png)
背景デザインに役立つ背景・テクスチャ・パターン素材 50 - NxWorld
覚えておきたいと思いメモしていたのが溜まってきたので、自分用の整理兼ねてまとめました。 ウォーターカラー、グランジ、ウッド、ペーパー、ピクセルなど背景・テクスチャ・パターン素材全50種類です。 使いやすそうなシンプルなものから主張が強めのものまで様々なタイプがありますが、上手く取り入れることでデザインをグッと良くさせることができます。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。
[CSS]シンプルな気持ちいいアニメーションで、ボタンのテキストと背景をホバー時に変更するスタイルシートのテクニック
ボタンをホバーすると、テキストと背景をスライドのアニメーションで変更するスタイルシートのテクニックを紹介します。 ぱっと見、スクリプトを使ってるように見えますが、スタイルシートのみの実装です。 Button with slide hover transition 実装もシンプルです。 HTML hrefにはリンク先を入力して利用してください。 <div class="btn-cont"> <a href="javascript:void(0)" class="btn"><span>twitter</span></a> </div> CSS ホバー時に変更するテキストと背景は「body .btn-cont .btn:after」に記述します。 body .btn-cont { position: absolute; top: 50%; left: 50%; -webkit-transform
![[CSS]シンプルな気持ちいいアニメーションで、ボタンのテキストと背景をホバー時に変更するスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/c57794ed73c7db091610513a15f90475d1cdcecb/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112103.gif)
背景に使える！最近増えてきた新しいパターン素材のまとめ
背景にパターンやテクスチャを効果的に使うと、デザインの単調さが解消され、Webページ全体に厚みを加えることができます。 そのパターンも最近のトレンドでは新しいものが少しずつ増えてきました。幾何学パターン、イラスト、ローポリ、地紋、ラインやドットを使ったパターン素材をSubtle Patternsから紹介します。 Subtle Patterns Subtle Patternsは専用のプラグインを使うと、便利です。 Subtle Patterns PS Plugin Photoshop CS5+ から CC2014対応で、パネルからパターン素材が1クリックで利用できます。 $11.99と有料ですが、Subtle Patternsの新作素材をすぐに利用できるだけでなく、検索機能やお気に入りの登録もできるのでかなり重宝しています。 Subtle Patternsの新作を中心に人気のパターン素材を紹
[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）
動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も！ Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。 以前紹介した時（前の記事）からアップデートされ、実装の解説も充実しているので、改めて許可を得て翻訳しました。 中の人は、Smashing Magazineのエディタさんです。 動画を背景に使う時の大切なポイント デモ CSSで動画を背景にしたコンテンツを実装する方法 動画を背景に使う時の大切なポイント 動画をサイトに使う時は、動画が単にかっこいいからという理由ではなく、サイトのメッセージが伝えられる動画を使用しましょう。 動
![[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）](https://cdn-ak-scissors.b.st-hatena.com/image/square/bacd812f6000c78e30e028d375e68638a387b65a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090501-01.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用無料、桜のイラストやパターンのフリー素材のまとめ
テクスチャ素材に困った時に！ダウンロードしておきたい実用度満点のフリーのテクスチャ素材のまとめ
株式会社イー・スタッフィング
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
