CSS3でbackground（背景画像とグラデーションを同時に）指定するときの注意。／ライブラリー : アファメーションで独立・起業・夢実現。「いきなり！社長宣言！！」-“夢は口に出すことで実現する！”というアファメーション
アファメーションで独立・起業・夢実現。「いきなり！社長宣言！！」-“夢は口に出すことで実現する！”というアファメーション：ライブラリー 2011年4月23日 CSS3はガシガシ使うべし。 最近、ChromeやSafari、Firefoxなど対応するブラウザも増えてきて、そろそろ積極的に使ってもいいんじゃないか？っていう雰囲気のCSS3。 角丸やドロップシャドウなど、いままでどうしても画像に頼らざるをえなくて、その分余計なコードや作業が必要だったものが、CSSの設定だけであら不思議！？ htmlのコードはそのままに、見た目を簡単に変えることができます。 ウェブ屋にとって、まさに『待ってました』のCSS3ですが、背景画像とグラデーションを同時に指定する場合、注意が必要です。 背景画像が出ない！ 今回は透過PNGとグラデーションを指定するという単純なもので、グラフィックツールで作ったカンプをもと
CSS3で、背景にグラデーションを使いつつ背景画像を使うには - HYPER PORTFOLIO
デザインもコーディングもプログラムもこなす、とあるWebデザイナーのポートフォリオサイトです。基本は自分自身のメモのために立ち上げたサイトです。何か情報に誤りがありましたら、コメントして頂けるか、お問い合わせからお知らせ頂けると幸いです。忘れそうなので、個人的なメモです。 改行の仕方などは、あくまでも個人的に見易さを重視しているだけなので、お好きなようにカスタマイズしてください。 ちなみに僕は、あらかじめグラデーションのテンプレートを作り、それをDWのスニペットに登録し、さらにショートカットキー登録でAlt + Shift + Ctrl + Gですぐに出せるようにしています。 上から下へのグラデーションを作りつつ、背景画像を使用 .hoge-box01 { background: url(../images/hogehoge.png) 0 0 no-repeat, -webkit-line
[CSS]大きい画像をブラウザのサイズに合わせて背景に表示するスタイルシート
CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。 実装の要件 前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。 それを踏まえ、以下の条件をクリアさせます。 ページは画像でいっぱいに、余白は無しで 画像の大きさは自動調整 画像の比率は維持 画像はページ中央に 画像はスクロールさせない クロスブラウザ対応 一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。 二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と
グラデーションのスウォッチをグリッド状に配置した背景を作成するチュートリアル
Adobe CS4のパッケージにあるような、微妙なグラデーションのスウォッチをグリッド状に配置した背景を作成するIllustratorのチュートリアルをVeerle's blog紹介します。
ウェブデザインにおける効果的な背景の使い方
Backgrounds In Web Design: Examples And Best Practices 以下、その意訳です。 ウェブデザインのスタイルは常に進化しており、大きな変化の一つに背景の使い方があります。 背景の重要な役割は、ウェブサイトへの興味を視覚的にひきつけることです。 背景はウェブサイトのテーマを支えるものであり、あらゆる可能性を考慮し設計を行う必要があります。 ここではウェブデザインの最近のトレンドをふまえた、背景のベストプラクティスを紹介します。 1. The Basic Background Structures 良い背景を設計する際に、背景の基本構造を知る必要があります。 Body Background bodyの背景は、昔から使用されている背景です。 主にイメージ、イラスト、テクスチャ、パターンなどを使用します。 Content Background コンテ
[CSS]背景画像をページの最下部に固定表示させるスタイルシート
Fixed Footer Backgrounds with CSS demo, demo 2 デモではスクロールバーの有無の２パターンがあり、スクロールをしてもブラウザのサイズを変更しても背景画像がフッタの位置に固定表示されています。 仕組みの概要は、bodyに背景色と背景画像を指定し、背景画像は「fixed bottom」にします。 コンテンツを内包するdiv（headwrap）を設置し、ページ上部に表示される背景画像を指定します。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div class="headwrap"> <div class="container">Content</div> </div> </body> </textarea>
[CSS]大きい画像を背景にする時のスタイルシートの３つの実装例 | コリス
Web Designer Wallのエントリーから、大きい画像を背景に使用する時のスタイルシートの３つの実装例を紹介します。 How to: CSS Large Background 一枚の画像を使用する方法 demo 実装のポイントは、使用する背景画像（background image）の端と背景色（background color）に同じ色（#f8f7e5）を使用します。 サンプルコード <textarea name="code" class="css" cols="60" rows="5"> body { padding: 0; margin: 0; background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; width: 100%; display: table; } </textarea>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flashの上に(X)HTMLを重ねる - 448.jp blog