CSS3 User Interface
CSS3 tem novos recursos de interface do usuário, como elementos de redimensionamento, esboços, e dimensionamento de caixa.
Neste capítulo, você vai aprender sobre as seguintes propriedades da interface do usuário:
-
resize -
outline-offset
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| resize | 4.0 | Não suportado | 5.0 4.0 -moz- | 4.0 | 15.0 |
| outline-offset | 4.0 | Não suportado | 5.0 4.0 -moz- | 4.0 | 9.5 |
CSS3 redimensionamento
O resize propriedade especifica se ou não um elemento deve ser redimensionáveis pelo usuário.
O exemplo a seguir permite que o usuário redimensionar apenas a largura de um <div> elemento:
O exemplo a seguir permite que o usuário redimensionar somente a altura de um <div> elemento:
O exemplo a seguir permite que o usuário redimensionar a altura ea largura de um <div> elemento:
CSS3 Contorno offset
O outline-offset propriedade adiciona espaço entre um esboço e da borda ou margem de um elemento.
Contornos diferem das fronteiras de três maneiras:
- Um esboço é uma linha traçada em torno de elementos, fora da margem de fronteira
- Um esboço não ocupam espaço
- Um esquema pode ser não-rectangular
O exemplo a seguir usa a propriedade offset esboço para adicionar um espaço 15px entre a fronteira eo contorno:
Exemplo
div
{
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Tente você mesmo " Propriedades da Interface de Usuário CSS3
A tabela a seguir lista todas as propriedades da interface do usuário:
| Propriedade | Descrição |
|---|---|
| box-sizing | Permite incluir o preenchimento e borda na largura total da um elemento e altura |
| nav-down | Especifica onde a navegação quando se utiliza a tecla de navegação de seta para baixo |
| nav-index | Especifica a ordem de tabulação para um elemento |
| nav-left | Especifica onde a navegação quando se utiliza a tecla de navegação seta-esquerda |
| nav-right | Especifica onde a navegação quando se utiliza a tecla de navegação seta para a direita |
| nav-up | Especifica onde a navegação quando se utiliza a tecla de navegação seta-up |
| outline-offset | Adiciona espaço entre um esboço e da borda ou margem de um elemento |
| resize | Especifica se um elemento é redimensionáveis pelo usuário |