Me he encontrado un excelente artículo con el que nos es posible cortar nuestras imagenes mediante CSS, para ello usamos la propiedad clip.
Propiedad Clip
La propiedad clip es la propiedad que nos permite hacer un recorte sobre un elemento visible. Para ello debemos definir la posición de los 4 puntos que componen el cuadrado que será visible al usuario.
clip: rect(5px, 40px, 45px, 5px)
clip: rect(arriba, derecha, abajo, izquierda)
Pese a que el atributo parece que está preparado para usar circulos u otras formas, únicamente nos es posible el uso de rect como forma permitida… quizas en futuras versiones podamos hacer uso de otras formas en nuestros recortes. Dentro de la forma indicaremos las posiciones en relación al tamaño del elemento original.
En este ejemplo vemos que nos crea un rectangulo que se encontrará a 5px de arriba, 40 de la derecha, 45 de abajo y 5 de la izquierda.
Código de ejemplo
//HTML
<div class="shade1">
<div class="shade2">
<div class="shade3">
<div class="clipout">
<div class="clipin">
<img src="castle.jpg" />
</div>
</div>
</div>
</div>
</div>
//CSS
.clipout{
position:relative;
width:136px;
height:105px;
top:-1px;
left:-1px;
}
.clipin{
position:absolute;
clip:rect(50px 218px 155px 82px);
top:-50px;
left:-82px;
}
.shade1{
width:136px;
height:105px;
background-color:#e8e8e8;
}
.shade2{
position:relative;
width:136px;
height:105px;
background-color:#cbcbcb;
top:-2px;
left:-2px;
}
.shade3{
position:relative;
width:136px;
height:105px;
background-color:#a0a0a0;
top:-1px;
left:-1px;
}
6 comentarios, 3 referencias
+
#