Opencart Türkiye Destek Sitesi ,E-Ticaret Yazılımı Destek Paylaşım Forumu

Css sprite logo nedir ?

Css sprite, e-ticaret sitenize giriş yaptığınız zaman sitenize çağrılmakta olan bütün resimleri bir araya getirerek tek bir resim üzerinden çağırılmalarını sağlayan tekniktir. Direk olarak sitenizin açılış hızını arttırıcı ve buna paralel olarak arama motoru optimizasyonunuzdan daha yüksek performans almanızı sağlamaktadır.

demo : http://lazbakkal.biz/index.html

Css dosyamıza ekleyelim :

Alıntı:/* Actual content stuff! */
.container {
margin:0 auto 50px;
height:156px;
width:156px;

position:relative;
}
.border {
border:4px solid #da4e48;
}
.container img {
position:relative;
z-index:-1;
}

.example {
animation:animate_bg 3.75s steps(44) infinite;;

background-image:url(http://mozorg.cdn.mozilla.net/media/img/...tail.png);
}

.bg {
background-image:url(http://mozorg.cdn.mozilla.net/media/img/...tail.png);
}

.anim {
background-image:url(http://mozorg.cdn.mozilla.net/media/img/...tail.png);

animation:animate_bg 44s linear infinite;
}
.anim img {
animation:animate_img 44s linear infinite;
}
.anim img:nth-child(2) {
transform:translateY(-156px) translateX(-6864px);
}
.anim img:nth-child(3) {
transform:translateY(-312px) translateX(-13728px);
}

.steps, .steps img {
animation-timing-function:steps(44);
}

.speed, .speed img {
animation-duration:3.75s;
}

@keyframes animate_bg {
0% {background-position: -6864px 0; }
100% {background-position: 0 0;}
}
@keyframes animate_img {
0% {left:0; }
100% {left:6864px;}
}

dosyamızı açalım : catalog/view/theme/seninteman/template/common/

header.tpl


bul :

Alıntı: <?php if ($logo) { ?>
<div id="logo"><a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a></div>
<?php } ?>

değiştir :

Alıntı:<?php if ($logo) { ?>
<div id="logo"><div class="content">
<div class="example container" onclick="location.href='<?php echo $home; ?>'" title="<?php echo $name; ?>" alt="<?php echo $name; ?>">></div></div></div>
<?php } ?>

örnek an itibarıla eklenmiştir.

örnek için teşekkürler fakat açıkçası, tam olarak anlayamadığım için uygulayamadım.
Kendi yaptığım aşamaları anlatayım yanlışlarımı düzeltirseniz sevinirim.
-PageSpeed Insights ile sitemde css sprite ihtiyacı olan resimleri belirledim
-http://spritegen.website-performance.org/ adresinden resimlerin birleştirilmiş halini ve kodlarını aldım.
Ancak bu kodları nereye ne şekilde yazmam gerektiğini çözemedim.

Tahminimce yaptığım çalışmada aşağıdaki kodları stylesheet.css dosyama yapıştırdım. (spritesheet.png birleşmiş resim dosyam)
.sprite { background-image: url(http://www.toptanci41.com/image/spritesheet.png); background-repeat: no-repeat; display: block;}
.sprite-addtocart { width: 86px; height: 22px; background-position: -5px -5px;}
.sprite-facebook { width: 16px; height: 16px; background-position: -174px -5px;}

şimdi resimlerimin olduğu uzantıya;
img src="image/facebook.png" kısmına tam olarak ne yazmam gerekir css'den bu resimi alabilmesi için?
Ya da ben başka bir yerde mi hata yapıyorum yardımcı olabilir misiniz?

@hakan1122 bunu ne amaçlı kullanacaksınız. site logosu olarakmı yoksa buton olarakmı ?

buton, facebook küçük resmi, üst kısma kaydırma resmi, sepete at ve incele butonlarının ve birkaç tane daha küçük resim için kullanmayı düşünüyorum.

(04-30-2015 07:58 PM)hakan1122 Yazılan:  buton, facebook küçük resmi, üst kısma kaydırma resmi, sepete at ve incele butonlarının ve birkaç tane daha küçük resim için kullanmayı düşünüyorum.

geniş bir istek şimdi şöyle izah etmek gerekirse sprite işlemi geniş çaplı bir yelpazesi var ben üstte sadece logo için örnek verdim şöyleki o resimdeki normalder 25 frame varken sprite işlemi ile sanki tek resim miş gibi gösterilmektedir. Sizin istediğiniz olayda da sprite kullanılabilir. ama hepsini tek bir resim içersinden çekmek baya bir karmaşıktır. biraz uğraş ister ben ise bunu etap etap anlatmak isterim sizin için uygunsa ?

çok memnun olurum adım adım açıklarsanız

(05-01-2015 10:20 AM)hakan1122 Yazılan:  çok memnun olurum adım adım açıklarsanız

şuanda her ürüne ücretsiz kargo modifikason dersini hazırlamaktaım son ra bu konua odaklanılacaktır.