Interface de usuário CSS

Índice

Interface de usuário CSS

Neste capítulo, você aprenderá sobre as seguintes propriedades da interface do usuário CSS:

resize
outline-offset

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.

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

Redimensionamento CSS

A propriedade resize especifica se (e como) um elemento deve ser redimensionável pelo usuário.

This div element is resizable by the user!

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

O exemplo a seguir permite que o usuário redimensione apenas a largura de um elemento <div>:

Exemplo

div
{
   
resize: horizontal;
   
overflow: auto;
}

Experimente você mesmo →

<!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>

O exemplo a seguir permite que o usuário redimensione apenas a altura de um elemento <div>:

Exemplo

div
{
   
resize: vertical;
  overflow: auto;
}

Experimente você mesmo →

<!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>

O exemplo a seguir permite ao usuário redimensionar a altura e a largura de um elemento <div>:

Exemplo

div
{
   
resize: both;
   
overflow: auto;
}

Experimente você mesmo →

<!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>

Em muitos navegadores, <textarea> é redimensionável por padrão. Aqui, usamos a propriedade resize para desabilitar a capacidade de redimensionamento:

Exemplo

textarea {
  resize: none;
}

Experimente você mesmo →

<!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>

Deslocamento de contorno CSS

A propriedade outline-offset adiciona espaço entre um contorno e a borda ou borda de um elemento.

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

Nota: O contorno difere das bordas! Ao contrário da borda, o contorno é desenhado fora da borda do elemento e pode se sobrepor a outro conteúdo. Além disso, o esboço é NÃO faz parte das dimensões do elemento; a largura e altura total do elemento não é afetado pela largura do contorno.

O exemplo a seguir usa a propriedade outline-offset para adicionar espaço entre a borda e o contorno:

Exemplo

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

Experimente você mesmo →

<!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>

Propriedades da interface do usuário CSS

A tabela a seguir lista todas as propriedades da interface do usuário:

outline-offset: Adiciona espaço entre um contorno e a borda ou borda de um elemento
resize: Especifica se um elemento pode ou não ser redimensionado pelo usuário