<?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; CSS</title>
	<atom:link href="http://www.infoadis.com/category/css/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>Alternativa a iluminar celdas usando solo CSS</title>
		<link>http://www.infoadis.com/2008/06/03/alternativa-a-iluminar-celdas-usando-solo-css/</link>
		<comments>http://www.infoadis.com/2008/06/03/alternativa-a-iluminar-celdas-usando-solo-css/#comments</comments>
		<pubDate>Tue, 03 Jun 2008 18:42:20 +0000</pubDate>
		<dc:creator>forber</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[efectos]]></category>
		<category><![CDATA[tablas]]></category>
		<category><![CDATA[tablehover]]></category>

		<guid isPermaLink="false">http://www.infoadis.com/?p=16</guid>
		<description><![CDATA[Como ya hace unos d&#237;as dije como iluminar filas y columnas con jquery, pues bien, lamentablemente para webs con un panel de administraci&#243;n que suelta más de 500 filas y mas de 11 columnas, es un efecto poco &#250;til y que adem&#225;s ralentiza much&#237;simo la web. As&#237; que he buscado una soluci&#243;n mas &#8220;caserilla&#8221; pero <a href="http://www.infoadis.com/2008/06/03/alternativa-a-iluminar-celdas-usando-solo-css/" class="more-link">More &#62;</a>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.infoadis.com/wp-content/imagenes/sin-titulo-1-300x72.jpg" alt="alternativa_tablehover" title="alternativa_tablehover" width="300" height="72" class="alignleft size-medium wp-image-15" /> Como ya hace unos d&iacute;as dije <a href="http://www.infoadis.com/2008/05/23/como-iluminar-filas-y-columnas-con-jquery/">como iluminar filas y columnas con jquery</a>, pues bien, lamentablemente para webs con un panel de administraci&oacute;n que suelta más de 500 filas y mas de 11 columnas, es un efecto poco &uacute;til y que adem&aacute;s ralentiza much&iacute;simo la web. As&iacute; que he buscado una soluci&oacute;n mas &#8220;caserilla&#8221; pero hace el efecto &oacute;ptico deseado y es el de iluminar la fila entera y con otro color iluminamos la celda por donde pasa el rat&oacute;n.</p>
<p>La soluci&oacute;n es sencilla bajo mi punto de vista y es usando una peque&ntilde;a hoja de estilos, no la voy a hacer tan complicada como la tengo yo pero el efecto es el mismo&#8230;</p>
<p>As&iacute; que, salt&aacute;ndome los pasos de que ya sab&eacute;is crear una tabla os pongo el estilo para que os salga algo como en la foto inicial&#8230;</p>
<pre class="brush: css;">
tr:hover{
  background-color: #FFFFCC; /* amarillo */
  }
tr td:hover{
  background-color: #FF9900; /* naranja */
  }
</pre>
<p>Con esto conseguimos en amarillo iluminar toda la fila y en naranja iluminar la celda por donde pasamos el rat&oacute;n.</p>
<p>Ya, ya se que no es lo mismo que la otra ilumina toda la columna y no es lo mismo, pero bueno me he buscado otros recursos para poder saber que significa en esa celda cuando te encuentras en medio del oc&eacute;ano (osea en la mitad de los 500 registros) y no sabes si subir o bajar <img src='http://www.infoadis.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>Solo os digo que de 21seg de carga ha bajado a 15s. Lo se, parece un mont&oacute;n de segundos pero seguro que pronto conseguir&eacute; bajar el tiempo y con mas registros <img src='http://www.infoadis.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>Espero que os haya servido para algo y si ten&eacute;is alguna duda dejar vuestros comentarios.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.infoadis.com/2008/06/03/alternativa-a-iluminar-celdas-usando-solo-css/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<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>
