Contenido

Usa CSS para cortar imagenes

15 may

+ 9

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

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

Ejemplo de clip con sombra


//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;
}
  • La verdad es que parece una buena idea, pero al tener que cargar la imagen entera no sería mejor subir ya una imagen de menor tamaño recortada?

  • #1 Efectivamente, siempre la mejor solución es usar dos imagenes. Por muchas veces que requieras la imagen siempre serán más veces las que se verá la pequeña, y eso hay que tenerlo en cuenta.

    Saludos

  • muy util, eso deja muuuuuy atras a lo que llamaban “mapear imagenes” (de mapas, regiones o zonas de la imagen)

    Saludos ;)

  • Inspirado en este hack de CSS cree un concepto para recorrer una imagen dentro usando la propiedad clip, aqui pueden ver un ejemplo que he hecho. Saludos

    http://benoror.googlepages.com/pruebasajax

  • Excelente tu prueba benn, deja abierto el camino a muchas ideas. Una sola corrección, esto NO es un hack de css, es simplemente otra característica del mismo. Saludos.

  • Oye quiero aplicar tu ejemplo a lo siguiente me encantaria poder decirle que me haga un rectangulo en la posicion que deseo pero que atras pueda ver la imagen original traslucida, es decir que la parte que se haga con “clip: rect(arriba, derecha, abajo, izquierda)” sea la que sobresale pero quiero ver la imagen traslucida para ver donde esta posicionado el rectangulo en la imagen original no se si me doy a entender?.

    Lo que busco es de una imagen original poder enmarcar una seccion y que esta se vea sobresaliente y la demas imagen se vea traslucida…

    Espero puedas ayudarme….

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.