Fiyat Tablosu Yapımı

İstanbul Web Tasarım - Bilgi Merkezi - Fiyat Tablosu Yapımı

Jun 10th 2019 by Yusuf Alper

Fiyat Tablosu Yapımı

Eğer bir ürün satış siteniz bulunuyorsa alandan kazancınız ve görselliğin üst düzey ve güven veren bir izlenim yaratması kaçınılmaz olacaktır.Bugun ki html yazılarımız da sizlere nasıl bir fiyat tablosu ( pricing table ) oluşturabileceğinizden bahsedeceğiz.Oluşturacağınız fiyat tabloları ile ürünlerinizi yada kampanyalarınızı potansiyel müşterilerinize çok daha hızlı ve yorulmadan ulaştırabilirsiniz.Sözü fazla uzatmadan css ve html yapısı ile bunu nasıl yapabileceğinizden bahsetmek istiyorum.

İlk olarak html kodlarımızı oluşturalım;

[php]

Başlangıç
100TL
/aylık
  • 10GB Disk Alanı
  • 100GB Bandwidth
  • 20 Email Hesabı
  • Sınırsız subdomains
Satın Alın
...
...
\[/php\]

Html kodlarımızı olusturduktan sonra akabinde css kodlarımız ile bir kaç duzenleme ile hizlama yapmaya başlayalım.Bunu olusturmus oldugunuz html kodlamasına dair dosyanın ıcıne

etiketi içine atabileceğiniz gibi farklı bir css sayfası olusturup html dosyanızın ıcıne de çağırabilirsiniz.

[css]#fiyattablosu {
margin: 100px auto;
text-align: center;
width: 928px; /* total computed width */
zoom: 1;
}

fiyattablosu:before, #fiyattablosu:after {

content: "";
display: table
}

fiyattablosu:after {

clear: both
}

fiyattablosu .plan {

font: 13px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
background: #fff;
border: 1px solid #ddd;
color: #333;
padding: 20px;
width: 180px;
float: left;
_display: inline; /* IE6 double margin fix */
position: relative;
margin: 0 5px;
box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
}

fiyattablosu .plan:after {

z-index: -1;
position: absolute;
content: "";
bottom: 10px;
right: 4px;
width: 80%;
top: 80%;
box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
transform: rotate(3deg);
}

fiyattablosu .popular-plan {

top: -20px;
padding: 40px 20px;
}

fiyattablosu .baslik {

position: relative;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
padding: 40px;
margin: -20px -20px 20px -20px;
border-bottom: 8px solid;
background-color: #eee;
background-image: linear-gradient(#fff, #eee);
}

fiyattablosu .baslik:after {

position: absolute;
bottom: -8px; left: 0;
height: 3px; width: 100%;
content: '';
}

fiyattablosu .popular-plan .baslik {

margin-top: -40px;
padding-top: 60px;
}

fiyattablosu .plan1 .baslik {

border-bottom-color: #B3E03F;
}

fiyattablosu .plan2 .baslik {

border-bottom-color: #7BD553;
}

fiyattablosu .plan3 .baslik {

border-bottom-color: #3AD5A0;
}

fiyattablosu .plan4 .baslik {

border-bottom-color: #45D0DA;
}

fiyattablosu .fiyat{

font-size: 45px;
}

fiyattablosu .aylik{

font-size: 13px;
margin-bottom: 20px;
text-transform: uppercase;
color: #999;
}

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

fiyattablosu ul {

margin: 20px 0;
padding: 0;
list-style: none;
}

fiyattablosu li {

padding: 10px 0;
}

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

fiyattablosu .satinal {

position: relative;
padding: 10px 20px;
color: #fff;
font: bold 14px Arial, Helvetica;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
background-color: #72ce3f;
border-radius: 3px;
text-shadow: 0 -1px 0 rgba(0,0,0,.15);
opacity: .9;
}

fiyattablosu .satinal:hover {

opacity: 1;
}

fiyattablosu .satinal:active {

box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
}

fiyattablosu .plan1 .satinal{

background: #B3E03F;
}

fiyattablosu .plan2 .satinal{

background: #7BD553;
}

fiyattablosu .plan3 .satinal{

background: #3AD5A0;
}

fiyattablosu .plan4 .satinal{

background: #45D0DA;
}
1

Evet temel tasarımımızı ornek demodaki gibi bu sekilde oturtmus oluyoruz burada dıkkat edilmesi gereken hususlar ise sunlar olacaktır;

1#fiyattablosu .popular-plan {
top: -20px;
padding: 40px 20px;
}[/css]
Burada fiyat tablosunda bir tabloyu one cıkarttık ki daha etkiliyici kullanabilmek için.

Bu Yazıyı Paylaş !