<?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>AjaxBlog &#187; CSS</title>
	<atom:link href="http://ajaxblog.ru/category/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://ajaxblog.ru</link>
	<description>ajax, javascript, css, php</description>
	<lastBuildDate>Tue, 12 Jan 2010 16:54:37 +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>Условные комментарии для IE</title>
		<link>http://ajaxblog.ru/2008/05/uslovnye-kommentarii-dlya-ie/</link>
		<comments>http://ajaxblog.ru/2008/05/uslovnye-kommentarii-dlya-ie/#comments</comments>
		<pubDate>Tue, 06 May 2008 10:35:16 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://ajaxblog.ru/2008/05/06/uslovnye-kommentarii-dlya-ie/</guid>
		<description><![CDATA[Условные комментарии используются для написания специальных инструкций которые будут работать только в Internet Explorer не ниже 5-ой версии. Условный комментарий выглядит следующим образом: &#60;!--[if IE]&#62; Специальные инструкции для IE здесь. &#60;![endif]--&#62; Структура похожа на обычный комментарий в HTML, поэтому остальные &#8230; <a href="http://ajaxblog.ru/2008/05/uslovnye-kommentarii-dlya-ie/">Далее, еще интереснее <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Условные комментарии используются для написания специальных инструкций которые будут работать только в Internet Explorer не ниже 5-ой версии.</p>
<p>Условный комментарий выглядит следующим образом:</p>
<pre class="prettyprint">
&lt;!--[if IE]&gt; Специальные инструкции для IE здесь. &lt;![endif]--&gt;
</pre>
<p>Структура похожа на обычный комментарий в HTML, поэтому остальные браузеры будут воспринимать его как обычный комментарий. Explorer распознает специальный синтаксис<br />
&lt;!&#8211;[if IE]&gt;, решает условие if и парсит содержимое условного комментария так, как если бы это было содержание нормальной страницы. Условные комментарии используют синтаксис HTML комментариев, поэтому они могут быть включены только в HTML страницу. Удобно бывает сделать отдельные стили для IE и вставить тег link в условный комментарий.</p>
<p>Ниже написаны несколько условных комментариев, которые показывают версию Internet Explorer, которую вы используете.</p>
<pre class="prettyprint">
&lt;!--[if IE]&gt; Инструкции для Internet Explorer &lt;![endif]--&gt;
&lt;!--[if IE 5]&gt; Инструкции для IE 5 &lt;![endif]--&gt;
&lt;!--[if IE 5.0]&gt; Инструкции для IE 5.0 &lt;![endif]--&gt;
&lt;!--[if IE 5.5]&gt; Инструкции для IE 5.5 &lt;![endif]--&gt;
&lt;!--[if IE 6]&gt; Инструкции для IE 6 &lt;![endif]--&gt;
&lt;!--[if IE 7]&gt; Инструкции для IE 7 &lt;![endif]--&gt;
</pre>
<p>В условных комментариях можно использовать операторы, с помощью которых можно задать более комплексное условие. В таблице ниже приведены все операторы.</p>
<table border="1">
<tbody>
<tr>
<td><strong>Оператор</strong></td>
<td><strong>Описание</strong></td>
</tr>
<tr>
<td>lt</td>
<td>меньше чем</td>
</tr>
<tr>
<td>lte</td>
<td>меньше или равно</td>
</tr>
<tr>
<td>gt</td>
<td>больше чем</td>
</tr>
<tr>
<td>gte</td>
<td>больше или равно</td>
</tr>
</tbody>
</table>
<p>И несколько примеров:</p>
<pre class="prettyprint">
&lt;!--[if ! IE 5]&gt; Инструкции для  IE 5.5, 6 или 7 &lt;![endif]--&gt;
&lt;!--[if gt IE 5.0]&gt; Инструкции для IE 5.5, 6 или 7 &lt;![endif]--&gt;
&lt;!--[if lte IE 5.5]&gt; Инструкции для IE 5.0 или 5.5 &lt;![endif]--&gt;
&lt;!--[if gte IE 6]&gt; Инструкции для IE 6 или 7 &lt;![endif]--&gt;
&lt;!--[if lt IE 7]&gt; Инструкции для IE 5.0, 5.5 или 6 &lt;![endif]--&gt;
</pre>
<p>
<strong>P.S.</strong>  Материал взять от <a href="http:/http://www.alexilin.ru/uslovnye-kommentarii-dlya-ie/">сюда</a>, просто надоело каждый раз искать, вот и решил сохранить у себя на блоге <img src='http://ajaxblog.ru/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> . Спасибо автору статьи.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxblog.ru/2008/05/uslovnye-kommentarii-dlya-ie/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Звездные войны возвращаются</title>
		<link>http://ajaxblog.ru/2008/04/zvezdnye-vojny-vozvrashhayutsya-3/</link>
		<comments>http://ajaxblog.ru/2008/04/zvezdnye-vojny-vozvrashhayutsya-3/#comments</comments>
		<pubDate>Fri, 11 Apr 2008 19:51:54 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://ajaxblog.ru/2008/04/12/zvezdnye-vojny-vozvrashhayutsya-3/</guid>
		<description><![CDATA[Первое впечатление, когда я увидел, было: &#171;звездные войны возвращаются&#187;. Оказывается, все просто, CSS и никакой магии. #text { margin : auto; width : 50em; font-size : 0.8em; line-height : 1.3em; max-width : 90%; text-align : center; } #text span { &#8230; <a href="http://ajaxblog.ru/2008/04/zvezdnye-vojny-vozvrashhayutsya-3/">Далее, еще интереснее <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Первое впечатление, когда я увидел, было: &laquo;звездные войны возвращаются&raquo;. Оказывается, все просто, CSS и никакой магии.</p>
<style>
#text {
	margin : auto; 	
	width : 50em; 	
	font-size : 0.8em; 	
	line-height : 1.3em; 	
	max-width : 90%; 	
	text-align : center; 
} 
#text span { 	
	font-size : 1.1em; 	
	display: block; 	
	clear: both; 
}
</style>
<div id="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<span><br />
Pellentesque velit lacus,porta vitae, consequat in,<span><br />
aliquam condimentum, tortor. Mauris sed est feugiat<span><br />
erat lacinia rutrum. Fusce dapibus nonummy nisi.<span><br />
Nullam et mi nec arcu tempor pellentesque. Fusce<span><br />
diam dui, pharetra at, pellentesque quis, dapibus<span><br />
ut, erat. Curabitur venenatis condimentum nisi.<span><br />
In posuere. Curabitur accumsan, libero eget<span><br />
congue sodales, lacus mi vehicula lorem,<span><br />
nec rutrum velit nunc vitae magna. Proin<span><br />
et Perspective Text via CSS.<br />
</span></span></span></span></span></span></span></span></span></span></div>
<p>Нравиться. Правда я так и не нашёл где этот эффект гармонично бы лег на дизайн сайта, разве что только если сайт посвящен все тем же &laquo;Звездным войнам&raquo;.</p>
<p><span id="more-28"></span></p>
<p>Для реализации этого эффекта нам потребуется два элемента – блок div и span. Вспомним, что span строчный элемент, поэтому мы можем изменить любой контекст внутри него по нашему желанию. Span мы будем использовать, чтобы разбить текст, который мы хотим преобразовать, на строки. А элемент div – будет обрамлять наш текст. С текстом разобрались, но как же нам указать разную величину шрифта для каждой строки? Мы немного схитрим и не будем закрывать тег span после каждой строки, а сделаем так, чтобы каждая строка была как бы вложена в другую. А закрывающий тег от каждой строки поместим в самый конец текста. Главное здесь не обсчитаться в количестве открывающих и закрывающих тегов.</p>
<pre class="prettyprint">&lt;div id="text"&gt;
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;span&gt;
	Pellentesque velit lacus,porta vitae, consequat in,&lt;span&gt;
	aliquam condimentum, tortor. Mauris sed est feugiat&lt;span&gt;
	erat lacinia rutrum. Fusce dapibus nonummy nisi.&lt;span&gt;
	Nullam et mi nec arcu tempor pellentesque. Fusce&lt;span&gt;
	diam dui, pharetra at, pellentesque quis, dapibus&lt;span&gt;
	ut, erat. Curabitur venenatis condimentum nisi.&lt;span&gt;
	In posuere. Curabitur accumsan, libero eget&lt;span&gt;
	congue sodales, lacus mi vehicula lorem,&lt;span&gt;
	nec rutrum velit nunc vitae magna. Proin&lt;span&gt;
	et Perspective Text via CSS.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;div&gt;</pre>
<p>Вспомним, что дочерние элементы наследуют свойства родительского элемента, причем каждый последующий вложенный элемент присваивает значение относительно его предыдущего блока, а не самого первого. Ярким примером может быть например такое: когда мы используем вложенные блоки с шириной в процентах, например 70%. Каждый вложенный блок будет иметь ширину 70% относительно предыдущего блока, тем самым самый последний вложенный блок будет самым маленьким.</p>
<p>Думаю, вы уже поняли наши дальнейшие действия. Мы будем проделывать это с текстом в внутри тэгов span.</p>
<pre class="prettyprint">#text {
	margin : auto;
	width : 50em;
	font-size : 0.8em;
	line-height : 1.3em;
	max-width : 90%;
	text-align : center;
} 

#text span {
	font-size : 1.1em;
	display: block;
	clear: both;
}</pre>
<p>Важно уточнить, что размер текста нужно указывать именно в em и обязательно больше чем 1 em. Также нужно помнить о расстоянии между строками (line-height), чтобы строки по мере увеличения шрифта не стали наезжать друг на друга.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxblog.ru/2008/04/zvezdnye-vojny-vozvrashhayutsya-3/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
