İki Farklı Fiyat Tablosu Tasarımı

Sizce hangisi?


  • Kullanılan toplam oy
    8

Bu konuyu okuyanlar

CapScroLL

Profesör
Katılım
22 Ağustos 2014
Mesajlar
3,645
Reaksiyon puanı
2,672
Puanları
113
Yaş
25
Yeni projem için fiyat tablosu hazırlıyorum fakat iki tasarım yapıp farklı gözlerden öneri almayı uygun gördüm, renkler problem değil genel olarak tasarım hakkında fikirleriniz nelerdir? Sizce yapı olarak hangisi daha iyi?

Kullanmak isteyen olur diye Codepen penlerini bırakıyorum, ayrıca hover efektlerini görmek için de girebilirsiniz;
SDN Price Card - 1 (Codepen)
SDN Price Card - 2 (Codepen)

Screenshot_4.jpg


Screenshot_5.jpg
 

CapScroLL

Profesör
Katılım
22 Ağustos 2014
Mesajlar
3,645
Reaksiyon puanı
2,672
Puanları
113
Yaş
25
Linklerde numaralandırma hatası yapmışım, tekrar düzelttim.
İlk fotoğraf 1 numaralı oluyor ikinci fotoğraf 2 numaralı oluyor, önceden gelen arkadaşların kafası karışmasın.

Önerilerinizi sunduğunuz için teşekkür ederim.
 

Forumun TDK'si

Asistan
Cezalı
Katılım
16 Kasım 2019
Mesajlar
243
Reaksiyon puanı
369
Puanları
63
Linklerde numaralandırma hatası yapmışım, tekrar düzelttim.
İlk fotoğraf 1 numaralı oluyor ikinci fotoğraf 2 numaralı oluyor, önceden gelen arkadaşların kafası karışmasın.

Önerilerinizi sunduğunuz için teşekkür ederim.
2. olanın geçişini daha canlı bir renk yapar mısın merak ettim de?
 

Yasiin

Dekan
Katılım
23 Haziran 2020
Mesajlar
5,168
Reaksiyon puanı
3,966
Puanları
113
2. Gayet hoş fakat renklendirmede değişiklikler yaparsan çok güzel olur.
 

Forumun TDK'si

Asistan
Cezalı
Katılım
16 Kasım 2019
Mesajlar
243
Reaksiyon puanı
369
Puanları
63
Bence daha güzel oldu eğer böyle olursa 2. daha iyi. Sarı tonunu da dener misin bir?
@CapScroLL CSS'i böye dener misin?
CSS:
body{
  background: #fcb514 !important;
  font-family:arial, helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
section{
  padding: 100px 0;
}
.card-table{
  text-align:center;
  overflow: hidden;
  margin: 20px;
  background: #f7f7f7;
  box-sizing: border-box;
  box-shadow: inset 0 0 40px rgba(0,0,0,.2), 0 20px 50px rgba(0,0,0,.5);
border-radius: 20px;
}
.card-table .card-head{
  padding: 50px;
  background: linear-gradient(45deg, #fcb514, #a32638);
}

.card-table .card-head h3{
  text-transform: uppercase;
  color: #fff
  margin: 0;
  padding: 0;
  font-weight:200;
}
.card-table .card-head h4{
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  padding: 0;
  font-size:32px;
  font-weight:400;
}
.card-table .card-tbody{
  position:relative;
}
.card-table .card-tbody ul{
  position: relative;
  list-style:none;
  margin:0;
  padding:4px 0;
  text-transform: uppercase;
  font-size:16px;
}
.card-table .card-tbody ul li{
  padding: 20px 0;
  transition: all .3s ease-in-out;
}
.card-table .card-tbody ul li:hover{
  color:white;
  background: linear-gradient(45deg, #fcb514, #a32638);
}
.card-table .card-tbutton{
  padding: 32px 0;
  background: linear-gradient(-45deg, #fcb514, #a32638);
  position: relative;
}
.card-table .card-tbutton a{
  text-decoration:none;
  background: linear-gradient(45deg, #fcb514, #a32638);
  border-radius:50px;
  padding: 16px 64px;
  color: #fff;
  font-size:16px;
  transition: all .3s ease-in-out;
}
.card-table .card-tbutton a:hover{
  font-size:20px;
}
.col-4:nth-child(2) .card-table{
  transform: scale(1.1);
}
 
Son düzenleme:

CapScroLL

Profesör
Katılım
22 Ağustos 2014
Mesajlar
3,645
Reaksiyon puanı
2,672
Puanları
113
Yaş
25
Arka plandaki rengi biraz koyulaştırıp ön taraftaki yazıları biraz daha ön plana çıkartırsan bitti bu iş. 😊😊
Siteye ekleyeceğim için arkaplan değişecek, göstermelik olarak rastgele renkler atıyorum ama siteye attığımda muhtemelen hafif sönük beyaz olur, yazı konusunu hallederim görüşlerin için teşekkürler :)

Bence daha güzel oldu eğer böyle olursa 2. daha iyi. Sarı tonunu da dener misin bir?
Şöyle bir şey oluyor ama beyaz arkaplanda biraz fazla göz yorar.
Screenshot_9.jpg


Senin CSS kodlarını denedim hover için gradient verince de güzel bir görüntü oluyor, renkler kullanacağım arkaplan için pek uygun değil bu yüzden biraz daha kapalı tonları tercih etmem daha uygun olur.
 

panzr

Profesör
Katılım
9 Mayıs 2020
Mesajlar
2,579
Reaksiyon puanı
1,496
Puanları
113
Bu çok güzel olmuş, eline sağlık.
Mesaj otomatik birleştirildi:

Siteye ekleyeceğim için arkaplan değişecek, göstermelik olarak rastgele renkler atıyorum ama siteye attığımda muhtemelen hafif sönük beyaz olur, yazı konusunu hallederim görüşlerin için teşekkürler :)


Şöyle bir şey oluyor ama beyaz arkaplanda biraz fazla göz yorar.
Ekli dosyayı görüntüle 108062

Senin CSS kodlarını denedim hover için gradient verince de güzel bir görüntü oluyor, renkler kullanacağım arkaplan için pek uygun değil bu yüzden biraz daha kapalı tonları tercih etmem daha uygun olur.
Fikrimi değiştirdim bu daha güzel olmuş :tearsofjoy:
 

Forumun TDK'si

Asistan
Cezalı
Katılım
16 Kasım 2019
Mesajlar
243
Reaksiyon puanı
369
Puanları
63
Siteye ekleyeceğim için arkaplan değişecek, göstermelik olarak rastgele renkler atıyorum ama siteye attığımda muhtemelen hafif sönük beyaz olur, yazı konusunu hallederim görüşlerin için teşekkürler :)


Şöyle bir şey oluyor ama beyaz arkaplanda biraz fazla göz yorar.
Ekli dosyayı görüntüle 108062

Senin CSS kodlarını denedim hover için gradient verince de güzel bir görüntü oluyor, renkler kullanacağım arkaplan için pek uygun değil bu yüzden biraz daha kapalı tonları tercih etmem daha uygun olur.
Benim attığım CSS Galatasaray Edition'dı🤣 Ama geçişli renkler göze daha hoş geliyor.
Mesaj otomatik birleştirildi:

Fikrimi değiştirdim bu daha güzel olmuş :tearsofjoy:
Bir de attığım CSS'i dene!
 

Son mesajlar

Üst