投稿日:

CSS　CSSでグラデーションを作る

css

CSS3　CSSでグラデーションを作る

css3

CSS3から、CSSだけでグラデーションを実現することができます。
以前は背景にグラデーションの画像を作ってrepeat-xなんてやっていたのが、やらなくてよくなります。
ただ、CSS3に対応したブラウザでしか見れませんけどね[huh]
上から下にグラデーションを作る方法です。

 background: -moz-linear-gradient(top, #ffffff, #999999);　/* Firefox用 */  
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#999999));　/* Safari,Google Chrome用 */

Firefoxの場合、2番目の引数（#ffffff)がグラデーション開始地点の色、3番目の引数(#ffffff)が、グラデーション終了地点の色です。

Safari,Chromeの方は引数の最初から、線形（linear)、開始地点（left top）、終了地点（left bottom）、開始地点の色(#ffffff)、終了地点の色(#999999)です。

投稿日:

CSS3 グラデーションボタンを作る

css
HTML5

CSS3 グラデーションがあって、影がついているボタンを作る

CSS3では今まで画像でしか作れなかったようなボタンがCSSだけで実現できます。
グラデーションやテキストの発光ができるようになったのが大きいですね。
FirefoxとChromeなどで、若干記載方法が違いますが、次のようにすれば、リンクをそれなりのボタン風に見せることができます。

 <!--html-->
 <a href="hogehoge.html" class="orange_bt">オレンジボタン</a>

 /* CSS */
 .orange_bt {
        /* 背景のグラデーション*/
 	background: -moz-linear-gradient(top, #F9934F, #aa5221);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F9934F), to(#aa5221));
 
 	padding: 5px 10px 5px;
 	color: #fff;
 	text-decoration: none;
        
        /* ボタンの角を丸くする*/
 	-moz-border-radius: 8px;
 	-webkit-border-radius: 8px;
 
        /* ボタンに影をつける */　
        /* 最初の3つのピクセルの指定は、初めが指定したピクセル分横にドロップシャドウ*/
        /* 次が下にドロップシャドウするピクセル　次がドロップシャドウの幅　*/　
        /* rgbaの値の最初の3文字はRGBの指定、最後はアルファ値　*/
 	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6);
 	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6); 
 
        /* テキストへの影 */
 　 	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 　　　　　
 	border:solid 1px #aa5221;
 	cursor: pointer;
 	font-size:14px;
 }

残念ながら、IE9はCSS3対応ですが、このグラデーションには対応していません。
フィルタという機能を利用して、疑似的に作ることもできるようです。
参考：
http://kojika17.com/2011/02/css3-for-ie.php

投稿日:

CSS3

css

CSS3とは

旧来のCSSより進んで、グラデーションや動きをつける、などのさまざまな見た目が調整できるようになりました。

CSS3はHTML5と一緒に使わなければならないわけではありません。例えば、HTML4.01で記述されているウェブページを、CSS3を使ってデザインすることもできます。

投稿日:

CSS 複数のclass名によるスタイル

css

CSS 複数のclass名によるスタイル

HTMLのタグが

 <div class="hogehoge panipani">

などのような時、2つ目のように複数のクラスが指定されている場合、CSSで

 .hogehoge.panipani{
 	color:red;
 }

と指定すると、複数セレクタが指定された時だけのスタイルを設定できます。

たとえば次の実行結果は、図のようになります。

 <head>
 <title>無題ドキュメント</title>
 <style>
 .hogehoge{
 	color:red;
 }
 
 .panipani{
 	color:blue;
 }
 
 .hogehoge.panipani{
 	color:green
 }
 </style>
 </head>
 
 <body>
 <div class="hogehoge">
 	ほげほげ
 </div>
    
 <div class="panipani">
 	ぱにぱに
 </div>
        
 <div class="hogehoge panipani">
 	 ほげほげ　ぱにぱに
 </div>
 
 </body>

css_multiclass.gif