Gorsel Sonuc Ozellikleri
Görsel Sonuç Özellikleri1) Overflow (Taşma) Özelliği
Türkçeye taşmak olarak çevirdiğimiz bu özellik, sınırlarını belirlediğimiz kutu elemanının içeriğinin sınırlarını aşması durumunda nasıl davranacağını bildiren bir özelliktir. Özelliğin başlangıç değeri visible'dır. Yani kutu elemanı dışına taşan alanları göster demektir.
Aldığı değerler ise aşağıda sıralanmıştır.
* visible: kutu sınırları dışına taşan alanları göster.
* hidden: kutu sınırları dışına taşan alanları gizle.
* scroll: kutu sınırları dışına taşan alanlara kaydırma çubuğu ile ulaşmamızı sağlar.
* auto: kutu sınırlarını aşması durumunda scroll ile aynı etkiyi yapar. Ancak scroll kullanıldığında taşma olmasa bile kaydırma çubukları gözükürken auto değeri ile sadece taşma olduğunda ve taşma hangi eksende ise sadece o eksenin kaydırma çubuğu gözükür.
2) Clip (Kırpma) Özelliği
Clip özelliği, elemanın içeriğinin belli bir bölümünün gösterilmesini sağlar. Başlangıç değeri auto'dur. Yani herhangi bir kırpma yoktur.
W3C standartlarına göre konumlandırmalar arasında virgül olmalı... Ancak ne varki virgül konulduğunda ie yarayıcısı standart modda farklı yorumlayacaktır.. Bu yüzden tarayıcılar arası uyumu sağlamak açısından bu özelliğimizi kullanırken konumlandırmalar arası virgül koymamak en iyisi
Bu özelliği kullanabilmemiz için position özelliğini belirlememez gerekli.. Yani örnek kullanımını verecek olursak;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr">
<head>
<title> CSSDERSLERi.NET </title>
<style type="text/css">
.deneme {clip: rect(50px 400px 300px 300px); position: absolute}
</style>
</head>
<body>
<img src="ben-ve-annem.jpg" alt="" />
<div class="deneme">
<img src="ben-ve-annem.jpg" alt="" />
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr">
<head>
<title> CSSDERSLERi.NET </title>
<style type="text/css">
.deneme {clip: rect(50px 400px 300px 300px); position: absolute}
</style>
</head>
<body>
<img src="ben-ve-annem.jpg" alt="" />
<div class="deneme">
<img src="ben-ve-annem.jpg" alt="" />
</div>
</body>
</html>
Yukarıdaki örnekte bir resmim var ve ilk olarak direk çağırmışım.. Birde sınıf seçicimin içinde çağırmışım resmimi. Daha sonra CSS kısmında sınıf seçicime position: absolute; özelliğini verişim ve daha sonra clip özelliğini uygulamışım.. Henüz görmedim position özelliğimizi ancak bu özellikte bunu kullanmamız gerektiğinide söylemeden geçemem
clip: rect(50px 400px 300px 300px)
Sırası yine saat yönündedir. Üst - Sağ - Alt - Sol şeklindedir.. Birbirleriyle orantılı olarak büyüyüp küçülmeli değerler.. Videodada göreceksiniz zaten ne olduğunu.. Yani orantılamanın
Şahsım adına bu çok kullandığım bir özellik değil ancak java ile görsel birşeyler çıkarılabilir ortaya.. (Bkz: facebook'da profil resmi seçtiğimizde örneğin kırpma yapıyoruz 
3) Visibility (Görünürlük) Özelliği
Bu özellik nesnelerin görünümünü belirler. Aldığı değer visible ise eleman görünür, hidden ise eleman görünmez.
Eğer bir elemanın görünürlük değeri hiddenolarak atanmış ise, elemanın sayfadaki yeri korunur ancak eleman içindekiler gözükmez.
Örnek vermeyeceğim bu özellikle ilgili. Videoyu izlerseniz eminim anlayacaksınız
