ニコニコ動画のPSP変換方法、アニメ銀河英雄伝説の壁紙、CSSリファレンスなど、趣味に偏った情報を公開中

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像を使わずにWeb2.0風グラデーションスタイルを作る-主要ブラウザ対応

keywords:CSSのみ,Web2.0,グラデーション,Firefox,Opera


 主要ブラウザに対応した、「画像を使わないWeb2.0風グラデーションスタイル」を考えてみました。

 IE7,Firefox3.5,Opera10の3ブラウザで動作確認済み。

 基本的にDIVでブロックに分け、z-indexを使って重ねています。

 サイトの色合いを変更したいときなど、画像の作り直しは大変面倒です。また、大きい画像はサイズも重くなります。

 なにより画像を使っていないので、色やサイズの変更が簡単です。


こんなの↓が作れます。他にもバリエーションあり。
Web2.0風スタイルサンプル画像

詳しくはコチラのサンプルページへ
背景透過部分が見やすいように、背景を暗くしてあります。見づらいですが、ご了承ください。

サンプルページのCSSはこちら



↓ 構造を図解してみる ↓
<div> id="header_04"
height: 60px
<div> class="header_body"
height: 60px;
position: relative;
z-index: 2;

<div> class="header_back"
height: 60px;
margin-top:-60px;
position: relative;
z-index: 1;
<div>
height: 50%
<div>
height: 50%
  ←  ボックス全体


  ←  class="header_body"
文字を入れるなどコンテンツ部分
サンプルではテキストリンク



  ←  class="header_back"
ボックスの中に上下2つのボックスをつくり、それぞれに背景適用することで、グラデーションスタイルを表現
margin-topをマイナスで適用し、かつpositionとz-indexの数値を低く指定することで上のボックスの下に置いた







このページの関連記事
関連記事
スポンサーサイト

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

メニュー

以下はクリックすると、下位メニューに飛びます。

↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ----------------------------
メニューにない記事はサイトマップへ
カテゴリー
プロフィール

みやま

Author:みやま

地域ブランド力 45位の茨城県在住
20代/女
  • ガンダムと攻殻機動隊と銀河英雄伝説が大好きだ
  • 士郎正宗の描く尻は素晴らしいと思う
--------------------
近況報告、更新情報などツイートしていく予定です。
ツイッターへのリンク@miyama_tweet

リンク
↓バナーとHTMLタグ↓

<a href="http://gogosanzi.blog46.fc2.com/" target="_blank" title="AGPP~趣味に偏った情報を公開"><img src="https://blog-imgs-37.fc2.com/g/o/g/gogosanzi/agpp-bunner.jpg" alt="agpp-bunner" border="0" width="200" height="40"></a>
    ↓登録させていただきました↓
  • loghsearch
銀河英雄伝説名言録


present by 田中芳樹:徳間書店「銀河英雄伝説」
 
  
AGPP TOP > スポンサー広告 > スポンサーサイト> HTML活用 > 画像を使わずにWeb2.0風グラデーションスタイルを作る-主要ブラウザ対応
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。