Este artículo presenta 5 propiedades CSS útiles. Deberías estar familiarizado con él, pero probablemente rara vez lo utilices. No estoy hablando de esperar nuevas propiedades CSS3, estoy hablando de las antiguas propiedades CSS2 como clip, min-height, white-space, curosr y display que son ampliamente compatibles con todos los navegadores. Así que no te pierdas este artículo ya que puede que te resulten de gran utilidad.
1. Clip CSS
La propiedad del clip es como una máscara. Le permite enmascarar el contenido de los elementos de la página utilizando rectángulos. Para recortar un elemento: debe especificar su propiedad de posición como absoluta y luego especificar los valores superior, derecho, inferior e izquierdo en relación con el elemento.
.gif)
Ejemplo de recorte de imagen ( demostración )
El siguiente ejemplo demuestra cómo utilizar la propiedad clip para enmascarar una imagen. Primero, especifique el elemento <div> como posición: relativa, luego especifique el elemento <img> como posición: absoluta y establezca el valor rect de acuerdo con las necesidades reales.
.gif)
.clip {
posición: relativa;
altura: 130 píxeles;
ancho: 200px;
borde: sólido 1px #ccc;
}
.clip img {
posición: absoluta;
clip: recto (30px 165px 100px 30px);
}
Cambio de tamaño y recorte de imágenes ( demostración )
En este ejemplo, le mostraré cómo cambiar el tamaño y recortar una imagen. La imagen de archivo es rectangular y quiero cortarla al 50% de su tamaño para crear una miniatura en formato cuadrado. Así que utilicé las propiedades de ancho y alto para cambiar el tamaño de la imagen y la propiedad de clip para enmascararla. Luego use el atributo izquierdo para mover la imagen 15 píxeles hacia la izquierda.
.gif)
.
galería li {
flotador: izquierda;
margen: 0 10px 0 0;
posición: relativa;
ancho: 70px;
altura: 70 píxeles;
borde: sólido 1px #000;
}
.galería img {
ancho: 100px;
altura: 70 píxeles;
posición: absoluta;
clip: rect(0 85px 70px 15px);
izquierda: -15px;
}