忍者ブログ
Flex,Java,Html など、調べた事のメモ帳です。 間違ってたらゴメンなさい。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSS3を使ってグラデーションを作るとき、IEの場合はIE独自のfilterを用います。

IE5.5以上で有効なので、ほぼもれなく対応できます。

filter: progid:DXImageTransform.Microsoft .gradient(GradientType=0,startColorstr='#ffffffff', endColorstr='#ffdddddd');

GradientTypeが【引数】で、startColorstrは【開始の色】、endColorstrは【終了の色】です。

引数「GradientType」は、縦方向のグラデーションなら【0】、横方向のグラデなら【1】をいれます。

色の番号は通常の6ケタに、2ケタ加えた8ケタです。

最初の2桁は色の透明度の指示です。

00(透明)〜FF(不透明)。

【#FFFFFFFF】なら、【FF(不透明)】+【FFFFFF(白)】という意味になります。

 

Webkit系(Chrome、Safari)の

background: -webkit-gradient(linear, center top, center bottom, from(#FFFFFF), to(#DDDDDD));

mozilla系(Firefox)の

background: -moz-linear-gradient(top, #FFFFFF, #DDDDDD);

と一緒に使えば、既存のブラウザはほぼ対応できます。

画像を使わずCSSだけでボタンを表現するのが最近の流行りですね。影やグラデーションなども設定できるので便利です。CSSを自分で書くのは面倒という方は「CSS Button Generator」を使うとはかどりますよ。

まずCSS Button Generatorへアクセスしましょう。


130120_cs2-1.jpg


プレビューは最上部に表示されますよ。まずカラーセットを選んで、グラデーションを調整しましょう。その後横幅や縦幅などのサイズ調整、影をカスタマイズしたりしてお好みのボタンを作りましょう。最下部にCSSのコードが表示されるのであとはコピペして完了ですね。CSSでボタンを作りたいときはぜひ活用してみましょう。


CSS Button Generator

 

html{height:100%;}
body{height:100%;}
#wrapper{width:900px; min-height:100%; display:block; position:absolute;}

サイト中央にしたい場合は、positionの親要素のdivに真ん中指定をしてあげてください。
 
#center{width:900px; min-height:100%; position:relative; margin:0 auto;}

display属性とmargin属性を使う

こういうケースで、画像をうまく中央寄せするには、以下のようにします。

div p img{
display:block;
margin:auto;
}

z-indexプロパティは、位置指定されている要素の重なり順序を指定する際に使用します。通常、HTMLのソースコードでは、後の方に記述した要素の方がより手前に表示されます。z-indexプロパティを指定した要素は、数字が小さいほど奥へ、大きいほど手前に表示されます。これをスタックレベル(stack level)と言います。

divなどのブロックレベル要素でボックスを入れ子にした際に、positionプロパティで static以外の値が指定されている場合、それぞれの要素はレイヤー状(アニメのセル画のような状態)に重なっているため、親要素の幅や高さに関係なく好きな所に配置出来ます。背景色や、背景画像を指定している場合に、思わぬ所で要素が隠れてしまったり、見た目に不都合が生じる場合もあります。z-indexプロパティは、それを回避するためのものです。

z-indexに与えられる値

z-index: auto;
親要素と同じ階層になります。これが初期値です。
z-index: 数値で指定する;
重なりの順序を整数で指定します。0を基準として値が大きいものほど上になります。マイナス値の指定も可能です。

ブログランキング
にほんブログ村 IT技術ブログ IT技術メモへ
 
カレンダー
02 2017/03 04
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
人気ブログランキング
ブログランキング ブログランキング
最新CM
最新TB
ブログ内検索
PR
ATOM  
ATOM 
RSS  
RSS 
Copyright ©   プログラムメモ   All Rights Reserved
Design by MMIT  Powered by NINJA TOOLS
忍者ブログ [PR]