効率の良い背景画像のループ - Qiita
要素が縦に伸びる場合に背景をループさせたい ボックス要素にテキストを流し込んだ時、文章量によって要素の縦幅が可変することを想定しなくてはならない場合がある。 枠の中央だけループさせる フラットデザインが流行な昨今、背景にあまりリッチな画像を用いる機会は減ったが、例えば以下の様な飾り枠の中にテキストを収めるケースを想定する。 このようなデザインの枠の可変を想定する場合、上下の飾りの部分はそのままに中央部分だけをループさせる処理をすると良いのが想像できると思う。 画像は3つに切り分ける 画像は以下のように3つに分けてスライスすると良い。 上下の赤枠の飾り部分はcssでループ処理をさせず、 中央にのみbackground-repeat:repeat-y;を指定する。 コードはこんな感じ コードは以下のように書く。
CSS3のセレクタ全42種 まとめておさらい使い方リファレンス
こんにちわ。WP-Eイクラこと@se_inoです。 CSS3のセレクタ、ちゃんと覚えてる？ 普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときに あれ？コレなんだったっけ？ というセリフを何度心のなかでつぶやいたか分かりません。 また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。 おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。 なお、仕様書の日本語訳は以下のページをご参照ください http://standa
CSS3 Animation Cheat Sheet - Justin Aguilar
How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about posi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
