Materyal Duyuru Panosu v1.5

[Enes Bayraktar]

Merhaba arkadaşlar böyle parçalar yayınlamayalı uzun zaman oldu hatakenin konusunu gördüm ve bende 5dk da bir adet yaptım biraz hamlamışım kodlarda hata olabilir onları bildirirseniz yada düzeltirseniz sevinirim :)

Demo: http://codepen.io/coder-rj/pen/LGxWdo

Global.css

PHP Kod: Tümünü Seç Tümünü Kopyala

.center {left:50%; position:absolute; margin-left:-500px;}

.m-ann {background:#fff; width:1000px; height:50px; display:block; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); overflow:hidden;}

.i-text {padding:14px 13px; background:#EE6E73; color:#fff;}

.p-text {color:#333; font-family:"Roboto",Arial sans-serif; font-weight:500; font-size:14px; display:inline; text-align:left; padding:14px 13px; position:relative; top:-7px;} 


Header İnclude

PHP Kod: Tümünü Seç Tümünü Kopyala

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 


Kodu Kullanacagınız Yere

PHP Kod: Tümünü Seç Tümünü Kopyala

<div class="center">
  <div class="m-ann"><i class="i-text material-icons">mic</i><p class="p-text">Duyuru Yazısı</p></div>
</div> 


Ortalamayı kaldırmak istiyorsanız '<div class="center"></div> bu kodu kaldırınız position:absolute oldugu için sitede birşeylerin üstüne vs çıkabilir position'ları siz belirlersiniz size göre.

[EmSaLSiZ]

Neden 5dk ya ediyorsunki? Biraz daha çabalayip daha iyisini etmek varken?

[Gameiro.]

Güzel,eline sağlık ama hep aynı stil kötü oluyo.

[ertank]

Helal

[kaRanLık-61]

sanki daha önce aynısını bir yerden gördüm gibi güzel.

[Enes Bayraktar]

yakında kendi kullanacagım'ı paylasıcagım biraz fonksiyonlu olucak ayriyetten bunun flatı vardı bir adet paylasılmıstı ona benzetmiş olabilirsiniz.