スポンサーサイト

上記の広告は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にも角丸は適用されます。)
ブログデザイン変更の為、続き・・にて一部表示しています。




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





☆楽ランク TVゲームランキング☆
☆リンクをクリックで楽天市場の各ページに跳びます。



これは楽天商品ランキングAPIを利用したアフィリエイトリンクになっています。
PHPが使える無料サーバーにアップロードしてiframeで表示させてますので
上部に広告が入っちゃってますが、1位~30位までのリンクは
全てアフィリエイトリンクになっていて、クリックで別窓で楽天市場の各ページに
跳ぶ様にしてあります。
ちょっとしたきっかけで頼まれて作ってみましたが、素人が作ってますので
ごく一部の方のみ使っています。(まだまだ改良の余地アリなもんで・・・)


このiframeをtableに入れてidを付けてCSSに記述しておくと、各記事内でも
角丸が適用されてこの様に表示されます。




関連記事



この記事へのコメント

管理人のみ通知 :

トラックバック


PR Link



☆動画MYページはこちら

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









Link

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



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