CSS İle Çizgili Başlık Yapmak

pcanalist-css-dersleri-css-cizgili-baslik

Sadece CSS kullanarak resimde gördüğünüz gibi başlıklar oluşturabilirsiniz. CSS Less kullanarak yapılan örneğin kodlarını aşağıda bulabilirsiniz.

HTML

<div id="wrapidy">
  <h1><span>Lorem Ipsum Nedir?</span></h1>
  <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
</div>

CSS

@lineColor: #0f99ef;
@lineHeight: 8px;

body {
  font-family: 'Helvetica', Verdana, sans-serif;
  line-height: @lineHeight * 2.2;
  font-size: 16px;
  margin: 30px 0;
}

#wrapidy {
  width: 978px;
  margin: 0 auto;
  padding: 12px 20px;
  
  -webkit-box-shadow: 0 0 18px #d0d0d0;
  box-shadow: 0 0 18px #d0d0d0;
  
  border-radius: 3px
}

h1 {
  position: relative;
  z-index: 1;
  
  line-height: @lineHeight * 2.6;
  color: @lineColor;
  
  margin-bottom: 1em;
  
  &:before {
    content: "";
    display: block;
    width: 1018px;
    height: @lineHeight;
    top: 7px;
    left: -20px;
    background: @lineColor;
    position: absolute;
  }
  
  span {
    background-color: white;
    position: relative;
    padding: 0 20px;
    &:before,
    &:after {
      content: "";
      display: block;
      position: absolute;
      
      top: 16px;
      background: @lineColor;
      width: @lineHeight;
      height: @lineHeight;
      
      border-radius: 50%;
      -webkit-border-radius: 50%;
    }
    
    &:before {
      left: @lineHeight / -2;
    }
    
    &:after {
      right: @lineHeight / -2;
    }
  }
}

p {
  line-height: 1.4em;
}

Canlı Örnek

See the Pen Headline Lines by Ju Kempff (@jkempff) on CodePen.

Hakan Demirel

pcanalist.com kurucularından Hakan Demirel, özel bir şirkette Front-end Developer olarak çalışmakta. Twitter üzerinden @hakandemirel hesabını takip edebilir yada hakandemirel.com adresinden daha fazla bilgi alabilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yandex.Metrica