Alen Grakalic publica en CSSGlobe un artículo sobre 3 formas de hacer crop con CSS. Un interesante artículo que muestra las capacidades del lenguaje y de los diferentes caminos de los que disponemos para conseguir lo mismo.
¿Que es crop?
Llamamos crop al recorte selectivo de una imagen. Este recorte no afecta ni al ancho ni al alto de la imagen, y únicamente se encargar de mostrar nuestra selección al usuario.
Como vemos en la imagen, sacada de la Wikipedia, esta técnica la usamos cada día al ver la televisión, ya que para no perder el ratio de la imagen y así no deformar los objetos que visualizamos se realiza un crop adaptando la imagen sin perder la relación de aspecto de la imagen.
Técnica 1: Márgenes negativo
Esta primera técnica, basada en el uso de márgenes negativos simula el efecto crop sobre la imagen, haciendo que la imagen se oculte sobre una capa superior.
// HTML
<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p>
// CSS
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* IMPORTANTE */
border:1px solid #ccc;
}
/* Indicamos los márgenes que dejamos para simular el crop. */
.crop img{
margin:-20px -15px -40px -55px;
}
Técnica 2: Position absolute
Similar a la anterior, aunque en este caso usamos la propiedad position, para hacer que el elemento flote detrás del elemento padre y así se oculte, mostrando la porción de la imagen que deseemos mostrar.
// HTML
<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p>
// CSS
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* IMPORTANTE */
position:relative; /* IMPORTANTE */
border:1px solid #ccc;
width:150px;
height:90px;
}
/* Ocultamos parte de la imagen */
.crop img{
position:absolute;
top:-20px;
left:-55px;
}
Técnica 3: Usando la propiedad clip
La propiedad clip
, fue concebida para este tipo de acciones. Se trata de hacer que elemento padre tenga un agujero de tamaño especificado sobre la imagen, mostrando así la parte de la imagen que deseemos mostrar.
// HTML
<div class="crop"><p><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p></div>
// CSS
.crop{
float:left;
position:relative;
width:150px;
height:90px;
border:1px solid #ccc;
margin:.5em 10px .5em 0;
}
.crop p{
margin:0;
position:absolute;
top:-20px;
left:-55px;
clip:rect(20px 205px 110px 55px); /* Agujero rectángulo de medida específica */
}
Conclusión
Tres técnicas que permite realizar la misma funcionalidad y que ofrecen la posibilidad de implementar fácilmente en cualquier aplicación web. ¿Tu por cual te decantas?
1 comentarios, 0 referencias
+
#