スポンサーサイト

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

CSS 角丸border 活用術・縦横の線の太さを変えて見よう

CSS3で画像を使わずに角丸表示を応用して、少し変わった表示をしてみましょう。 
ただ単に、角丸の枠線(border)で囲うよりも少しアクセントが付くと思います。
*注意  この手法はブラウザが IE(インターネット・エクスプローラー)では効果を発揮しません。(2011年01月現在IE8以下。今後IEの新バージョンでは表示が出来る様になるとは思いますが・・・。)

前回の記事「CSSで角を丸くする方法」を応用して

001-00002.jpg 
の様に、縦横の太さを変える方法をご紹介します。

「CSS角丸」については画像を使わずにCSSで枠線(border)の角を丸くする方法!を御覧下さい。


CSS 角丸border 活用術・縦横の線の太さを変えて見よう

まず単純に、borderの太さを縦横で変えてやれば良いと思いましたがFireFoxでは上手く表示されるものの、Chromeでは太くした線が角丸の半径分欠けてしまいます。
(ここから先はCSSのみでは無理なのかもしれません・・・。「できますよ」って情報をお持ちの方は御教授下さい。)
なので、中にテーブルを入れてみました。


※例として簡略化したhtmlソースを書いてみます。


<!--

<div id="header">
<table id="header_t">
<td><h1>CSS 角丸border 活用術</h1></td>
</table>
</div>

-->

※次にCSSの簡略化したソースを書いてみます。
色は赤(#FF0000)で角の丸みは5pxで中の色は白(#FFFFFF)にしてみます。

/******************************************************************

#header {
border: #FF0000 1px solid;
background-color: #FF0000;
border-radius: 5px;         /* CSS3 */
-moz-border-radius: 5px;    /* Firefox */
-webkit-border-radius: 5px; /* Safari,Chrome */


#header_t {
border-top:   #FF0000 1px solid;                /* 個別枠(上) */
border-right: #FF0000 3px solid;                /* 個別枠(右) */
border-bottom:#FF0000 1px solid;                /* 個別枠(下) */
border-left:  #FF0000 3px solid;                /* 個別枠(左) */
/**テーブルのborderの色はheaderのbackground-colorと同色で**/
background-color: #FFFFFF;
/**テーブルのbackground-coloは白(#FFFFFF)で**/

*******************************************************************/

尚、各数値や色やid名はお好みの物で・・・。


ちなみに、私のサイドバーの様な1pxの細い線にしたい場合は、header部分のborder部分をとっぱらい、table部分のborderのtop、bottom部分をとっぱらうか0pxにしてみて下さい。
(background-colorにも角丸は適用されます。)
ブログデザイン変更の為、続き・・にて一部表示しています。




この様な物を活用して次の様な物に利用したりもできます。↓


>>続きを読む

スポンサーサイト

画像を使わずにCSSで枠線(border)の角を丸くする方法!

これまで、画像を使って表現していた角丸(かどまる)を、CSS3の記述を用いる事で、画像を使わずに簡単に表示させる事が出来ます。
border-radiusと言うプロパティで、Firefox, Safari, Google Chromeでは独自拡張として実装されています。
*注意  この手法はブラウザが IE8(インターネット・エクスプローラー8)では効果を発揮しません。(2011年01月現在IE8以下。今後IEの新バージョンでは表示が出来る様になるとは思いますが・・・。)

このブログを見て頂くと解ると思いますが、ヘッダーやプラグインタイトル、リンクボタンにこの手法を用いています。(2011年01月現在)
ブログデザイン変更の為、一部、記事下(続き)に表示しています。


画像を使わずにCSSで枠線(border)の角を丸くする方法!


001-00001.jpg 



(例)ヘッダーに2pxの太さで赤い(#FF0000)線を引き、角に(半径)3pxの丸みを付ける場合

まずお好みの色にて、線(border)を引きます。
(注意 - top, right, bottom, left を同じ太さで・・・太さを変えるとChromeではやや表示がおかしくなります。これについては次回・・・。)

/*---------------------------------------------------------

#header {
border: #FF0000 2px solid;
}

-----------------------------------------------------------*/

と書き、同じ { } の中に

/*----------------------------------------------------------


border-radius: 3px;         /* CSS3 */
-moz-border-radius: 3px;    /* Firefox */
-webkit-border-radius: 3px; /* Safari,Chrome */


------------------------------------------------------------*/

を追記します。(/*----    ----*/を除く文字のみ)

以上で角が丸くなります。
(線の太さや角の丸みの数値はお好みで調節して下さい。)


参考にさせて頂いたサイト⇒ All About form
詳しい解説もそちらでどうぞ。



次回は「画像を使わずにCSSで枠線(border)の角を丸くする方法!」を応用して「CSS 角丸border 活用術」をご紹介します。
(角丸にして縦横の線の太さを変える方法)

001-00002.jpg 


画像を使わずにCSSで枠線(border)の角を丸くする方法!」を活用してこんな事も出来ます。

楽ランク TVゲーム (楽天市場こだわりランキングTOP30)

>>続きを読む

楽ランク TVゲーム (楽天市場こだわりランキングTOP30)

楽天市場で今一番売れている商品カテゴリ別リアルタイムで表示する、楽天市場こだわりランキングです。

人気のTVゲームやTVゲームソフトのランキングです。

楽ランクTOPページ
(現在工事中です)

楽ランク TVゲーム (楽天市場こだわりランキングTOP30)
※楽天市場 TVゲームランキング

>>続きを読む

楽ランク スイーツ (楽天市場こだわりランキングTOP30)

楽天市場今一番売れている商品カテゴリ別
リアルタイムで表示する、楽天市場こだわりランキングです

人気のおとりよせ、スイーツのランキングです。

楽ランクTOPページ
(現在工事中です)

楽ランク スイーツ(楽天市場こだわりランキングTOP30)
※楽天市場 スイーツランキング

>>続きを読む

PR Link



☆動画MYページはこちら

バイオハザード オペレーション・ラクーンシティ バナー(120×60)









Link

このブログをリンクに追加する



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