tr-opencart

     
avatar Şuanki Zaman: 11-16-2018, 08:17 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  2457 - Yorum  7

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

Mesajlar: 3,220
Konular: 515
Katılma Tarihi: Jan 2012
Rep Puanı: 100
Teşekkürler: 1166
1045 Mesajına, 2101 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,220
Konular: 515
Katılma Tarihi: Jan 2012
Rep Puanı: 100
Teşekkürler: 1166
1045 Mesajına, 2101 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,220
Konular: 515
Katılma Tarihi: Jan 2012
Rep Puanı: 100
Teşekkürler: 1166
1045 Mesajına, 2101 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,220
Konular: 515
Katılma Tarihi: Jan 2012
Rep Puanı: 100
Teşekkürler: 1166
1045 Mesajına, 2101 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,220
Konular: 515
Katılma Tarihi: Jan 2012
Rep Puanı: 100
Teşekkürler: 1166
1045 Mesajına, 2101 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 ekiket gizleme emir28 0 140 10-09-2018 07:14 PM
Son Mesaj: emir28
  opencart hız sorunu eskikafa 17 12,058 09-04-2018 10:26 AM
Son Mesaj: NeOldu
  Opencart 1.5.1 döviz kuru güncelleme sorunu dostx 1 156 07-21-2018 02:59 PM
Son Mesaj: dostx
  [Modifikasyon] OpenCart Site Hızlandırma byduman 22 15,032 05-04-2018 04:27 PM
Son Mesaj: DARKNES6565
  Opencart 1.5.x versiyonda Kategori Sayfasında Alt Kategorileri Resimli Yapma osdem66 62 24,254 12-15-2017 10:01 PM
Son Mesaj: FLStudio
  Opencart Stoğu biten ürünlerde Sepete Ekle Yerine Stokta yok ikonu göstermek osdem66 25 14,134 12-15-2017 05:24 PM
Son Mesaj: berkulucy
  Opencart Sizin İçin Seçtiklerimiz Modülü için indirim oranını gösterme problemi berkulucy 2 1,473 10-18-2017 11:30 AM
Son Mesaj: berkulucy
  Opencart 1.5.x Çözülemeyen Yetkilendirme Hatası qene 2 775 10-12-2017 09:51 AM
Son Mesaj: qene
  Opencart seçenekler bölümünde beden tükendi yazısı eticaretplus 2 2,209 07-31-2017 12:23 PM
Son Mesaj: eticaretplus
  Opencart Site Tasıma Sonunda Hata Aldım erkanarslan 1 749 07-17-2017 06:37 AM
Son Mesaj: fbajans

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: