tr-opencart

     
avatar Şuanki Zaman: 12-19-2024, 01:55 AMHoşgeldin Misafir !
  Şifremi Hatırlat   kayıt ol
opencart temaları

Opencart Sprite Logo Yapımı Yayında

Konuyu görüntüleyenler: 1 Misafir
 
Değerlendir:
  • 0 Oy - 0 Yüzde
  • 1
  • 2
  • 3
  • 4
  • 5
%
Cevapla  Gönder 
v  v
Yazar  e-ticaretdersleri - Görüntüleme - Okunma  3967 - Yorum  7

e-ticaretdersleriv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 3,225
Konular: 520
Katılma Tarihi: Jan 2012
Rep Puanı: 102
Teşekkürler: 1169
1060 Mesajına, 2133 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 03-29-2015 07:06 PM

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 } ?>
e-ticaretdersleri
Alıntı Yaparak Cevapla
Paylaş!
 Teşekkür Edenler: alikral , hakan1122
e-ticaretdersleriv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 3,225
Konular: 520
Katılma Tarihi: Jan 2012
Rep Puanı: 102
Teşekkürler: 1169
1060 Mesajına, 2133 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 03-30-2015 09:28 AM
örnek an itibarıla eklenmiştir.
e-ticaretdersleri
Alıntı Yaparak Cevapla
Paylaş!
hakan1122v
Acemi Üye
**
Üye user avatar
Çevrimdışı

Mesajlar: 13
Konular: 3
Katılma Tarihi: Jul 2014
Rep Puanı: 0
Teşekkürler: 6
1 Mesajına, 1 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 04-30-2015 04:10 PM
ö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?
Alıntı Yaparak Cevapla
Paylaş!
e-ticaretdersleriv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 3,225
Konular: 520
Katılma Tarihi: Jan 2012
Rep Puanı: 102
Teşekkürler: 1169
1060 Mesajına, 2133 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 04-30-2015 07:16 PM
@hakan1122 bunu ne amaçlı kullanacaksınız. site logosu olarakmı yoksa buton olarakmı ?
e-ticaretdersleri
Alıntı Yaparak Cevapla
Paylaş!
hakan1122v
Acemi Üye
**
Üye user avatar
Çevrimdışı

Mesajlar: 13
Konular: 3
Katılma Tarihi: Jul 2014
Rep Puanı: 0
Teşekkürler: 6
1 Mesajına, 1 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 04-30-2015 07:58 PM
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.
Alıntı Yaparak Cevapla
Paylaş!
e-ticaretdersleriv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 3,225
Konular: 520
Katılma Tarihi: Jan 2012
Rep Puanı: 102
Teşekkürler: 1169
1060 Mesajına, 2133 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 04-30-2015 08:11 PM
(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 Smile ş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 ?
e-ticaretdersleri
Alıntı Yaparak Cevapla
Paylaş!
hakan1122v
Acemi Üye
**
Üye user avatar
Çevrimdışı

Mesajlar: 13
Konular: 3
Katılma Tarihi: Jul 2014
Rep Puanı: 0
Teşekkürler: 6
1 Mesajına, 1 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 05-01-2015 10:20 AM
çok memnun olurum adım adım açıklarsanız Smile
Alıntı Yaparak Cevapla
Paylaş!
e-ticaretdersleriv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 3,225
Konular: 520
Katılma Tarihi: Jan 2012
Rep Puanı: 102
Teşekkürler: 1169
1060 Mesajına, 2133 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 05-01-2015 01:57 PM
(05-01-2015 10:20 AM)hakan1122 Yazılan:  çok memnun olurum adım adım açıklarsanız Smile

şuanda her ürüne ücretsiz kargo modifikason dersini hazırlamaktaım son ra bu konua odaklanılacaktır.
e-ticaretdersleri
Alıntı Yaparak Cevapla
Paylaş!
 Teşekkür Edenler: sakaryanotebook

« Önceki | Sonraki »
Cevapla  Gönder 

Opencart Sprite Logo Yapımı Yayında  Konusunun Linki Direk Link
Opencart Sprite Logo Yapımı Yayında  Konusunun HTML Kodu HTML Link
Opencart Sprite Logo Yapımı Yayında  Konusu BBCode Linki BBCode Link
Opencart Sprite Logo Yapımı Yayında  Konusunu Paylaş Sosyal Paylaş

Benzeyen Konular
Konu: Yazar Cevaplar: Gösterim: Son Mesaj
  Opencart 1.5.1 x Ana sayfa modüllerde indirimde ve ücretsiz kargo ikonu göstermek. osdem66 29 30,650 09-06-2021 11:30 PM
Son Mesaj: senerelmas
  Opencart Hızlandırma Kodu %100 Etkili turkojen34 9 14,293 09-02-2021 04:20 AM
Son Mesaj: panama3425
  Opencart seçenekler bölümünde beden tükendi yazısı eticaretplus 3 3,951 12-14-2020 04:05 PM
Son Mesaj: mevlutumuzvar
  Opencart Stoğu biten ürünlerde Sepete Ekle Yerine Stokta yok ikonu göstermek osdem66 26 23,665 04-17-2020 04:39 PM
Son Mesaj: farukcetinkaya
  Opencart ekiket gizleme emir28 1 2,032 12-07-2019 12:57 AM
Son Mesaj: yasin85
  opencart 1.5.6 ürün ekleme oturum kapanma sorunu emir28 1 990 10-25-2019 03:04 AM
Son Mesaj: sembolpc
  [Eklenti] Opencart Arka Plan Resmi Ekle - VQMOD Gökhan TAYLAN 4 4,836 10-18-2019 09:06 AM
Son Mesaj: admintim
  opencart 1.5.6 BitCoin ile ödeme alınabilir mi ? emir28 13 3,574 06-13-2019 02:52 PM
Son Mesaj: Gökhan TAYLAN
  Opencart Tüm sayfalarda Canonical Link oluşturmak osdem66 16 14,175 12-16-2018 01:25 PM
Son Mesaj: jimraynor
  opencart hız sorunu eskikafa 17 16,492 09-04-2018 10:26 AM
Son Mesaj: NeOldu

Opencart Sprite Logo Yapımı Yayında indir, Opencart Sprite Logo Yapımı Yayında Videosu, Opencart Sprite Logo Yapımı Yayında online izle, Opencart Sprite Logo Yapımı Yayında Bedava indir, Opencart Sprite Logo Yapımı Yayında Yükle, Opencart Sprite Logo Yapımı Yayında Hakkında, Opencart Sprite Logo Yapımı Yayında nedir, Opencart Sprite Logo Yapımı Yayında Free indir, Opencart Sprite Logo Yapımı Yayında oyunu, Opencart Sprite Logo Yapımı Yayında download


Forum Atla: