CSS3 で実装された価格表

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 の違いと関連性について簡単に説明します。

推薦する

CentOS 7.3 で Nginx 仮想ホストを設定する方法

実験環境最小限にインストールされた CentOS 7.3 仮想マシン基本環境を構成する1. ngin...

10分で始めるCSS3アニメーション

導入アニメーションを使用すると、JavaScript や jQuery に依存せずに、純粋な CSS...

CSS3は円錐グラデーション効果を実現します

文法:背景画像: 円錐グラデーション(位置の角度から、開始色、...、最後の色)最初のパラメータ:開...

Centos7 での nginx のインストールと設定に関する詳細なチュートリアル

注: ソフトウェアのインストールの基本ディレクトリ パスは /usr/local です。ソフトウェア...

マインスイーパゲームを実装するための jQuery プラグイン (1)

この記事では、jQueryプラグインを使用したマインスイーパゲームの最初の記事の具体的なコードを参考...

MySQL 数千万のビッグデータに対するSQLクエリ最適化の知識ポイントのまとめ

1. クエリを最適化するには、テーブル全体のスキャンを避けてください。まず、where と orde...

MySQLのジョイントクエリについて詳しく説明します

目次ユニオンクエリ1. 中国の各省のIDと名前を照会する2. 湖南省のすべての地級市のIDと名称3....

CSS画像結合技術(スプライト画像)の詳しい説明

CSS画像結合技術1. 画像のステッチ画像ステッチング技術は、個々の画像を収集する技術です。画像の多...

HTML チュートリアル: よく使われる HTML タグのコレクション (5)

導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...

MySQL データベースにおける高同時実行性の問題を解決する方法

序文スタートアップ企業が最初はモノリシック アプリケーションを主要なアーキテクチャとして使用し、通常...

HTMLファイルで外部CSSファイルを導入する場合のパスの書き方について簡単にまとめます

1. 外部CSSファイルの基本スタイルをインポートする<link> タグを使用して外部ス...

HTMLの基礎知識:ウェブページの基礎知識

HTML は Hypertext Markup Language の略です。これは、実際のプレゼンテ...

VMware に CentOS7 をインストールし (静的 IP アドレスを設定)、Docker コンテナ経由で mySql データベースをインストールする (非常に詳細なチュートリアル)

2 年生から、これらのインストールと設定の仕方を尋ねられました。簡単なチュートリアルを作成し、ここ...

node.js チュートリアルの Util モジュールの例の詳細な説明

目次タイプ判定から始める厳格な平等エラーファーストと約束デバッグと出力タイプ判定から始めるJavaS...

HTML+CSSを使用してマウスの動きを追跡する

ユーザーがプライバシーを意識するようになり、オンライン トラッキングに対する予防策を強化するにつれて...