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

推薦する

フォームタグの Enctype 属性とその応用例の紹介

Enctype : ブラウザがデータをサーバーに送り返すときに使用するエンコーディングのタイプを指定...

最も完全な 50 の MySQL データベース クエリ演習

このデータベース クエリ ステートメントは、インターネット上の 50 個のデータベース クエリ練習問...

AngularJSループオブジェクトプロパティで動的列を実装するアイデアの詳細な説明

動的な列を実現するための Angularjs ループ オブジェクト プロパティ利点: オブジェクトを...

Linux で crontab を使用してスケジュールされたタスクを追加する方法

序文Linux システムはシステム サービス crond によって制御されます。 Linux システ...

MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法

目次MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法1. 非同...

MySQLは複数テーブル関連統計(サブクエリ統計)の例を実装します

この記事では、例を使用して、MySQL で複数テーブルの関連統計を実装する方法について説明します。ご...

HTML と CSS に関する基本的なメモ (フロントエンドでは必読)

HTMLに触れた当初はレイアウトにいつもテーブルを使っていましたが、とても面倒で見た目も悪かったの...

HTML メタの使用例

使用例コードをコピーコードは次のとおりです。 <!DOCTYPE html> <!...

Ubuntu 20.04 IPアドレスを変更する方法の例

例:本日、前回のオフィスコラボレーションプラットフォーム実験の続きをしていたところ、仮想マシンは以前...

Ubuntu Server のターミナルのウェルカム メッセージで広告を無効にする方法

最新の Ubuntu Server バージョンを使用している場合、ようこそメッセージに、Ubuntu...

HTML テーブル マークアップ チュートリアル (22): 行の境界線の色属性 BORDERCOLORLIGHT

行内では、明るい境界線の色を個別に定義できます。基本的な構文<TR ボーダーカラーライト=co...

VueでTypeScriptを使用する方法

導入近年、TypeScript を求める声がますます高まり、TypeScript はフロントエンドに...

Springboot および Vue プロジェクトの Docker デプロイメントの実装手順

目次A. SpringbootプロジェクトのDockerデプロイメント1. Springbootプロ...

VMware vSphere 6.5 インストール チュートリアル (画像とテキスト)

vmware vSphere 6.5 は vSphere ソフトウェアのクラシック バージョンであ...

nginx 設定ファイルパスとリソースファイルパスを表示する方法

nginx 設定ファイルのパスを表示する nginx -t 経由nginx -t コマンドの本来の機...