CSS Kullanıcı Arayüzü

Bu bölümde aşağıdaki CSS kullanıcı arayüzü özellikleri hakkında bilgi edineceksiniz:

resize
outline-offset

Tarayıcı Desteği

Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Property
resize	4.0	79.0	5.0	4.0	15.0
outline-offset	4.0	15.0	5.0	4.0	9.5

CSS Yeniden Boyutlandırma

Özellik , resizebir öğenin kullanıcı tarafından yeniden boyutlandırılıp boyutlandırılamayacağını (ve nasıl) belirtir.

Bu div öğesi kullanıcı tarafından yeniden boyutlandırılabilir!

Yeniden boyutlandırmak için: Bu div öğesinin sağ alt köşesine tıklayın ve sürükleyin.

Aşağıdaki örnek, kullanıcının yalnızca bir <div> öğesinin genişliğini yeniden boyutlandırmasına izin verir:

Örnek

div {
resize: horizontal;
overflow: auto;
}

Aşağıdaki örnek, kullanıcının yalnızca bir <div> öğesinin yüksekliğini yeniden boyutlandırmasına izin verir:

Örnek

div {
resize: vertical;
overflow: auto;
}

Aşağıdaki örnek, kullanıcının bir <div> öğesinin hem yüksekliğini hem de genişliğini yeniden boyutlandırmasını sağlar:

Örnek

div {
resize: both;
overflow: auto;
}

Birçok tarayıcıda, <textarea> varsayılan olarak yeniden boyutlandırılabilir. Burada, yeniden boyutlandırılabilirliği devre dışı bırakmak için yeniden boyutlandırma özelliğini kullandık:

Örnek

textarea {
resize: none;
}

CSS Anahat Ofseti

Özellik outline-offset, bir anahat ile bir öğenin kenarı veya sınırı arasına boşluk ekler.

Bu div, kenarlık kenarının dışında 15 piksellik bir anahat içerir.

Not: Anahat sınırlardan farklıdır! Kenarlığın aksine, anahat öğenin sınırının dışına çizilir ve diğer içerikle çakışabilir. Ayrıca ana hat, öğenin boyutlarının bir parçası DEĞİLDİR; öğenin toplam genişliği ve yüksekliği, anahattın genişliğinden etkilenmez.

Aşağıdaki örnek outline-offset, kenarlık ve anahat arasına boşluk eklemek için özelliği kullanır:

Örnek

div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}