CSS3で透明度をOpacityとRGBaで指定する

深夜にサイドーバーをOpacityで変えてみました。

んんんんんんん

なんかしっくりこなかったので今回はRGBaを使って再度変えてみました。
今回は全体を透明にしちゃいました

前回のOpacityを使ったソース

404 NOT FOUND | 時代は変わる(webdrawing)

...

webcss.withrun.org

今回のRGBaを使ったソース

stinger3ではスタイルシートの基本構造を目印に探します。

そうするとすぐ下の方に以下がある

#wrap #wrap-in #side {
	float: right;
	width: 336px;
}

上の箇所を以下のように変えるとサイドバーが透明になりますよー

#wrap #wrap-in #side {
	float: right;
	width: 336px;
background-color: rgba(51,51,51,0.6);

}

テキストに影をつける方法

background-color: rgba(51,51,51,0.8);
padding: 10px;
font-weight: bold;
color: #fff;
text-shadow: 3px 3px 1px rgba(255,0,0,0.6);

参考までに以下も

background-color: rgba(51,51,51,0.8);
padding: 10px;
color: #fff;
-webkit-box-shadow: 3px 3px 5px rgba(255,0,0,0.6);
-moz-box-shadow: 3px 3px 5px rgba(255,0,0,0.6);

メインコンテンツは上で探したサイドバー項目のすぐ下にあります

以下

#wrap #wrap-in #main {
	float: left;
	width: 550px;
	padding-right: 39px;
	padding-left: 39px;
	padding-top: 20px;
	border: 1px solid #ccc;	
　　　　　border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;

}

上のソースを以下のように変える

#wrap #wrap-in #main {
	float: left;
	width: 550px;
	padding-right: 39px;
	padding-left: 39px;
	padding-top: 20px;
	border: 1px solid #ccc;
　　　　　background-color: rgba(51,51,51,0.6);
　　　　　border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
}

これで出来上がりです。

クリスマス風にしたかったのでやりましたがテーマは好き嫌いがあるので悪しからず。

ただ今のデザインだとテキストの色なども変えないと色が被って見にくくなるので好きな色に変えないといけなかったがこれが時間かかりましたｗｗｗ