多分これが一番早い SVG Background Image の利用手順だと思います - Qiita
とにかく Material Design Icons を開きます Search... ボックスに face と入力します 一覧からお好みの SVG をクリックします </> ボタンを押し、プルダウンメニューから View SVG を選択します テキストエリアの中身をすべてコピー…するのではなく、 d 属性の中身のみコピーします。 <path fill="#000000" d="..." /> の ... です 下記のようなスタイルシートを記述し、 ... の部分にコピーした内容をペーストして完了です <style> .c-icon--face { background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"
背景色を２色で分割表示する方法 - Qiita
background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%); 解説 グラデーションを表示するlinear-gradientを使用します。 https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient#Browser_compatibility ↑ linear-gradientに関する詳細です。 http://caniuse.com/#feat=css-gradients ↑ 各ブラウザでの実装状況早見です 書式は... background:linear-gradient(方向角度,色 位置,色 位置,...); ・方向角度 グラデーションの向きです。 0deg ↑ (下から上へ) 90deg → (左から右へ) 180deg ↓
background画像をレスポンシブに対応させる方法
backgroundで背景設定を作ると思わぬ所でつまづいてしまったので、その解決方法を記事にしてみました。なお今回はcreative memomemoさんの記事を参考にさせて頂いております。 background指定した画像を拡大縮小する方法 背景画像を可変で表示したいだけなのですが、これが曲者でbackground(背景画像)で指定した画像はheight(高さ指定)の基準がないと表示されない欠点があります。ならば指定すればいいのですが高さを設定をするとウィンドウサイズの拡大縮小時に高さ分の余白残りや画像切れをおこします。 高さ設定した場合、画像のように高さの値はそのままなので余白が残ってしまいます。 height:0;でpadding-topで高さ(余白)を設定 高さが与えられないならばどうしたものかと色々探した結果、paddingでの余白空けという発想に辿り着きました。ポイントはhei
今どきのCSS3グラデーションの指定方法 (2015年版)
緑はベンダープリフィックスが必要 前回との差異はAndroid4.4よりlinear-gradient (to bottom)に対応している点です。 Androidブラウザのシェア 現在のAndroidブラウザのシェアですが、Android4.0以下は非常に少なくなっており対応する必要はなくなってきています。 参考:Dashboards | Android Developers というわけで、-webkit-gradient()による指定はもう不要で-webkit-linear-gradient()とlinear-gradient()のみ記述しておけば、ほとんどのブラウザに対応可能です。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-linear-gradient( top, #b
[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック
動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 HTML5 Video 実装 HTML 現在、動画ファイルは二つのフォーマットを用意するのがよいでしょう。WebMはGoogleが推奨するものでChrome, Firefox, Operaでネイティブにサポートされています。 <video autoplay loop poster="polina.jpg" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="polina.mp4" type="video/mp4"> </video> オーバーレイで表示するコンテンツは、通常通りの実装です。 <div class="overlay"> コンテンツ </div> CSS まずは、動画をフルスクリー
Trianglify
About My name is Quinn Rohlf, and I'm a roaming engineer/designer based in the western United States. Trianglify is an open-source library I wrote to generate low-poly style patterns by combining a Delaunay triangulation with some nice colors. It was originally released in April of 2014. It has a sibling project, Trianglify.io, that provides a user-friendly GUI for the library and helps fund libra
jQuery Background Position
A jQuery plugin that allows the position of a background image to be animated. The current version is 1.1.1 and is available under the MIT licence. For more detail see the documentation reference page. Download now Basics Positions Options In the Wild Quick Ref You can animate the position of a background image as either 'backgroundPosition' or 'background-position', providing both the horizontal
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
CSS3での背景指定方法のまとめ
CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
