CSS3 Fiyatlandırma Tabloları | Web Tasarım, Kurumsal Kimlik, Logo Tasarımı, Katalog, Tuzla 
CSS3 Fiyatlandırma Tabloları

CSS3 Fiyatlandırma Tabloları


1. Adım - HTML

 
"Fiyatlandırma tablosu" sınıfıyla bir tablo oluşturacağız, bu sınıf şekillendirmeyi eklemek için temel oluşturacak. Daha sonra, fiyatlama tablolarımızı üç bölümden üreteceğiz.

1. Planın ve ilgili fiyatın unvanını alacaktır.

2. Planın özelliklerine sahip olacak (örneğin: bant genişliği, disk alanı vb.)

3. Bir metin açıklaması olan altbilgidir.
 
Kodlar:

 

Adım 2 - Temel CSS
 
Fiyatlandırma tablosunu şekillendirmeye başlamadan önce, varsayılan satır yükseklikleri, kenar boşlukları ve başlıkların yazı tipi boyutları gibi şeylerde tarayıcı tutarsızlıklarını azaltmak için bir CSS sıfırlama dosyası ekleyeceğiz. Kullanacağımız CSS sıfırlama dosyası Eric tarafından yapılan bu sıfırlama dosyasıdır.
 
 
Daha sonra, fiyatlama tablolarının genişliğini ayarlayacağız. Üç sütun kullanacağız, genişlik 670 piksel olacak, ancak üçten fazla sütunu kullanacaksanız, genişlik değerini artırmanız veya azaltmanız gerekecek. Ayrıca, tablo sütunları için bazı temel stiller ayarlayacağız. Kenar boşluklarını tablolar arasına eklemek için değerini "display: inline-block;" olarak ayarlamalıyız, bu özelliği ayarlayarak bazı hatalar tablonuzun içeriğine bağlı olarak görünebilir, bu nedenle sütunları istemiyorsanız boşluk görüntü özelliğini kaldırabilirsiniz.
 

Kodlar:

 

3. Adım - Plan Kesiti
 
Plan kesimi için genişliği ayarlayacağız (bu genişlik değeri sonraki bölümlerde de kullanılacaktır), yükseklik, "border-radius" özelliğini kullanarak biraz dolgu ve yuvarlatılmış köşeler ekleyin. Daha sonra, plan başlığı ve küçük açıklama için tipografi stillerini (yazı tipi ailesi, boyut, çizgi yüksekliği, vb.) Ekleyeceğiz.
 
Kodlar:
 
 
Ayrıca, yeşil ve turuncu olmak üzere iki farklı renk düzenimiz var. Her renk düzeni için farklı bir renk, metin gölgesi ve arka plan resmi ayarlayacağız.
 
Kodlar:
 
 

 

Adım 4 - Fiyat Bölümü
 
Fiyat bölümü en zor olan bölüm çünkü burada çok fazla bilgi var. Başlamak için, plan bölümüyle aynı genişlik değerini ayarlayacağız, hafif CSS3 eğimi, bazı tipografi stilleri vb. Ekleyeceğiz.
 

Kodlar:

 

"Katıl" düğmesi için üstten 41px, sağdan -5px yerleştirelim, parmaklıkları, yazı tipi boyutunu vb. Ekleyelim. Plan bölümünde yaptığımız gibi yeşil renkler ve degradeler için farklı renkler ve degradeler ayarlamamız gerekiyor.

Turuncu renk şemaları.

Kodlar:

 

Düğmeyi bir "bayrak" gibi görünmesi için "iki üçgen" ve "küçük ok" eklemek için: before ve: after sözde seçicileri kullanırız. Bu iki seçici, öğeye önce ve sonra içerik eklememize izin veriyor, böylece html'ye iki ilave etiket eklememiz gerekmiyor. Düğmenin sağındaki küçük ok akıllı kenar tekniği kullanılarak eklenecek. Her biri için farklı renklerle tüm kenarlıkları birleştirerek üçgen gibi özel şekiller oluşturabiliriz, bu teknik hakkında daha fazla bilgi edinmek için bu web sitesine bakabilirsiniz.

Kodlar:

 

 
Adım 5 - Özellikler Bölümü
 
Bu bölümün başındaki "şerit" ile başlayacağız, bunu: before selector ile ekleyeceğiz. Ardından genişliği ayarlarız (burada sol genişliğin 210px olmadığına dikkat edin), üst sınır ve bazı tipografi stilleri.
 
 
Kodlar:
 

Simgeler için her biri için özel bir sınıfımız var ve yalnızca her sınıf için arka plan resmini yerleştirmemiz gerekiyor.

Kodlar:

 

 

Adım 6 - Açıklama Bölümü
 
Açıklama bölümü en basit, yalnızca metintir. Her zamanki gibi genişliği, paletleri, arka plan rengini, metni ortaya hizalayacağız vb. Bu tablonun sütununun sonudur ve CSS3 kullanarak gölge ve yuvarlatılmış köşeler ekleyeceğiz.
 
Kodlar:
 
 

 

7. Adım - "Float" Metni
 
Tablonuzun son bölümü için "kayan" metni (bir sütun ön plana çıkarmak için özel bir açıklama ekleyebileceğiniz yerde) özel bir yazı tipi ekleyeceğiz, bu fontu fontsquirrel'de bulabilir ve bunu @ font-face.
 
Kodlar:

 

Ardından bu bölümü yerleştirir, metin stilini ve turuncu oku en üste ekleriz.

Kodlar:

 

8. Adım - Internet Explorer
 
Her zamanki gibi internet explorer'ın CSS oluşturma konusunda bazı küçük farklılıklar vardır, bunları düzeltmek için yalnızca IE9, IE8 ve IE7'de yüklenecek yeni bir dosya oluşturduk. Bu dosyayı sadece bu tarayıcılarda yüklemek için şartlı yorumlarını kullanacağız .
 
İşte bu üç tarayıcıda yalnızca CSS çalışacak:
 
Kodlar:

 

 YUKARI