« wordpressでjQuery uiを利用してみる-その(2) | トップページ | サムネイル付きのスライドギャラリーを実装するjQueryプラグイン (1) #jQuery »

2011年7月11日 (月)

wordpressでjQuery uiを利用してみる-その(3)

Comment

wordpressでjQuery uiを利用してみる-その(1)
wordpressでjQuery uiを利用してみる-その(2)からの続きになります。

今回は角丸とグラデーションのcssを解説していきます。

Comment_001

ボックスの角を丸くする。
.name_001{
padding:5px;
border:#DDD 1px solid; // ボックスの線の幅や色を設定しています
-webkit-border-radius:5px; // GoogleChrome Safari
-moz-border-radius:5px; // Firefox
border-radius:5px; //IE9
}


Comment_002

ボックスの下の部分だけ角を丸くする
.name_002{
padding:5px;
border:#DDD 1px solid; // ボックスの線の幅や色を設定しています
-webkit-border-radius:0 0 5px 5px; // GoogleChrome Safari
-moz-border-radius:0 0 5px 5px; // Firefox
border-radius:0 0 5px 5px; //IE9
}
上下左右それぞれの角に対応する部分は下記の様になります。
-webkit-border-radius:左上 右上 右下 左下; 


Comment_003

背景にグラデーションをつける
.name_003{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#e8e8e8)); // GoogleChrome Safari
background: -moz-linear-gradient(top, #f7f7f7 0%, #e8e8e8 100%); // Firefox
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#e8e8e8',GradientType=0 ); // IE
}

webkit
-webkit-gradient(linear, グラデーションの開始地点, グラデーションの終了地点, from(開始地点の色), to(終了地点の色))
color-stopは3カ所以上のグラデーションが指定できます。
color-stop(開始地点からの位置を%で記入,色)と記述します。
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7),color-stop(50%,#dfdfdf), color-stop(100%,#e8e8e8));

mozの基本形
background: -moz-linear-gradient(グラデーションの方向, 開始地点の色, 終了地点の色)
3カ所以上のグラデーションを利用する場合は、色の後に開始地点からの%を記入します。
background: -moz-linear-gradient(グラデーションの方向,#f7f7f7 0%,#dfdfdf 50%, #e8e8e8 100%)

filter: progid:DXImageTransform.Microsoft.gradientの基本形
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='開始地点の色', endColorstr='終了地点の色',GradientType=0 )

|

« wordpressでjQuery uiを利用してみる-その(2) | トップページ | サムネイル付きのスライドギャラリーを実装するjQueryプラグイン (1) #jQuery »

jQueryの使い方」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/40741280

この記事へのトラックバック一覧です: wordpressでjQuery uiを利用してみる-その(3):

« wordpressでjQuery uiを利用してみる-その(2) | トップページ | サムネイル付きのスライドギャラリーを実装するjQueryプラグイン (1) #jQuery »