CSS3 で実装された価格表

結果：

実装コード

html

<div id="価格表" class="クリア">
    <div class="plan">
        <h3>エンタープライズ<span>$59</span></h3>
        <a class="signup" href="">サインアップ</a>         
        <ul>
            <li><b>10GB</b> ディスク容量</li>
            <li><b>100GB</b> 月間帯域幅</li>
            <li><b>20</b> 個のメール アカウント</li>
			<li><b>無制限</b>のサブドメイン</li>			
        </ul> 
    </div>
    <div class="plan" id="最も人気">
        <h3>プロフェッショナル<span>$29</span></h3>
        <a class="signup" href="">サインアップ</a>        
        <ul>
            <li><b>5GB</b> のディスク容量</li>
            <li><b>50GB</b> 月間帯域幅</li>
            <li><b>10</b> 個のメール アカウント</li>
			<li><b>無制限</b>のサブドメイン</li>			
        </ul>    
    </div>
    <div class="plan">
        <h3>スタンダード<span>$17</span></h3>
		<a class="signup" href="">サインアップ</a>
        <ul>
            <li><b>3GB</b> ディスク容量</li>
            <li><b>25GB</b> 月間帯域幅</li>
            <li><b>5</b> 個のメール アカウント</li>
			<li><b>無制限</b>のサブドメイン</li>			
        </ul>
    </div>
    <div class="plan">
        <h3>基本<span>$9</span></h3>
        <a class="signup" href="">サインアップ</a>		
        <ul>
            <li><b>1GB</b> のディスク容量</li>
            <li><b>10GB</b> 月間帯域幅</li>
            <li><b>2</b> 個のメール アカウント</li>
			<li><b>無制限</b>のサブドメイン</li>			
        </ul>
    </div> 	
</div>

CSS3

体{
  背景: #303030;
}

#価格表 {
	マージン: 100px 自動;
	テキスト配置: 中央;
	width: 892px; /* 計算された合計幅 = 222 x 3 + 226 */
}

#価格表.plan {
	フォント: 12px 'Lucida Sans'、'trebuchet MS'、Arial、Helvetica;
	テキストシャドウ: 0 1px rgba(255,255,255,.8);        
	背景: #fff;      
	境界線: 1px 実線 #ddd;
	色: #333;
	パディング: 20px;
	width: 180px; /* プランの幅 = 180 + 20 + 20 + 1 + 1 = 222px */      
	フロート: 左;
	位置: 相対的;
}

#価格表 #最も人気 {
	zインデックス: 2;
	上: -13px;
	境界線の幅: 3px;
	パディング: 30px 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	境界線の半径: 5px;
	-moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	-webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	ボックスの影: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);    
}

#価格表.plan:n番目の子(1) {
	境界線の半径: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	境界線の半径: 5px 0 0 5px;        
}

#価格表.plan:n番目の子(4) {
	境界線の半径を 0 5px 5px 0 に設定します。
	-webkit-border-radius: 0 5px 5px 0;
	境界線の半径: 0 5px 5px 0;        
}

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

