Friday, December 30, 2016
CSS 3 Membuat Label Daftar Harga Terbaru
CSS 3 Membuat Label Daftar Harga Terbaru
CSS 3 Membuat Label Daftar Harga Terbaru - Triks dan Tutorial membuat Label daftar harga menggunakan CSS. Triks berikut saya dapatkan dari paulud.co.id anda juga dapat melihat demonya disana. Label daftar harga dengan CSS ini dapat anda gunakan untuk anda yang mmepunyai semisal contoh Toko Online.
 |
| CSS 3 Membuat Label Daftar Harga Terbaru |
Kurang lebih untuk hasilnya akan seperti diatas ya.
Berikut ini script dari CSS 3 Membuat Label Daftar Harga Terbaru.
Script HTML
<div class="pricing_table">
<ul>
<li>Standard</li>
<li>Rp 50.000</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
<ul>
<li>Premium</li>
<li>Rp 60.000</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
<ul>
<li>Professional</li>
<li>Rp 70.000</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
<ul>
<li>Plus</li>
<li>Rp 80.000</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
<ul>
<li>Maximum</li>
<li>Rp 80.000</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
</div>
Kemudian berikut ini script CSS :
.container{Oke, sekian dulu tutorial saya untuk mengajukan CSS 3 Membuat Label Daftar Harga Terbaru.
width:900px;
margin:30px auto;
padding:25px;
min-height:400px;
height:auto; }
.container h2 { margin-top:30px;}
.pricing_table {
border:1px solid #c4cbcc;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
outline:7px solid #f2f3f3;
float:left;
}
.pricing_table ul {
list-style:none;
float:left;
width:147px;
margin:0;
border:1px solid #f2f3f3;
padding:5px;
text-align:center;
background-color:#FFF;
}
.pricing_table ul:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
box-shadow:3px 5px 7px rgba(0,0,0,.7);
cursor:pointer;
}
.pricing_table ul li {
border-bottom:1px dashed #cfd2d2;
padding:10px 0;
}
.pricing_table ul li:first-child {
font-size:18px;
font-weight:bold;
}
.pricing_table ul li:nth-child(2) {
background:#fbfbfb;
}
.pricing_table ul li:nth-child(3) {
font-size:12px;
font-weight:bold;
}
.pricing_table ul li:nth-child(n+4) {
font-size:14px;
}
.pricing_table ul li:last-child a {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:1px solid #c4cbcc;
padding:10px;
margin:5px 0;
background: #e5e696; /* Old browsers */
background: -moz-linear-gradient(top, #e5e696 0%, #d1d360 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e696), color-stop(100%,#d1d360)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#e5e696, endColorstr=#d1d360,GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #e5e696 0%,#d1d360 100%); /* W3C */
color:#000;
font-style:italic;
display:block;
}
Go to link Download
