<?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>morozov &#187; css</title>
	<atom:link href="http://www.morozoff.info/category/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.morozoff.info</link>
	<description></description>
	<lastBuildDate>Sat, 05 Mar 2011 10:20:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.5</generator>
		<item>
		<title>Как я делаю картинки-png</title>
		<link>http://www.morozoff.info/2007/04/06/kak-ya-delayu-kartinki-png/</link>
		<comments>http://www.morozoff.info/2007/04/06/kak-ya-delayu-kartinki-png/#comments</comments>
		<pubDate>Fri, 06 Apr 2007 15:33:35 +0000</pubDate>
		<dc:creator>morozov</dc:creator>
				<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.morozoff.info/2007/04/06/kak-ya-delayu-kartinki-png/</guid>
		<description><![CDATA[Дано Сайта aspekt-kor.com. Справа фотографии. Нужно делать их пнг. Потому что неизвестно сколько справа будет текста и коричневый фон может как увеличиваться, так и уменьшаться. Картинка: Решение Скачиваем: файл Actions для фотошопа. Вставляем эту картинку в новое окно. Выбираем в панели actions действие transparenсy (!! фон должен быть прозрачным) и жмем пуск. В результате должно [...]]]></description>
			<content:encoded><![CDATA[<h2>Дано</h2>
<p>Сайта <a href="http://aspekt-kor.com">aspekt-kor.com</a>. Справа фотографии. Нужно делать их пнг. Потому что неизвестно сколько справа будет текста и коричневый фон может как увеличиваться, так и уменьшаться.</p>
<p>Картинка:</p>
<p><img src='http://www.morozoff.info/wp-content/uploads/2007/04/fotka-1.jpg' alt='Источник' /></p>
<div style="clear:both;"></div>
<p><span id="more-14"></span></p>
<h2>Решение</h2>
<p><strong>Скачиваем:</strong> файл <a href="/examples/png/forpng.atn">Actions для фотошопа</a>.</p>
<p>Вставляем эту картинку в новое окно.</p>
<p>Выбираем в панели actions действие transparenсy (!! фон должен быть прозрачным) и жмем пуск.</p>
<p>В результате должно получится два слоя:</p>
<p><img src='http://www.morozoff.info/wp-content/uploads/2007/04/fotka-2.jpg' alt='изображение-png' /></p>
<div style="clear:both;"></div>
<p>сохраняем как <strong>foto.png</strong></p>
<p><img src='http://www.morozoff.info/wp-content/uploads/2007/04/fotka-3.gif' alt='изображение gif' style="clear:both" /></p>
<div style="clear:both;"></div>
<p>сохраняем как <strong>foto.gif</strong></p>
<p>Теперь вставляем его в html.</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;div class=&quot;foto&quot;&gt;&lt;div&gt;&lt;!-- --&gt;&lt;/div&gt;&lt;/div&gt;</pre></div></div>

<p>И пишем стили для css</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td 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>
<span style="color: #6666ff;">.foto</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-image</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span>картинка-png<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">301px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">341px</span><span style="color: #00AA00;">&#125;</span> 
<span style="color: #6666ff;">.foto</span> div <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-image</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span>картинка-gif<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">301px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">341px</span><span style="color: #00AA00;">&#125;</span>
&lt;/style<span style="color: #00AA00;">&gt;</span></pre></td></tr></table></div>

<p>И пишем стили для ie5,6</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="css" style="font-family:monospace;">&lt;!--<span style="color: #00AA00;">&#91;</span>if lt IE <span style="color: #cc66cc;">7</span><span style="color: #00AA00;">&#93;</span><span style="color: #00AA00;">&gt;</span>
&lt;style type<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span><span style="color: #00AA00;">&gt;</span>
<span style="color: #6666ff;">.foto</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-image</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> filter<span style="color: #00AA00;">:</span> progid<span style="color: #3333ff;">:DXImageTransform</span><span style="color: #6666ff;">.Microsoft</span>.AlphaImageLoader<span style="color: #00AA00;">&#40;</span>src<span style="color: #00AA00;">=</span>картинка-png<span style="color: #00AA00;">,</span>sizingMethod<span style="color: #00AA00;">=</span><span style="color: #993333;">crop</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#125;</span> 
&lt;/style<span style="color: #00AA00;">&gt;</span>
&lt; !<span style="color: #00AA00;">&#91;</span>endif<span style="color: #00AA00;">&#93;</span>--<span style="color: #00AA00;">&gt;</span></pre></td></tr></table></div>

<p>Преимущества такого способа в том, что в ie5 все очень неплохо смотрится <img src='http://www.morozoff.info/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Результат смотреть <a href="/examples/png/">тут</a> или <a href="http://www.aspekt-kor.com">тут</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.morozoff.info/2007/04/06/kak-ya-delayu-kartinki-png/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

