|
Sitemde bazı sayfalarda resimlerin üzerine mouse ile
geldiğinizde (ya da siteme mobil cihazlardan
giriyorsanız parmağınızla dokunduğunuzda) bazı
resimlerin büyüdüğünü görmüşsünüzdür.
Örneğin (aşağıdaki resimde olduğu gibi) resmin doğrudan
(sağa / sola kaymadan) büyüyüp genişlediğini (ve
büyürken sağ ve alt kenarlarında gölge oluştuğunu)
gözlerken;
Bazen de -özellikle sitemi mobil cihazlardan takip
ediyorsanız- (aşağıdaki resimde olduğu gibi) resmin
biraz sağa ve aşağı kayarak büyüyüp genişlediğine (ve
büyürken sağ ve alt kenarlarında gölge oluştuğuna)
dikkat etmiş olabilirsiniz:
İşte resimler üzerine uyguladığımız bu efektleri "CSS" (Cascading
Style Sheets / Basamaklı Stil Şablonları ya da Basamaklı
Biçim Sayfaları) ile yapıyoruz.
İsterseniz gelin, bunun nasıl yapıldığını görelim:
Öncelikle (içine CSS kodlarını yazacağımız) CSS uzantılı
dosyamızı oluşturuyoruz. Bunun için Not Defteri'ni (Notepad'i)
açıp (içine henüz bir şey yazmadan) dosyamıza bir isim
verip Not Defteri'nin ".txt" olan uzantısını da "css"
yaparak kaydediyoruz. Genelde CSS uzantılı dosyalara "style"
ismi veriliyor ancak siz istediğiniz ismi verebilirsiniz
elbette. Benim size göstereceğim örnekte ben CSS
uzantılı dosyama "ResimBuyutme" ismini vermeyi tercih
ettim. Sonuçta "ResimBuyutme.css" isimli (ve css
uzantılı) içi boş (içine henüz herhangi bir CSS kodu
yazmadığım) bir dosyam oldu. Bu dosyanın içine
yazacağımız CSS kodlarıyla resimleri büyüteceğimizden
html belgemizin (sayfamızın) içine de bu dosyayı
çağırmamız gerekiyor. Bunun için gerekli olan html
kodumuzu aşağıda veriyorum. Bu kodu html belgemizde
"<head> <head>"
etiketleri (tagleri) arasına yazıyoruz:
|
HTML Kodu |
<link type="text/css"
rel="stylesheet"
href="ResimBuyutme.css"> |
Yukarıdaki kodla "ResimBuyutme.css" isimli CSS kodlarını
yazacağımız dosyayı (ve resimleri büyütmeye yarayacak
olan dosyanın içindeki kodları) html sayfamızın içine
çağırıyoruz. Böylece "ResimBuyutme.css" isimli
dosyamızın içindeki kodlarda hangi değişikliği yaparsak
html sayfamızda etkili olacak. (Tabii, bunun için html
sayfamızla "ResimBuyutme.css" adlı dosyamızın aynı
dizinde (klasörde) olması gerektiğini söylememe gerek
yok sanırım. Eğer "ResimBuyutme.css" adlı dosyamız
farklı bir dizindeyse o zaman "ResimBuyutme.css" isimli
dosyamızın yolunu yukarıdaki html kodlarında ona göre
yazıp, yolunu ona göre belirteceğiz.)
Şimdi de "ResimBuyutme.css" adlı dosyamızın
içine CSS kodlarını yazalım:
|
CSS Kodu |
|
.resimbuyutme:hover
{
-ms-transform: scale(1.5); /* IE
9 */
-webkit-transform: scale(1.5); /*
Safari 3-8 */
transform: scale(1.5);
} |
Yukarıdaki kodları biraz açıklamamız gerekirse;
Öncelikle, CSS dosyamızın içine "resimbuyutme"
isimli bir "class" (sınıf) ekledik. (Siz başka bir isim
de verebilirsiniz.) Resimleri büyüteceğimiz zaman bu
sınıfın içindeki kodlardan yararlanarak resim büyütme
efektlerini vereceğiz. Bu kodlarda yer alan "hover"
özelliği ise, mouse ile resmin üzerine geldiğimizde (ya
da mobil cihazlarda resmin üstüne parmağımızla
dokunduğumuzda) resme verilecek efektlerin tanımını
yapmaya yarıyor. Kodların içinde (köşeli parantezler
içinde en başta) yer alan "-ms-transform: scale(1.5);
/* IE 9 */" ve "-webkit-transform: scale(1.5); /*
Safari 3-8 */" ifadeleri ise CSS kodlarıyla oluşacak
efektlerin farklı web tarayıcılarında doğru
görüntülenmesini sağlayacak.
Bu kodlardaki en önemli ifade ise "transform:
scale(1.5);" ifadesi. "Transform"
özelliği ile resmi istediğimiz boyutta büyütebileceğiz.
Bu yüzden parantez içine istediğiniz bir sayıyı
verebilirsiniz. Parantez içine "1" yazarsanız resmin
boyutu aynı kalacaktır; ama örneğin "1.2" yazarsanız
resim "1.2" boyutunda ya da "2" yazarsanız iki katı
boyutunda büyüyecektir. Ben parantez içine "1.5" yazdım.
Böylece sayfamda bulunan ve büyütmek istediğim resim,
üzerine mouse ile geldiğimizde (ya da mobil cihazlarda
resmin üstüne parmağımızla dokunduğumuzda) "1.5" kat
oranında büyüyecek.
Artık elimizde html belgemizin içine <head><head>
etiketleri arasına yazdığımız ve CSS kodlarını
çağırdığımız bir HTML koduyla, CSS kodlarını yazarak
resim büyütmek için yararlanacağımız özellikleri
tanıttığımız "ResimBuyutme.css" adlı bir CSS dosyamız
var. Ancak bu şekilde html belgemize bir resim
yerleştirdiğimiz zaman sadece bu kodların olması hiçbir
işimize yaramayacak ve resim büyümeyecektir. Resmin
büyümesi (yani CSS kodlarının işe yaraması) için
büyütmek istediğimiz resme de bir "class" (sınıf)
atamamız gerekiyor. Hatırlarsanız yukarıda CSS
dosyamızın içinde "resimbuyutme" isimli bir "class"
tanımlamıştık. İşte büyütmek istediğimiz resme de bu "class"ı
atayacağız. (Bu arada örnek olarak kullanacağım resme "ornekresim"
adını verdim. Bu "ornekresim" adını verdiğim resmi html
belgemize ekledikten sonra resimle ilgili kodları
yazacağız.) Bunun için resmimizin html kodunu şu şekilde
oluşturmamız gerekiyor:
|
HTML Kodu |
<img
class="resimbuyutme"
border="2"
src="ornekresim"
width="400" height="266"> |
Yukarıdaki kodda "img class" etiketiyle "resimbuyutme"
adlı "class"ı resmimize atayarak "border" (kenar
çizgisi) kalınlığını "2" yaptık ve (resmimizin html
belgemizle aynı dizinde olduğunu düşünerek) "src=ornekresim"
yazdık. Resmimizin orijinal (yani normalde html
belgemizde görülen) boyutunu da genişliği (width) "400"
ve yüksekliği (height) "266" olarak ayarladık.
Şimdi isterseniz örnek olarak seçtiğimiz bir resim
üzerinde bu kodların uygulamasını görelim:
Yukarıdaki örnekte de gördüğünüz gibi resmin üstüne
geldiğinizde resim aniden büyüyor. Yani bir yumuşama ya
da yavaş büyüme efekti yok. Bunun için "ResimBuyutme.css"
adlı dosyamızın içine resmin yavaşça büyümesini
sağlayacak bir CSS kodu daha eklememiz gerekiyor. Bu kod
ifadesi "transition-duration: 0.4s;" olup, bunu
eklediğimiz zaman resmimiz bizim belirleyeceğimiz bir
sürede (örnekte 0,4 saniyede) yavaşça büyüyecek. Bu
ifadeyi de eklediğimiz zaman CSS kodlarımızın son hâli
şöyle oluyor:
|
CSS Kodu |
.resimbuyutme:hover
{
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari
3-8 */
transform: scale(1.5);
transition-duration:
0.4s;
} |
Burada "transition-duration" özelliğine "0.4s"
değerini vererek, resmimizin 0,4 saniyede yavaşça
büyümesini sağladık. Hemen örnek resim üzerinde görelim:
Artık kodlarımızı biraz daha geliştirebiliriz. Şimdi de
resmimiz biraz sağa ve aşağı gölgeli olarak ve "blur"
efektiyle büyüsün. Bunun için CSS dosyamıza
ekleyeceğimiz kodlar şunlar:
|
CSS Kodu |
|
.resimbuyutme:hover
{
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari
3-8 */
transform: scale(1.5);
transition-duration: 0.4s;
box-shadow: 8px
8px 8px #888888;
} |
Burada da; "box-shadow" özelliğiyle resmimizin
sağdan 8 piksel, yukarıdan 8 piksel uzakta olacak
şekilde bir gölge oluşturmasını ve gölgenin bulanıklık
değerinin de 8 piksel olmasını istediğimizi belirtmiş
olduk. "#888888"
değeri ise gölgenin olmasını istediğimiz renk değeri.
Siz isterseniz buraya "red", "blue" gibi ana renkleri de
(başında "#" işareti olmadan) yazabilirsiniz. O zaman da
gölgenizin rengi kırmızı, mavi ya da istediğiniz bir ana
renk olacaktır. Hemen örnek üzerinde görelim:
İsterseniz şimdi de, resim gölgeli ve yavaş bir şekilde
büyürken resmin biraz sağa ve aşağı kaymasını
sağlayalım. Bunun için "ResimBuyutme.css" adlı
dosyamızın içine ekleyeceğimiz kodlar şunlar olacak:
|
CSS Kodu |
|
.resimbuyutme:hover
{
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari
3-8 */
transform: scale(1.5)
translate(40px,
40px);
transition-duration: 0.4s;
box-shadow: 8px
8px 8px #888888;
} |
Burada da "translate" özelliğiyle (yukarıdaki
kodlarda görülen örnekte) resmi 80 piksel sağa ve 80
piksel de aşağıya kaydırmış bulunuyoruz. (Buradaki ilk
rakam resmin sağ tarafına, ikinci rakamsa resmin
aşağısına doğru olan uzaklığı gösterir.) Eğer resmi sola
ve / veya yukarı kaydırmak istiyorsanız "-" değerini
kullanabilirsiniz. Yani örneğin "-80px" yazarsanız resim
80 piksel sola doğru gidecektir.
Bu kodları da resmimize uyguladığımız zaman örneğimiz şu
şekilde olacaktır:
Şimdilik benim CSS kodlarıyla resim büyütme
konusunda söyleyeceklerim bu kadar. Siz deneme yanılma yöntemiyle ve sürekli
test ederek bu konudaki başka püf noktalarını
keşfedip daha da geliştirebilirsiniz. Umarım
buraya kadar özet olarak verdiğim bilgiler
işinize yarar.
|
