CSS Sade Rank Yapımı

[bretwskin]

Merhaba. Bugün css ile sade rank yapıcağız. 
Html yazılması gereken kod ;

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

<div class="rank">Yazılacak Yazı</div>

Css yazılması gereken kod ;

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

.rank {
 background-color:#666666; /* Arkaplan Rengi */
 color:white;/*Renk*/
 width:200px;/* Genişlik */
 heigt:200px; /* Yükseklik */
 padding:10px;
 text-align:center;/* Ortalamak İçin */
 font-family:Century Gothic ;/* Font  */
 border:3px solid #464646 ;/*çerçeve */
 border-radius:10px 0px 10px 0px ;  /* çerçeveyi yatay yapmak için . */
}

Demo ; https://codepen.io/bretowskin/pen/PKRJyv

[yusufkoc]

Eline sağlık, genişliği ayarlanıp duyuru panosu olarak da kullanılabilir.

[devrimumut]

Hover verebilirsin

[bretwskin]

Hover verebilirsin

O kolay birdahaki dersde onuda eklerim .