Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

CSS ile Çizgi Efektli Yazı Yazma Nasıl Yapılır?


FacebookTwitterPinterestTumblrYazdır


Bir süredir CSS derslerine ara vermiştik. Şimdi ise güzel bir ders ile karşınızdayız. CSS ile çizgi efektli yazı yazma nedir öncelikle bunu açıklayalım. Standart border kodumuzu, yazımızın arkasından geçecek şekilde tanımlamaya çalışacağız. Böylelikle ortaya gerçekten güzel bir görünüm çıkacak. Dilerseniz aşağıdaki adımlar doğrultusunda web sitenizdeki yazı başlıklarınızda v.b. kullanabilirsiniz bu özelliği. Fazla vakit kaybetmeden izniniz ile, ilgili adımlara göz atıyor olacağız.

AYRICA: CSS ile Uzun Yazıları Üç Nokta ile Bitirmek

1) Öncelikle temanızın CSS alanına aşağıdaki kodları ekleyin.

<style>
/* CSS */
.line-titles {position: relative;margin-top:30px;margin-left:-40px;text-align: center;display: block;font-size:16px;width:1050px;}
.line-titles:before {position:absolute;top:50%;z-index:1;display:block;width:100%;height:1px;border-top:1px solid #ddd;content:""}
.line-titles span {position:relative;z-index:1;padding:0 20px;background:#fff;display:inline-block}
</style>

2) HTML kısmına ise aşağıdaki kodları ekleyin.

<div class='line-titles'><span>Başlık Buraya Gelecek</span></div>

Örnek Görünüm

Not: Kırmızı alanı kendinize göre değiştirmeyi unutmayınız.


  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yazı Etiketleri
Yukarı Çık