CSS Kullanıcı Arayüzü

İçindekiler

CSS Kullanıcı Arayüzü

Bu bölümde aşağıdaki CSS kullanıcı arayüzü özelliklerini öğreneceksiniz:

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

resize özelliği, bir öğenin kullanıcı tarafından yeniden boyutlandırılıp yeniden boyutlandırılamayacağını (ve nasıl) belirtir.

This div element is resizable by the user!

To resize: Click and drag the bottom right corner of this div element.

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

Örnek

div
{
   
resize: horizontal;
   
overflow: auto;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: horizontal;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>

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

Örnek

div
{
   
resize: vertical;
  overflow: auto;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: vertical;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the height of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>

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

Örnek

div
{
   
resize: both;
   
overflow: auto;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize both the height and the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>

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 resize özelliğini kullandık:

Örnek

textarea {
  resize: none;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
textarea#test {
   resize: none;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<p>In many browsers, textarea elements are resizable by default. In this example, we have used the resize property to disable the resizability:</p>

&lt;textarea id="test">Textarea - Not resizable&lt;/textarea>
<br><br>

&lt;textarea>Textarea - Resizable (default)&lt;/textarea>

</body>
</html>

CSS Anahat Uzaklığı

outline-offset özelliği, bir anahat ile bir öğenin kenarı veya kenarlığı arasına boşluk ekler.

This div has an outline 15px outside the border edge.

Not: Ana hat kenarlıklardan farklıdır! Kenarlığın aksine, ana hat öğenin sınırının dışına çizilir ve diğer içerikle örtüşebilir. Ayrıca ana hatları şu şekildedir Elemanın boyutlarının bir parçası DEĞİLDİR; elemanın toplam genişliği ve yüksekliği anahattın genişliğinden etkilenmez.

Aşağıdaki örnekte, alan eklemek için outline-offset özelliği kullanılmaktadır sınır ve ana hat arasında:

Ö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;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
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;
} 
</style>
</head>
<body>
<h1>The outline-offset Property</h1>

<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>

<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>

</body>
</html>

CSS Kullanıcı Arayüzü Özellikleri

Aşağıdaki tabloda tüm kullanıcı arayüzü özellikleri listelenmektedir:

outline-offset: Bir ana hat ile bir öğenin kenarı veya kenarlığı arasına boşluk ekler
resize: Bir öğenin kullanıcı tarafından yeniden boyutlandırılıp boyutlandırılamayacağını belirtir