<?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>ZoneArtCSS &#124; Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología &#187; sombras sin javascript</title>
	<atom:link href="http://www.zoneartcss.com/tag/sombras-sin-javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.zoneartcss.com</link>
	<description>Tips de Diseño y Desarrollo Web</description>
	<lastBuildDate>Wed, 26 Oct 2011 18:31:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Sombra a las Imagenes y Texto solo con CSS</title>
		<link>http://www.zoneartcss.com/webdesign/css/sombra-a-las-imagenes-y-texto-solo-con-css/</link>
		<comments>http://www.zoneartcss.com/webdesign/css/sombra-a-las-imagenes-y-texto-solo-con-css/#comments</comments>
		<pubDate>Wed, 11 Nov 2009 04:56:32 +0000</pubDate>
		<dc:creator>miguelortega</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[div]]></category>
		<category><![CDATA[efecto sombra]]></category>
		<category><![CDATA[shadows CSS]]></category>
		<category><![CDATA[shadows no js]]></category>
		<category><![CDATA[sobra a div]]></category>
		<category><![CDATA[sombra div css]]></category>
		<category><![CDATA[sombra imagen css]]></category>
		<category><![CDATA[sombra texto css]]></category>
		<category><![CDATA[sombras con css]]></category>
		<category><![CDATA[sombras sin javascript]]></category>

		<guid isPermaLink="false">http://www.zoneartcss.com/?p=1061</guid>
		<description><![CDATA[Sombra a imagenes y texto con CSS Con este ejemplo podemos crear un recuadro con sombra para poder resaltar div con contenidos ya sea de texto o de imágenes. Solo tenemos que seguir los siguientes pasos. Paso 1 &#60;div id=&#34;contenido&#34;&#62; &#60;div id=&#34;sombra&#34;&#62; &#60;div id=&#34;text&#34;&#62;Aquí colocas tu texto.&#60;/div&#62; &#60;/div&#62; &#60;/div&#62; Paso 2 &#60;style type=&#34;text/css&#34;&#62; body&#123; margin:0; padding:0; text-align:center; font-family:&#34;Trebuchet MS&#34;, Arial, Verdana; font-size:12px; &#125; #contenido&#123; text-align:center; padding: 5px; margin: 0 auto; width:500px; &#125; &#160; #sombra&#123; margin:10px; [...]]]></description>
			<content:encoded><![CDATA[<div id=HOTWordsTxt name=HOTWordsTxt><p style="text-align: center;"><img class="aligncenter" src="http://zoneartcss.com/wp-content/sombras_css.jpg" alt="Sombras con css" width="500" height="130" /></p>
<h4 style="text-align: center;"><span style="color: #ff9900;">Sombra a imagenes y texto con CSS</span></h4>
<p>Con este <strong>ejemplo</strong> podemos <strong>crear un recuadro con sombra</strong> para poder resaltar div con contenidos ya sea de texto o de imágenes.<br />
<span id="more-1061"></span><br />
Solo tenemos que seguir los siguientes pasos.</p>
<p>Paso 1</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">&lt;div id<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;contenido&quot;</span><span style="color: #00AA00;">&gt;</span>
   &lt;div id<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;sombra&quot;</span><span style="color: #00AA00;">&gt;</span>
      &lt;div id<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;text&quot;</span><span style="color: #00AA00;">&gt;</span>Aquí colocas tu texto.&lt;/div<span style="color: #00AA00;">&gt;</span>
   &lt;/div<span style="color: #00AA00;">&gt;</span>
&lt;/div<span style="color: #00AA00;">&gt;</span></pre></div></div>

<p>Paso 2</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">&lt;style type<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span><span style="color: #00AA00;">&gt;</span>
body<span style="color: #00AA00;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span><span style="color: #ff0000;">&quot;Trebuchet MS&quot;</span><span style="color: #00AA00;">,</span> Arial<span style="color: #00AA00;">,</span> Verdana<span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">12px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#contenido</span><span style="color: #00AA00;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">500px</span><span style="color: #00AA00;">;</span> 
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#sombra</span><span style="color: #00AA00;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#CCCCCC</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Color de la sombra */</span>
   <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">solid</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#CCCCCC</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Color del borde */</span>
   <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">500px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#text</span><span style="color: #00AA00;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #993333;">solid</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#CCCCCC</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">-10px</span> <span style="color: #933;">2px</span> <span style="color: #933;">2px</span> <span style="color: #933;">-10px</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Aqui están los famosos márgenes negativos*/</span>
   <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">2px</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#FFFFFF</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Le damos un color de fondo */</span>
<span style="color: #00AA00;">&#125;</span>
&lt;/style<span style="color: #00AA00;">&gt;</span></pre></div></div>

<p>Para las imagenes solo modificamos en del contenedor</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#contenedor</span><span style="color: #00AA00;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
   <span style="color: #808080; font-style: italic;">/* width:500px; */</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> 
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Saludos</p>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.zoneartcss.com/webdesign/css/sombra-a-las-imagenes-y-texto-solo-con-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

