belki önemsiz bir şey ama yine de öğrenmek önemli.
şimdi, resimlerin 1.'si butonun normal görünüşü, ikincisi ise hover hali.
e1212.hizliresim.com
bu da icon'un sprite edilmeye müsait hali.bu şekilde olmasını istiyorum.
bunun için şunları yaptım:
1. background-color: rgba(255, 255, 255, 0.1); (böylelikle butondaki o şeffaflığı yakaladım)
background-image: url('logolar/lock.png');
background-repeat: no-repeat;
background-position: -2px -2px;
(sprite cow ile aldığım sprite özelliği)
bunun dışındakiler ise, padding olur, text-align olur öyle şeyler.
bu yukarıdakilerin bir de hover versionu var, opacity 0.1'den 0.5'e çıkıyor. background position ise -2px -42px'e geliyor.
ancak sıkıntım var: bunu bu şekilde yaptığımda, background image'ı ortalayamıyorum. hep sola yapışık kalıyor. ve de padding oranına göre sprite edilen icon da bazen alttaki resmi de gösteriyor.
bunu alternatif olarak nasıl üretebilirim?
son çare olarak butonumun içine direkt resmi atacağım ama o zaman da sprite yapamayacağım.
siz, yukarıdaki materyaller ile, bahsettiğim butonu nasıl elde edersiniz?
(ha bu arada arkaplandaki opacity değişimi de transition yardımı ile geçişli yapılıyor ama o o kadar önemli değil)
neyse tam bunları yazarken farklı bir şey denedim ve oldu, sprite edilecek dosyanın da boyunu yükselttim biraz :)
edit: bu arada aslında nasıl yaptıgıma dair kodu da paylaşacağım ama kimseye bir faydası olmayacaktır :)
ben de şöyle bişey yaptım
.button {
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.1);
display: inline-block;
line-height: 30px;
text-align: center;
text-indent: -999px;
margin: 20px;
background-image: url('e1212.hizliresim.com);
background-repeat: no-repeat;
background-position: center -34px;
}
.button:hover {
background-position: center 6px;
}
css kodu
<a class="button" href="#"> </a>
html kodu