11
Dairesel düğmeler oluşturmak için iki yolum var: http://codepen.io/anon/pen/GiHyJ Her ikisi de eşit görünüyor, ancak hangi yolun daha kararlı, çapraz platform, kullanılabilir, vb. Olduğundan emin değilim. Yalnızca test etmek için bir Android telefonum var ve ikisi de iyi görünüyor . Bir diğeri üzerinde bir yöntem kullanmalı mıyım? Bir 'un içinde bir tane: <img>, bir kullanıcı için img'de bir içerik menüsü elde etmesine izin verir.Yuvarlak düğmeler oluşturmak için en iyi yol hangisidir: <img> veya arkaplan resmi?
<div class="method1">
<img src="http://i.imgur.com/TLFDrvp.jpg" />
</div>
.method1 {
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
İkinci yöntem: <div> üzerine background: url. Daha az işaretleme.
<div class="method2"></div>
.method2 {
background: url(http://i.imgur.com/TLFDrvp.jpg);
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
Arka plan sürümünü tercih ederim. Benim düşünceme göre görüntüler sadece bir görüntüyü göstermek için kullanılmalıdır. Sadece düzen/tasarım için ihtiyacınız varsa görüntüleri kullanmayın. Dediğim gibi: Burada gerçek bir gerçek yok, sadece benim fikrim. –
@LinusCaldwell: Tersine, biri arka plan-imajının sadece arka plan için kullanıldığını iddia edebilir. Önplan içeriği sağlamak için arka planlar kullanmayın. – ruakh
Düğme için bir arka plan resmi ve bağlantı için normal metin kullanırsanız, sonuçta ortaya çıkan sayfa, kör insanlar için olduğu gibi teknoloji destekli tarama yoluyla daha kolay okunabilir. Ayrıca, CSS ile şekillendirerek, düğmeyi ve düğmenin üzerindeki metni ayrı tutarak, gelecekteki görünüm ve hissetme güncellemelerini daha kolay yapabilirsiniz. –