CSSで背景画像のシームレスパターンを無限スクロールさせるアニメーション | 9ineBB
CSSのアニメーションを使って、シームレスなパターンで背景を無限スクロールさせる 背景画像がシームレスパターンの時に使えるテクニックです。シームレスパターンなパターンをbackgroundで背景画像に利用し、background position で背景画像を動かすアニメーションを繰り返すものです。背景画像は自動でrepeatで敷き詰められるのを利用しています。 ー CODE ー HTML <section> <h1>BACK GROUND SCROLL</h1> </section> CSS body { margin: 0; padding: 0; } section { height: 300px; margin: 100px 10px; background-image: url(bg.png); -webkit-background-size: 500px; background
CSS Gradient Animator
@-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
画面サイズに合わせて高さを指定する3つの方法
縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 section { background: url(image.jpg) no-repeat fixed; background-size: cover; } では、高さの指定方法を100%を例に3つ紹介します。 jQueryを使う まずは、jQueryを使う方法です。個人的には１番なじみがあります。 $(document).ready(function () { hsize = $(window).he
[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
(K)背景色やグラデーションと背景画像を同時に反映させる場合（CSS覚え書き） | web(K)campus
今回CSS 珍百景 Advent Calendar 2014にエントリーさせていただきましたが、バグというよりCSSセレクタの対処法的な記事です。 例えば、ボタンを作成する時、CSSで背景画像を指定する時はたいていボタン全てをデザインする事がザラでしたが、スマホの横幅可変のボタンを作成する時は、できるだけCSSのみで作成したいですが、ワンポイントで画像をのせたい場合もあります。そんな時に背景色やグラデーションに背景画像を重ねる時の方法を備忘録としてまとめます。 ※今回の検証は「firefox」と「chrome」のみです。「ie」は確認してませんm(_ _)m 背景色と背景画像を表示させたい場合 一般的な角丸色付きボタンの右端に矢印を付けたい場合。 【失敗例】まず、何も考えずに組むとこんな感じ background:url(img/arrow.png) no-repeat; backgrou
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
