Course recommendation:
- Önceki sayfa Bölme çizgisi
- Sonraki sayfa Animasyon ikonu
How to create: text separator
AND
Yanıtlayıcı metin ayırıcısı nasıl oluşturulur
İlk Adım - HTML Ekleme:
<div class="divider">Lorem Ipsum</div>
İkinci Adım - CSS Ekleme: .divider { font-size: 30px; sınıfı bazı stiller ayarladı. Metin boyutunu 30 piksel olarak ayarladınız, flex düzenini kullandınız ve margin: 5px; display: flex; .divider::before, .divider::after { flex: 1; content: ''; padding: 3px; background-color: red; margin: 5px;
Deneyin
Örnek açıklaması:
Bu örnekte, CSS ile bir metin ayırıcısı nasıl oluşturulacağını öğreneceksiniz. Özellikle, bu etki HTML ve CSS'nin birleşimi ile elde edilir.
Öncelikle, HTML'de "divider" adlı bir sınıfı olan bir <div> elementi eklemeniz gerekiyor ve içinde göstereceğiniz metni (bu örnekte metin "Lorem Ipsum"dir) yerleştirin. .divider
Sonra, CSS'de, sınıfı bazı stiller ayarladı. Metin boyutunu 30 piksel olarak ayarladınız, flex düzenini kullandınız ve
align-items: center;
Sonra, sanal elementleri kullanarak metni ayırıcı içinde dikey olarak ortalamak için. ::before
ve ::after
ayırıcıya her iki tarafa da süs eklemek için. flex: 1
onların .divider
elemenin metin dışındaki tüm boşlukları. content: ''
Bu iki sanal elementin boş olduğundan ve içerik içermediğinden emin olun.
Sonra, iç boşluk, arka plan rengi ve dış boşluk ayarlayarak ayırıcı stili tanımlayın. Bu örnekte, ayırıcı rengi kırmızıdır ve bazı iç boşluk ve dış boşluklar vardır.
- Önceki sayfa Bölme çizgisi
- Sonraki sayfa Animasyon ikonu