Kategorileri Aç / Kapat

CSS ile İçinden Çizgi Geçen Yazı Yapımı (Responsive)

Hadi şimdi BEĞEN butonuna tıklayarak Facebook sayfamıza katıl. Hoş geldin :)


CSS ile İçinden Çizgi Geçen Yazı Yapımı (Responsive)
Bir süredir sadece CSS ve HTML kullanarak içerisinden çizgi geçen yazı yapımı ile ilgili birçok kaynak araştırıyorum. JavaScript versiyonu da var, jQuery versiyonu da. Ancak ben tam Responsive olan ve küçük ekranlarda da sorunsuz çalışan bir kodlama yapmak istiyordum. Bu yüzden sizler için bir kod dizisi derledim ve hemen paylaşıyorum. Aşağıdaki kodları kullanarak siz de farklı bir başlık kullanımı elde edebilirsiniz. Tamamen Responsive.

CSS ile İçinden Çizgi Geçen Yazı Yapımı (Responsive)


1) CSS kodlarımız aşağıdaki gibidir.

.sidebar h2{
margin-right:0!important;
padding-left:0!important;
position:relative;
text-align:left;
overflow:hidden;
margin-left:0!important;
}
.sidebar h2:after{
content: "";
display: block;
border-top: 2px solid #374760;
width: 100%;
height: 2px;
position: absolute;
top: 50%;
z-index: 0;
}
.sidebar h2 span {
padding-right:10px!important;
background: #fff!important;
display: inline-block;
position: relative!important;
z-index: 1!important;
}

2) HTML kodumuz ise aşağıdaki gibidir.

<h2 class='title'><span>Arama</span></h2>

Örnek Görünüm

CSS ile İçinden Çizgi Geçen Yazı Yapımı (Responsive)

Beğendin mi? Beğen veya Paylaş butonlarına tıklayabilirsin. Teşekkürler :)

Hiç yorum yok: