css sprite nasıl yapılır? |
7 Mesajlar | 5.660 Okunma | ||
- Üyelik 24.10.2012
- Yaş/Cinsiyet 46 / E
- Meslek wp kurulum
- Konum İstanbul Avrupa
- Ad Soyad S** D**
- Mesajlar 129
- Beğeniler 0 / 1
- Ticaret 3, (%100)
css sprite nasıl yapılır,basit anlatım gerekiyor.
- Üyelik 18.11.2011
- Yaş/Cinsiyet 35 / E
- Meslek Web Developer
- Konum İstanbul Avrupa
- Ad Soyad B** Ç**
- Mesajlar 3270
- Beğeniler 1014 / 1983
- Ticaret 53, (%100)
Hocam şöyle basit bir açıklama yapayım. Aşağıdaki linkteki sitey girin oradan örnek vereceğim. Slider altındaki tuşlar sprite tekniği ile resimleri alıyor.
http://demo.eccetasarim.com/ecceblog
Sprite tekniği resimlerin bir bütün halde alındığı ve bu resimin belli parçalarının kullanılmasını sağlar.
Bu resimden aşağıdaki css kodları ile x ekseninde aşağıdan -37px ile başlayan resmi getiriyor. Belli yükseklik değerleri ile de resmin diğer bölgelerinin çıkmasını engelliyoruz.
.gecistus li:hover {
background: url(../images/element3.png) 0 -37px no-repeat;
float: left;
width: 16px;
height: 16px;
margin-right: 5px;
cursor: pointer;
}
Umarım anlatabilmişimdir.
http://demo.eccetasarim.com/ecceblog
Sprite tekniği resimlerin bir bütün halde alındığı ve bu resimin belli parçalarının kullanılmasını sağlar.
Bu resimden aşağıdaki css kodları ile x ekseninde aşağıdan -37px ile başlayan resmi getiriyor. Belli yükseklik değerleri ile de resmin diğer bölgelerinin çıkmasını engelliyoruz.
.gecistus li:hover {
background: url(../images/element3.png) 0 -37px no-repeat;
float: left;
width: 16px;
height: 16px;
margin-right: 5px;
cursor: pointer;
}
Umarım anlatabilmişimdir.
- Üyelik 21.12.2011
- Yaş/Cinsiyet 32 / E
- Meslek PHP Coder
- Konum Hatay
- Ad Soyad ** **
- Mesajlar 101
- Beğeniler 27 / 14
- Ticaret 1, (%100)
Hocam şöyle basit bir açıklama yapayım. Aşağıdaki linkteki sitey girin oradan örnek vereceğim. Slider altındaki tuşlar sprite tekniği ile resimleri alıyor.
http://demo.eccetasarim.com/ecceblog
Sprite tekniği resimlerin bir bütün halde alındığı ve bu resimin belli parçalarının kullanılmasını sağlar.
Bu resimden aşağıdaki css kodları ile x ekseninde aşağıdan -37px ile başlayan resmi getiriyor. Belli yükseklik değerleri ile de resmin diğer bölgelerinin çıkmasını engelliyoruz.
.gecistus li:hover {
background: url(../images/element3.png) 0 -37px no-repeat;
float: left;
width: 16px;
height: 16px;
margin-right: 5px;
cursor: pointer;
}
Umarım anlatabilmişimdir.
http://demo.eccetasarim.com/ecceblog
Sprite tekniği resimlerin bir bütün halde alındığı ve bu resimin belli parçalarının kullanılmasını sağlar.
Bu resimden aşağıdaki css kodları ile x ekseninde aşağıdan -37px ile başlayan resmi getiriyor. Belli yükseklik değerleri ile de resmin diğer bölgelerinin çıkmasını engelliyoruz.
.gecistus li:hover {
background: url(../images/element3.png) 0 -37px no-repeat;
float: left;
width: 16px;
height: 16px;
margin-right: 5px;
cursor: pointer;
}
Umarım anlatabilmişimdir.
Merhaba
Çogunu Çözüm Ama Bir Tek -37px Oldugunu Nasıl Hesaplanıyor Onu Anlamadım :)
- Üyelik 18.11.2011
- Yaş/Cinsiyet 35 / E
- Meslek Web Developer
- Konum İstanbul Avrupa
- Ad Soyad B** Ç**
- Mesajlar 3270
- Beğeniler 1014 / 1983
- Ticaret 53, (%100)
Merhaba
Çogunu Çözüm Ama Bir Tek -37px Oldugunu Nasıl Hesaplanıyor Onu Anlamadım :)
Çogunu Çözüm Ama Bir Tek -37px Oldugunu Nasıl Hesaplanıyor Onu Anlamadım :)
Kodları yerleştirdikten sonra firebug yada chrome da ögeyi denetle deyip deneme yanılma yolu ile de yapabilirsiniz. Yada bu siteden resimleri birleştirip kodları alabilirsiniz.
- Üyelik 21.12.2011
- Yaş/Cinsiyet 32 / E
- Meslek PHP Coder
- Konum Hatay
- Ad Soyad ** **
- Mesajlar 101
- Beğeniler 27 / 14
- Ticaret 1, (%100)
Kodları yerleştirdikten sonra firebug yada chrome da ögeyi denetle deyip deneme yanılma yolu ile de yapabilirsiniz. Yada bu siteden resimleri birleştirip kodları alabilirsiniz.
Teşekkür Ederim
- Üyelik 04.04.2012
- Yaş/Cinsiyet 36 / E
- Meslek Grafik tasarım
- Konum İstanbul Avrupa
- Ad Soyad ** **
- Mesajlar 1285
- Beğeniler 452 / 308
- Ticaret 0, (%0)
[M]http://vimeo.com/40863088[/M]
www.mujdatsayar.com
- Üyelik 16.03.2017
- Yaş/Cinsiyet 33 / E
- Meslek Blogger
- Konum İstanbul Avrupa
- Ad Soyad Ü** B**
- Mesajlar 238
- Beğeniler 155 / 55
- Ticaret 0, (%0)
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)