Interface do usuário CSS

Interface do usuário CSS

Neste capítulo, você aprenderá os seguintes atributos de interface do usuário CSS:

  • resize
  • outline-offset

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Propriedade Chrome IE Firefox Safari Opera
resize 4.0 Não suportado 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

Ajuste de tamanho CSS

resize A propriedade determina se o elemento deve (e como) ser ajustado pelo usuário.

Este elemento div pode ser ajustado pelo usuário!

Ajuste o tamanho: clique e arraste o canto inferior direito deste elemento div.

Atenção:O Internet Explorer não suporta a propriedade resize.

O exemplo a seguir permite que o usuário ajuste apenas a largura do elemento <div>:

Exemplo

div {
  resize: horizontal;
  overflow: auto;
}

Experimente você mesmo

O exemplo a seguir permite que o usuário ajuste apenas a altura do elemento <div>:

Exemplo

div {
  resize: vertical;
  overflow: auto;
}

Experimente você mesmo

O exemplo a seguir permite que o usuário ajuste a altura e a largura do elemento <div>:

Exemplo

div {
  resize: both;
  overflow: auto;
}

Experimente você mesmo

Em muitos navegadores, <textarea> é ajustável por padrão. Aqui, usamos a propriedade resize para desativar essa escalabilidade:

Exemplo

textarea {
  resize: none;
}

Experimente você mesmo

Deslocamento do Contorno do CSS

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

Este div tem 15px de contorno fora da borda.

Atenção:O contorno é diferente da borda! Diferente da borda, a linha de contorno é desenhada fora da borda do elemento e pode sobrepor outros conteúdos. Além disso, o contorno também não faz parte do tamanho do elemento: a largura e a altura totais do elemento não são afetadas pela largura da linha de contorno.

O exemplo a seguir usa a propriedade outline-offset para adicionar espaço entre a borda e a 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

Propriedades de interface do usuário CSS

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

Propriedade Descrição
outline-offset Adiciona espaço entre a contorno e a borda do elemento.
resize Define se o elemento pode ser ajustado em tamanho pelo usuário.