s.ytimg.com
bu çıktı, boş piksel. biraz irdeledim, sayfadaki tüm resimleri içeren bir gif resmi buldum. s.ytimg.com
o resimleri buradan alıyor galiba. bunu nasıl yapmış çözemedim, hangi css tekniğini kullanmış? ya da ben bulamadım ikonların tam kaynağını.
hazır link de koyuyorum ilgilenenler için;
www.youtube.com
background-position ile belirliyor.
nokta ati$i ile bir bakima. x ve y koordinatlarini belirtiyor, o kisim gorunuyor.
ister
background-position: 0px 10px;
gibi belirtirsin
ister
background-x-position: 0px;
background-y-position: 10px;
$eklinde.
ki onlar da oyle yapmi$ zaten:
.icn_share_promoted_facebook, a:hover .icn_share_facebook
{
background-color: transparent;
background-image: url(s.ytimg.com );
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: -265px;
background-y-position: -47px;
}
edit: bir ornegi de $urda misal: netfx3.com
sagdaki ve ortadaki butonlarda gorebilirsin. bunun .css'i youtube'unki kadar kari$ik degil, daha rahat gorebilirsin.
background position ile ayarlasa, her tus icin ayri ayri back groundposition ayarlamasi ve bunun sonucunda backgroundlarin ustuste binmesi soz konusu olmayacak mi acaba? bence mapping gibi birsey yapmistir. hani resimi dugme yaparken kordinatlarini giriyorsun ve o koordinata tiklayinca yeni bir link aciliyor ya; iste bunda da yine koordinatlari girerek, buyuk resimden kucuk resimleri ayiklayarak istedigin yere koyabilmeni mumkun kilmistir.
egotm: yazdigim css kodu, sitenin css'inden alinmi$ olan.
adamlarin yazdigi yani. gordugun uzere background-position ile yapilmi$ durumda. background-repeat:no-repeat; ile o sorunun da olu$masini engelliyorlar. ayrica bu teknik her buton icin ayri ayri image hazirlamaktan cok daha kolay.
s.ytimg.com