RESİMLER
CSS İÇİNDE RESİMLERİN BOYUTLARINI KONTROL ETME
width
height
CSS içinde width (genişlik) ve height (yükseklik) özelliklerini kullanarak bir resmin boyutlarını,herhangi bir kutuda yapıldığı gibi rahatlıkla kontrol edebibilirsiniz.
HTML içinde <img> ögesinin bulunduğu yerlerde width ve height öz niteliklerini kullanmak yerine class özelliği için bu isimleri kullanabilirsiniz.
width150px;
width:300px;
RESİMLERİ CSS KULLANARAK HİZALAMA
float
Son bölümde bahsedilen float (serbest dolaşım) özelliğinin,bir elemanı,kendisini içeren kutu içerisindeki metnin eleman etrafında akmasına müsaade ederek sağa ve sola hareket ettirmek için kullanılır.
float:right;
float:left;
CSS KULLANARAK RESİMLERİ SAYFANIN ORTASINA YERLEŞTİRMEK
display:block;
margin:0px auto;
Varsayılan olarak,resimler satır içi elemanlardır. Bunun anlamı,resimlerin etrafındaki metinle birlikte hareket etmeleridir.Bir resmi ortaya yerleştirmek için display özelliğini block değeri kullanımı ile resmin blok seviyesi elemanına dönüştürülmesi gerekir.
display:block; , margin:0px auto;
ARKA PLAN RESİMLERİ
background-image
background-image özelliği bir resmi HTML elemanının arkasına yerleştirmenize olanak sağlar. Bu , tüm sayfa olabileceği gibi sayfanın bir kısmıda olabilir. Aksi belirtmedikçe arka plan resmi tekrarlayarak kutuyu doldurucaktır :)
background-image
TEKRARLAYAN RESİMLER
background-repeat
background-attachment
background-repeat özelliği 4 değer alabilir:
repeat : Arka plan resmi hem yatay hem düşey olarak tekrarlanır.
repeat
repeat-x : Arka plan resmi yalnızca yatay olarak tekrarlanır.
repeat-x
repeat-y : Arka plan resmi yalnızca düşey olarak tekrarlanır
repeat-y
no-repeat : Arka plan resmi yalnızca bir kez gösterilir. (tekrarlanmaz)
no-repeat
background-attachment özelliği kullanıcı sayfada aşağı yukarı gezindikçe resmin sabit pozisyonda mı duracağı , yoksa hareket mi edeceğini belirlemeye yarar. İki değer alabilir:
fixed: Arka plan resmi sayfa aynı pozisyonda durur.
background-attachment:fixed;
scroll: Arka plan resmi kullanıcı sayfada aşağı yukarı gezindikçe hareket eder.
background-attachment:scroll;
ARKA PLAN POZİSYONU
background-position
Bir resim tekrarlanmadığı vakit background-position özelliğini kullanarak tarayıcının resmi nereye yerleştireceğini belirleyebiliriz :)
background-position:
background-position: 50% 50%;
KISAYOL
background
background özelliği, şu ana kadar görmüş olduğunuz diğer tüm arka plan özelliklerini kısayol gibi davranır.
1: background-color
2: background-image
3: background-repeat
4: background-attachment
5: background-position
yukarıdaki sırayla belirlenmelidir,fakat kullanmak istemediğiniz bazı özellikler var ise onları atlayabilirsiniz.
background
DÖNEN RESİMLER & TAYFLAR
CSS kullanarak kullanıcı faresini üzerine getirdiğinde ikince stile ( bu olay rollover olarak bilinir,yani stil değiştiren, dönüşen) ve fare ile tıkladığında ise üçüncü stile dönüşe bir bağantı veya buton oluşturabilirsiniz.
Bu,bağlantıya veya (normalde üç stile sahip ama yer eksikliğinde her seferinde ancak birini gösterebilen) bir butona arka plan resmi ekleyerek gerçekleştirebilirsiniz.
CSS3: GRADYANLAR
background-image
CSS3 aynı zamanda bir kutunun arka planı için gradanı belirleme olanağı tanıyan özellik eklemiştir.
background-image: -webkit-linear-gradient (#336666,#66cccc);
background-image: linear-gradient();
ARKA PLAN RESİMLERİNİN KONTRASTI
Eğer bir resmin üzerine bir metin yerleştirmek isterseniz metnin okunabilmesi için resim daha düşük kontrasta sahip olmalıdır.
filter:contrast();
YÜKSEK KONTRAST
DÜŞÜK KONTRAST
→ CSS kullanarak resimlerin boyutlarını belirleyebilirsiniz. Web sitenizin birçok sayfasında aynı ebatlarda resimleri kullandığınızda bu çok yararlı olucaktır.
→ CSS kullanarak resimler yatay ve düşey olarak hizalanabilir.
→ Bir sayfada herhangi bir eleman tarafından oluşturulan bir kutu arkasında arka plan resmi kullanabiliriz.
→ Arka plan resimleri yalnızca tek bir kez görünebilir ya da bir kutunun (div gibi ) arkasını kaplayarak tekrarlayabilir. (background-repeat)
→ Bir resmin arka plan pozisyonunu hareket ettirerek dönüşen (değişen) resim efekti oluşturabiliriz.
→ Tarayıcının indirmek durumunda olduğu resim sayısını azaltmak için resim tayfları (sprite) oluşturabilirsiniz.
ZİYARET İÇİN TEŞEKKÜRLER ❤
© NISANCI SOFTWARE 2022.