Este artigo apresenta 5 propriedades CSS úteis. Você deve estar familiarizado com ele, mas provavelmente raramente o usará. Não estou falando sobre novas propriedades CSS3, estou falando sobre as antigas propriedades CSS2 como clip, min-height, white-space, curosr e display que são amplamente suportadas por todos os navegadores. Portanto, não perca este artigo, pois você pode considerá-los de grande utilidade.
1. Clipe CSS
A propriedade clip é como uma máscara. Ele permite mascarar o conteúdo dos elementos da página usando retângulos. Para recortar um elemento: você deve especificar sua propriedade de posição como absoluta e, em seguida, especificar os valores superior, direito, inferior e esquerdo relativos ao elemento.
.gif)
Exemplo de recorte de imagem ( demonstração )
O exemplo a seguir demonstra como usar a propriedade clip para mascarar uma imagem. Primeiro, especifique o elemento <div> como position:relative, depois especifique o elemento <img> como position:absolute e defina o valor rect de acordo com as necessidades reais.
.gif)
.clip {
posição: relativa;
altura: 130px;
largura: 200px;
borda: sólido 1px #ccc;
}
.clip img {
posição: absoluta;
clipe: rect(30px 165px 100px 30px);
}
Redimensionamento e recorte de imagem ( demonstração )
Neste exemplo, mostrarei como redimensionar e cortar uma imagem. A imagem stock é retangular e quero reduzi-la para 50% de seu tamanho para criar uma miniatura em formato quadrado. Então usei as propriedades de largura e altura para redimensionar a imagem e a propriedade clip para mascará-la. Em seguida, use o atributo left para mover a imagem 15px para a esquerda.
.gif)
.
galeria li {
flutuar: esquerda;
margem: 0 10px 0 0;
posição: relativa;
largura: 70px;
altura: 70px;
borda: sólida 1px #000;
}
.galeria img {
largura: 100px;
altura: 70px;
posição: absoluta;
clipe: rect(0 85px 70px 15px);
esquerda: -15px;
}