<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Infoadis &#187; miniatura</title>
	<atom:link href="http://www.infoadis.com/tag/miniatura/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.infoadis.com</link>
	<description>php,ajax,mysql,css,html,software</description>
	<lastBuildDate>Mon, 03 May 2010 13:40:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Redimensionar imagenes con css</title>
		<link>http://www.infoadis.com/2008/05/19/redimensionar-imagenes-con-css/</link>
		<comments>http://www.infoadis.com/2008/05/19/redimensionar-imagenes-con-css/#comments</comments>
		<pubDate>Mon, 19 May 2008 19:32:23 +0000</pubDate>
		<dc:creator>forber</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[efectos]]></category>
		<category><![CDATA[imagenes]]></category>
		<category><![CDATA[miniatura]]></category>

		<guid isPermaLink="false">http://www.infoadis.com/?p=8</guid>
		<description><![CDATA[Para resumir rapidamente su funcionamiento es ocultar una parte de la miniatura de la imagen ya redimensionada anteriormente y la mostramos en su totalidad cuando pasamos el raton por encima o mas conocido como el mouseover. Aunque la gracia de esto ya no es solo que puede estrechar una imagen y si pasa el raton <a href="http://www.infoadis.com/2008/05/19/redimensionar-imagenes-con-css/" class="more-link">More &#62;</a>]]></description>
			<content:encoded><![CDATA[<div align="center"><img class="foto" title="thumb_create_resizing" src="http://www.infoadis.com/wp-content/imagenes/thumb_create_resizing.jpg" alt="" width="450" height="145" /></div>
<p>Para resumir rapidamente su funcionamiento es ocultar una parte de la miniatura de la imagen ya redimensionada anteriormente y la mostramos en su totalidad cuando pasamos el raton por encima o mas conocido como el mouseover.</p>
<p>Aunque la gracia de esto ya no es solo que puede estrechar una imagen y si pasa el raton se hace grande, esta claro que es una de las opciones.. pero pensando en algunas utilidades mas.. nos podria servir para hacer imagenes cuadraditas que estan ahora tan de moda.</p>
<p>Para una web de contactos, galeria de imagenes, etc.. y no podemos utilizar el <a href="http://www.imagemagick.org" target="_blank">ImageMagic</a>, como la inmensa mayoria utiliza las <a href="http://es.php.net/gd" target="_blank">librerias GD</a> para el tratamiento de imagenes, es una forma de redimensionar una imagen y como la redimension no es cuadrada (a no ser que la imagen original si lo fuese) si le quitamos la opcion de <code>a:hover</code> se nos abre un mundo nuevo en la redimension, esta claro que es un parche, pero quien no quiera calentarse la cabeza esto es una solucion rapida y efectiva a mi entender.</p>
<div style="border: 1px dashed #4D93CD; margin: 5px; padding: 5px;"><code><span style="color: #FF00FF">ul#thumbs a{</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000099">display:</span><span style="color: #0000FF">block;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000099">float:</span><span style="color: #0000FF">left;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000099">width:</span><span style="color: #0000FF">100px;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000099">height:</span><span style="color: #0000FF">100px;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000099">line-height:</span><span style="color: #0000FF">100px;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000099">overflow:</span><span style="color: #0000FF">hidden;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000099">position:</span><span style="color: #0000FF">relative;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000099">z-index:</span><span style="color: #0000FF">1;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #FF00FF">}</span><br />
<span style="color: #FF00FF">ul#thumbs a img{</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000099">float:</span><span style="color: #0000FF">left;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000099">position:</span><span style="color: #0000FF">absolute;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000099">top:</span><span style="color: #0000FF">-20px;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000099">left:</span><span style="color: #0000FF">-50px;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #FF00FF">}</span></code></div>
<p><strong>Link:</strong> <a href="http://www.cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property" target="_blank">Create Resizing Thumbnails Using Overflow Property</a> y aqui tambien os dejo una <a href="http://cssglobe.com/lab/overflow_thumbs/" target="_blank">demo</a> del sistema en cuestion</p>
<p>Alli encontrareis la pagina del creador en ingles con todo muy detallado <img src='http://www.infoadis.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  Espero que os haya servido de ayuda!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.infoadis.com/2008/05/19/redimensionar-imagenes-con-css/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
