CSS Rank Denemesi

[#Raptor]

https://codepen.io/pormis/pen/OzdrOB

[Dream41]

Yazı orantısız onun dışında bilindik tarz daha değişik yapabilirdin eline sağlık.

[#Raptor]

Teşekkürler.

[Anakin Skywalker]

Basit görünüyor.

[#Raptor]

Basitden başlamak istedim. Bir anda harikalar yaratamıyoruz.

[Escobar]

CSS kodlarını şununla değiştir daha güzel ve orantılı olur;

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

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i);

.cssrank {
  background-color:#F44336;
    height:40px;
width:220px;
    font-family: 'Roboto', sans-serif;
     font-size:20px;
  overflow: hidden;
  border-radius:3px;
    box-shadow:0 1px 1px rgba(0,0,0,.3);
      text-align: center;
  color:#fff;
  line-height:38px;
}
.cssrank:hover {
  background-position:20px 0px;
  box-shadow:0 4px 2px rgba(0,0,0,.3);
}

[#Raptor]

Kendi yaptığım kalsın, başkalarının düzenlediği kodlarla filan övünmeye çalışmıyorum burada.

[Escobar]

Kendi yaptığım kalsın, başkalarının düzenlediği kodlarla filan övünmeye çalışmıyorum burada.

Bu çalışmayla övgü beklemek saçma olur zaten, boyutlara 2-3 ayar verdim hataları düzeltmek için belki olur da düzenlediğim kodlara bakıp birdahaki çalışmalarında dikkat edersin diye. Sen bilirsin.

[#Raptor]

Düzenlediğin kodları inceleyeceğim, Övgü beklemek gibi bir algı vermedim inşallah :P

[Novruz]

HTML kısmında font-awesome'un css'ni çekmişsiniz de kullanılmamış ranka ne amaçla eklenmiş anlamadım.
line-height kısmını rankın yüksekliğiyle aynı boyutta olmasına dikkat etmelisin, transition da eklesen daha iyi olurdu. İlk çalışman diye varsayıyorum, eline sağlık.

[#Raptor]

Ranka icon eklicektim font awesome ile ama sonra vazgeçtim.
Teşekkürler.