miniturbo::Blog background-position のサンプル
数ヶ月前に、習作として作っていたbackground-position のサンプルがあったのを思い出したので、ここで書いてみます。 background-position のサンプルページ で、このサンプルをなんのために作ったのかというと、background-positionをパーセント指定したときに、その位置から背景画像が描画されるのではなく、background-positionを指定した要素のその位置と背景画像のその位置が同じ位置になるという、てんぽさんの記事に影響を受けたためだと思います。 サンプルの三つ目にある「background-position: 25% 75%;」の指定がわかりやすいです。ボックスの左から25%、上から75%の位置と、背景画像の左から25%、上から75%の位置が重なっていると思います（わかりやすいようにドットをつけました）。 間違っている解説サイトが多い
メモ：Safari background-imageのバグ
Safari2.0(?)で、background-positionにより背景画像の一部が該当ボックス内に収まらないような位置になると、 その部分が該当ボックス内の反対側に表示される。あるいは該当ボックスをはみ出して背景画像が表示される。 この説明ではわかりにくいので、サンプルを用意しました。Safariを使っている人はほかのブラウザでの表示結果と比べてみてください。 Safariのbackground-imageのバグ サンプル
もうパンツはかない
このサイトは webサイトのデザインをいろいろ考えてみようかななどとでっち上げたサイトです。ようやく7つ目のデザインとなります。 デザインにはカスケーディングスタイルシート(CSS)を使っています。21世紀の今、テーブルレイアウトでもないでしょうから。ですのでデザイン的にはターゲットとなるwebブラウザは、CSSにきちんと対応した新しめのもの、たとえば Firefox(レンダリングエンジン Gecko を使ったもの。N9なども含む)や 、Opera9、Safari などを想定していますが、HTML的には素直なよいHTMLをめざしてますので、まともなWEBブラウザであれば閲覧に支障はないでしょう。デザインが再現できるかはともかく。 デザインノート 今回のポイントは半透明画像の重ねあわせといったところでしょうか。 一番下の背景の上に3枚の半透明画像が重なり、スクロールするとそれぞれ違う速度で動
Lucky bag: : blog: 背景画像に使える透過 GIF
斜線やストライプの背景画像を Photoshop とかで作ると、色を変えたくなった時にそのたび作り直しってのが面倒。便利で使ってる人も多いかもしれない secondlife さんの Background Image Maker でもそれは同じかな。んで、Photoshop とかで作る場合に、線に色を付けて作るんではなくて、色を付けたい部分を透過にして作っておいて CSS で background-color を指定するやり方にすれば、色を変えたくなった時はCSS で背景色を変更するだけで良いじゃんって、Super Stripes を見て目からうろこ状態。早速インスパイヤしてみた！ 使ってみたい GIF 画像をダウンロードして、CSS で背景画像に。あとは、背景色で好みの色を指定するだけ。ちなみに、サンプルでは背景色を #fa0 と指定している。 斜線 oblique-line_1px.gi
CSSでサイドバーの背景を最後まで表示する
マルチカラムレイアウトで困るのは、サイドバーに背景色を与えた場合、サイドバーの内容が本文（中央カラム）の表示より短くなった場合、背景色がそこで途切れてしまうことです。 ということで、このエントリーではページの最後までサイドバーの背景色を表示するカスタマイズをご紹介します。 完成イメージ サンプルは公開テンプレートを用いてますが一般的な手法ですので他のテンプレートでも適用可能です。 なお本エントリーは固定レイアウトのカスタマイズです。リキッドレイアウトについてはリキッドレイアウトの背景色を変更するを参照ください。 以前にもサイドバーの背景を最後まで表示するという記事をエントリーしましたが、現在公開しているテンプレートの内容にあわせて改訂しました。なおCSSの構造的には前記事の方がシンプルなので併せて参照頂ければ理解が深まると思います。 １．失敗例 本サイトの公開テンプレート（2カラム・右にサ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
