Konular

Tek Parça Resim Dosyasından İlgili Resmi Ekrana Çıkartma


Web sayfalarının belki de olmazsa olmaz elemanlarından biridir resimler. Aynı zamanda sitenin açılışında da açılışı yavaşlatması da ayrı bir konu tabi. Ama hem resimlerle çalışıp hem de sitenizin yavaş açılmasını engellemek istiyorsanız şimdi anlatacağım yöntem işinize yarayabilir.

Yalnız bu yöntemi sayfamızda sabit bulunan resimlerimiz için uygulayabiliriz. Örnek olarak sitelerdeki menülerin yanında yer alan resimleri verebiliriz. Lafı fazla uzatmadan uygulamaya geçelim öncelikle işimize yarayacak bir resim bulalım.

Başlıksız İçerik______________________

Ben yukarıdaki resmi uygulamamda kullanmak üzere seçtim. Daha sonra Dreamweaver uygulamasında kod görünümüne geçiyoruz ve aşağıdaki kodları yazıyoruz.

<div style=" float:left; background-image:url(fal_.gif);width:40px; height:40px;background-repeat:no-repeat; background-position:0px -5px"></div>
 

Bu kodları yazdığımızda karşımızda aşağıdaki gibi bir sonuç görüyoruz:

 Başlıksız İçerik______________________

Şimdi bu kodların ne işe yaradığını açıklayalım. Buradaki kodlar Html kodları içerisine gömülmüş Css kodlarıdır. Yukarıdaki kodumuzda ilk olarak bir <div> etiketi açtık ve div etiketine css kodu yazmak üzere style ı açtık ve daha sonra ‘style’ içerisine ‘background-image’ eşitine resmimizin adresini yazıyor. Daha sonra ‘width’ seçeneğinde div etiketinin genişliği ve ‘height’ seçeneğinde de yükseklik değeri belirtilir. ‘Background-repeat:no-repeat’ dizimi ise css koduyla getirilen resmin tekrarlama yapmamasını sağlıyor. Son olarak bu konu içerisinde vurgusunu yapmak istediğimiz kısma geliyoruz. ‘background-position’ seçeneği resimde hangi bölgenin gösterileceğini belirttiğimiz yerdir. Burada seçeneğe karşılık x ve y koordinatları verilir ve daha sonra bu verilen koordinatlardaki resmin bölümü belirtilen boyutta ekrana yüklenir.

Uzun lafın kısası:

Burada yaptığımız işlem her zaman sabit duran resmimizi arka plan resmiymiş gibi istediğimiz bölümü Css koduyla çağırdık böylece resimlerin yüklenmesinde yaşanan sorunun önüne geçmiş olduk. Çünkü bu yöntem kullanılmadan 12 resim dosyasıyla yapılacak işlemi tek bir dosyayı bölerek ekrana getirerek gerçekleştirdik.


Kaynak: Barış Dayar
Yorumunuzu Ekleyin

Div ile Bölümler Oluşturmak

Div tagı yardımı ile sayfalı %40 ve %60 şeklinde ikiye bölüp içerisine iki farklı içerik yerleştirme ile ilgili bir çalışma

73,721 Okunma 2 Yorum 04/11/2008 16:41:55 31/05/2014 16:44:34

CSS ile Menü Yapımı

CSS'in menü yapımına etkileri

53,161 Okunma 1 Yorum 13/07/2007 17:53:23 28/12/2018 21:20:47

CSS ile Dikey Menü Yapımı

Web sitelerinin vazgeçilmez öğelerinde biridir menüler. Menüler kullanıcının oluşturduğumuz sayfalara hızlı erişimini sağlar. Bir çok site de Ürünler, İletişim, Hakkımızda vb. bölümlerini menü öğesi olarak görürüz. Bu makalede sırasız listeler()ve CSS yardımı ile menü yapımını anlatacağız. CSS ile yapılan menüler esnek, kolay düzenlenebilir, güzel görünen ve rollover efekti uygulana bilen menülerdir

29,432 Okunma Henüz yorum yapılmamış 01/08/2007 13:27:12

Renkli Form Yapımı

CSS yardımı ile renkli form kutucuklarının nasıl yapıldığına bir örnek

23,600 Okunma Henüz yorum yapılmamış 10/07/2007 03:35:08

CSS ve Clip

20,093 Okunma Henüz yorum yapılmamış 13/07/2007 20:15:21 28/05/2014 20:18:55

CSS ve Tablolar

19,566 Okunma Henüz yorum yapılmamış 13/07/2007 14:44:46

CSS ve Overflow

16,759 Okunma Henüz yorum yapılmamış 13/07/2007 14:42:26

CSS Animasyon Örnekleri

Bir kaç faydalı cssle yapılan animasyon örneği...

1,394 Okunma Henüz yorum yapılmamış 27/06/2019 10:59:51 27/06/2019 11:21:00

Yükleniyor...