Başlığınız, ana sayfanızın en önemli bölümlerinden biridir. Bu genellikle ilk gördüğünüz şeydir ve bu nedenle ilk izlenimi belirleyen şeydir. Diğer herhangi bir ilk izlenim gibi, iyi olmasını istersiniz. Şimdi, başlığınızı sunmanın yaratıcı bir yolunu arıyorsanız, bu eğiticiden keyif alacaksınız çünkü size başlığınıza CSS metin bloğu animasyonlarını nasıl ekleyeceğinizi göstereceğiz ve ayrıca düzen JSON dosyasını ücretsiz olarak indirebilirsiniz!
anket
Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.
Tasarım başlayalım
1. bölüm ekle
Gradyan arka planı
Yeni bir sayfaya veya üzerinde çalıştığınız sayfaya normal bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve aşağıdaki gradyan arka planını uygulayın:
- Renk 1: # f0f2b
- Renk 2: # c10b1a
- Gradyan türü: doğrusal
- Gradyan yönü: 63 derece
aralık
Bölüm tasarımı sekmesine geçin ve aşağıdaki özel üst ve alt dolgu değerlerini farklı ekran boyutlarına uygulayın:
- Üst dolgu: 7vw (masaüstü), 20vw (tablet), 25vw (telefon)
- Alt dolgu: 7vw (masa), 20vw (tablet), 25vw (telefon)
Sınır
Ayrıca bölüme bir kenarlık ekleyin.
- Sınır genişliği: 2vw (üst, sol, sağ)
- Alt kenar genişliği: 0vw
- Kenarlık rengi: #ffffff
Yeni bir satır ekle
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır eklemeye devam edin:
boyutlandırma
Çizgi parametrelerini açın ve boyutlandırma parametrelerini uygun şekilde değiştirin:
- Genişlik:% 100
- Maksimum genişlik:% 100
Sütuna metin modülü ekleme
H1 içeriği ekle
Ardından, seçtiğiniz H1 başlığına sahip bir metin modülü ekleyin.
H1 başlığındaki her kelimeye Div etiketi ekleme
Başlık kopyanızın metin sekmesine geçin ve başlığınızdaki her kelimeye farklı bir div ekleyin. CSS kimliği her kelime için farklı olmalıdır.
hazır
-de
İnşa etmek
Güzel
Web siteleri?
H1 metin ayarları
Modül tasarımı sekmesine geçin ve H1 metin ayarlarını buna göre değiştirin:
- Başlık yazı tipi: Work Sans
- Başlık yazı tipi ağırlığı: orta
- Üstbilgi Metin Rengi: #ffffff
- Başlık Metin Boyutu: 4vw (masaüstü), 5vw (tablet), 6vw (telefon)
- Kafa hattı yüksekliği: 1,4 em
aralık
Ardından farklı ekran boyutlarında marj değerlerini değiştirin.
- Sol kenar boşluğu: 20vw (masa ve tablet), 15vw (telefon)
- Sağ kenar boşluğu: 35vw (masaüstü), 20vw (tablet), 15vw (telefon)
Sütuna kod modülü ekleme
CSS kodunu girin
Metin bloğu animasyonunun başlığımıza uygulanması için biraz CSS koduna ihtiyacımız olacak. Bu CSS kodunu yeni bir kod modülüne ekleyeceğiz.
<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>
aralık
Modül tasarımı sekmesine geçin ve tüm varsayılan alt dolguyu kaldırın.
- Alt kenar boşluğu: 0px
Sütuna bir düğme modülü ekleme
Bir kopya ekle
İhtiyacımız olan bir sonraki modül bir düğme modülü. Seçtiğiniz bir kopyasını girin.
Düğme ayarları
Modül tasarımı sekmesine geçin ve düğme ayarlarını buna göre değiştirin:
- Düğme için özel stiller kullan: Evet
- Düğme metni boyutu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
- Düğme metni rengi: #ffffff
- Düğme arka plan rengi: # 000000
- Düğme kenarlığı genişliği: 0 piksel
- Düğme yazı tipi: Work Sans
aralık
Ardından aralık ayarlarına gidin ve farklı ekran boyutlarında özel kenar boşluğu ve dolgu değerleri uygulayın.
- Üst kenar boşluğu: 3vw (ofis),
- Sol kenar boşluğu: 20vw (masa ve tablet), 15vw (telefon)
- Üst dolgu: 1.2vw (masaüstü), 2vw (tablet), 4vw (telefon)
- Alt dolgu: 1.2vw (masa), 2vw (tablet), 4vw (telefon)
- Sol doldurma: 1.8vw (masaüstü), 3vw (tablet), 6vw (telefon)
- Sağ dolgu: 1.8vw (masa), 3vw (tablet), 6vw (telefon)
Animasyon
Animasyon ayarlarını da özelleştirin.
- Animasyon Stili: Flip
- Animasyon yönü: aşağı
- Animasyon gecikmesi: 2000 ms
- Animasyon yoğunluğu:% 100
- Animasyon başlangıç şeffaflığı:% 100
- Animasyon hız eğrisi: kolay giriş
- Animasyon tekrarı: bir kez
2. bölüm ekle
Bir öncekinin hemen altına yeni bir normal bölüm ekleyerek devam edin.
aralık
Bölüm ayarlarını açın ve varsayılan üst dolguyu kaldırın.
- Üst dolgu: 0 piksel
Yeni bir satır ekle
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır eklemeye devam edin:
boyutlandırma
Daha fazla modül eklemeden, hat parametrelerini açın ve hattın kesit kabının tüm genişliğini işgal etmesine izin verin.
- Genişlik:% 100
- Maksimum genişlik:% 100
Sütuna metin modülü ekleme
İçerik ekle
Daha sonra, bir metin modülü ekleyin. içindekiler seçtiğiniz açıklama.
Arka plan rengi
Beyaz bir arka plan rengi ekleyin.
- Arka Plan Rengi: #ffffff
Metin ayarları
Modül tasarımı sekmesine geçin ve metin ayarlarını buna göre değiştirin:
- Metin yazı tipi: Work Sans
- Metin rengi: # 9b9b9b
- Metin boyutu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
- Metin satırının yüksekliği: 2.6em
aralık
Ayrıca farklı ekran boyutlarında özel aralık değerleri ekleyin.
- Üst marj: -5vw (masaüstü), -20vw (tablet), -27vw (telefon)
- Sol kenar boşluğu: 20vw (masa), 13vw (tablet), 8vw (telefon)
- Sağ kenar boşluğu: 20vw (masaüstü), 13vw (tablet), 8vw (telefon)
- Üst dolgu: 5vw (masaüstü), 7vw (tablet ve telefon)
- Alt dolgu: 5vw (masa), 7vw (tablet ve telefon)
- Sol doldurma: 3vw (masaüstü), 5vw (tablet), 6vw (telefon)
- Sağ dolgu: 3vw (masa), 5vw (tablet), 6vw (telefon)
Gölge kutusu
Ve ince bir kutu gölgesi uygulayarak modül ayarlarını tamamlayın. Bu kadar!
- Kutu Gölge Bulanıklığı Gücü: 50px
- Gölge rengi: rgba (0,0,0,0,1)
anket
Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.
Son düşünceler
Bu yazıda, başlığınıza CSS metin bloğu animasyonlarını nasıl ekleyeceğinizi gösterdik. Başlığınızın görünür olmasını ve baştan okunmasını sağlamak önemlidir, başlığınıza animasyon eklemek kesinlikle yardımcı olabilir! Ayrıca layout JSON dosyasını ücretsiz olarak indirebildiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.
Çeviri: ElegantThemes