#価格表 h3 {
	フォントサイズ: 20px;
	フォントの太さ: 標準;
	パディング: 20px;
	マージン: -20px -20px 50px -20px;
	背景色: #eee;
	背景画像: -moz-linear-gradient(#fff,#eee);
	背景画像: -webkit-gradient(linear, 左上, 左下, から(#fff), から(#eee));    
	背景画像: -webkit-linear-gradient(#fff, #eee);
	背景画像: -o-linear-gradient(#fff, #eee);
	背景画像: -ms-linear-gradient(#fff, #eee);
	背景画像: 線形グラデーション(#fff, #eee);
}

#価格表 #人気 h3 {
	背景色: #ddd;
	背景画像: -moz-linear-gradient(#eee,#ddd);
	背景画像: -webkit-gradient(linear, 左上, 左下, から(#eee), から(#ddd));    
	背景画像: -webkit-linear-gradient(#eee, #ddd);
	背景画像: -o-linear-gradient(#eee, #ddd);
	背景画像: -ms-linear-gradient(#eee, #ddd);
	背景画像: 線形グラデーション(#eee, #ddd);
	上マージン: -30px;
	パディング上部: 30px;
	境界線の半径を 5px 5px 0 0 に設定します。
	-webkit-border-radius: 5px 5px 0 0;
	境界線の半径: 5px 5px 0 0; 		
}

#価格表.plan:nth-child(1) h3 {
	境界線の半径: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	境界線の半径: 5px 0 0 0;       
}

#価格表.plan:nth-child(4) h3 {
	境界線の半径: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	境界線の半径: 0 5px 0 0;       
}	

#価格表 h3 span {
	表示: ブロック;
	フォント: 太字 25px/100px Georgia、Serif;
	色: #777;
	背景: #fff;
	境界線: 5px 実線 #fff;
	高さ: 100px;
	幅: 100ピクセル;
	マージン: 10px 自動 -65px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	境界線の半径: 100px;
	-moz-box-shadow: 0 5px 20px #ddd インセット、0 3px 0 #999 インセット;
	-webkit-box-shadow: 0 5px 20px #ddd インセット、0 3px 0 #999 インセット;
	box-shadow: 0 5px 20px #ddd インセット、0 3px 0 #999 インセット;
}

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

#価格表 ul {
	マージン: 20px 0 0 0;
	パディング: 0;
	リストスタイル: なし;
}

#価格表 li {
	上境界線: 1px 実線 #ddd;
	パディング: 10px 0;
}

/* ---------------- */
	
#価格表.サインアップ{
	位置: 相対的;
	パディング: 8px 20px;
	マージン: 20px 0 0 0;  
	色: #fff;
	フォント: 太字 14px Arial、Helvetica;
	テキスト変換:大文字;
	テキスト装飾: なし;
	表示: インラインブロック;       
	背景色: #72ce3f;
	背景画像: -moz-linear-gradient(#72ce3f, #62bc30);
	背景画像: -webkit-gradient(linear、左上、左下、#72ce3f から #62bc30 まで));    
	背景画像: -webkit-linear-gradient(#72ce3f, #62bc30);
	背景画像: -o-linear-gradient(#72ce3f, #62bc30);
	背景画像: -ms-linear-gradient(#72ce3f, #62bc30);
	背景画像: 線形グラデーション(#72ce3f, #62bc30);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	境界線の半径: 3px;     
	テキストシャドウ: 0 1px 0 rgba(0,0,0,.3);        
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	ボックスの影: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}

#価格表.signup:hover {
	背景色: #62bc30;
	背景画像: -moz-linear-gradient(#62bc30, #72ce3f);
	背景画像: -webkit-gradient(linear、左上、左下、#62bc30 から #72ce3f まで));      
	背景画像: -webkit-linear-gradient(#62bc30, #72ce3f);
	背景画像: -o-linear-gradient(#62bc30, #72ce3f);
	背景画像: -ms-linear-gradient(#62bc30, #72ce3f);
	背景画像: 線形グラデーション(#62bc30, #72ce3f); 
}

#pricing-table .signup:active、#pricing-table .signup:focus {
	背景: #62bc30;       
	上: 2px;
	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) インセット;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) インセット;
	ボックスシャドウ: 0 0 3px rgba(0, 0, 0, .7) インセット; 
}

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

.clear:before、.clear:after {
  コンテンツ："";
  表示:テーブル
}

.clear:after {
  クリア:両方
}

。クリア {
  ズーム:1
}

上記はCSS3で実装された価格表の詳細です。CSS3の価格表の詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。

<<: HTML テーブルのオーバーフローの解決方法

>>: .html、.htm、.shtml、.shtm の違いと関連性について簡単に説明します。