Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
CSS ile Hoverli Yüzde Çubuğu
#1
(08-04-2013, 12:18 PM)Ripbyrustavi02 Nickli Kullanıcıdan Alıntı:  r3mq1.png


şimdi kurulumuna geçelim

ilk olarak admin kp -> yapılandırma -> pluinglerden html iznini açın

sonra

Global.css gelerek şu kodu yapıştırın;
Kod:
.container-barra {
width: 80%;
margin: 10px 10%;
}
.barra-outer {
width: 100%;
height: 32px;
border: 3px solid #cccccc;
background: #ffff99;
}
.barra-interior {
width: 40%;
height: 32px;
background: #ffcc00;
}
.porcentaje {
margin-left: 40%;
float: left;
padding-left: 3px;
}
.porcentaje .esquinita {
width: 1px;
height: 1px;
border-top: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #cccccc;
}
.porcentaje .porcentaje-visual {
background: #cccccc;
padding: 5px;
border-radius: 0px 5px 5px 5px;
text-align: center;
}


Sonra ise html kodu olarak ise konu içeriğine filan ekliyebilirsiniz iyi kullanmalar :)
Kod:
<div class="container-barra">
<div class="barra-outer">
<div class="barra-interior"></div>
</div>
<div style="clear:both"></div>
<div class="porcentaje">
<div class="esquinita"></div>
<div class="porcentaje-visual">40%</div>
</div>
</div>

iyi kullanmalar :)
Okyanusta batan gemidir yalnızlık,
Çok derinlerdedir gücün yetmez onu oradan çıkarmaya.
Kaybolup gider daha sonra.
Kendi kendine konuşmaktır yalnızlık...
Belkide en iyi tarafıdır bu
Kendini sorgularsın, bir kez olsun çekersin köşeye nefsini hayatı anlamaya çalışırsın.

Cevapla


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping