﻿<?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>WebDuty &#187; текстовые эффекты</title>
	<atom:link href="http://webduty.ru/tag/%d1%82%d0%b5%d0%ba%d1%81%d1%82%d0%be%d0%b2%d1%8b%d0%b5-%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82%d1%8b/feed" rel="self" type="application/rss+xml" />
	<link>http://webduty.ru</link>
	<description>Блог посвящённый веб-технологиям</description>
	<lastBuildDate>Tue, 10 Apr 2012 19:48:00 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CSS3 – Часть 3: Текстовые эффекты</title>
		<link>http://webduty.ru/css3-%e2%80%93-%d1%87%d0%b0%d1%81%d1%82%d1%8c-3-%d1%82%d0%b5%d0%ba%d1%81%d1%82%d0%be%d0%b2%d1%8b%d0%b5-%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82%d1%8b.htm</link>
		<comments>http://webduty.ru/css3-%e2%80%93-%d1%87%d0%b0%d1%81%d1%82%d1%8c-3-%d1%82%d0%b5%d0%ba%d1%81%d1%82%d0%be%d0%b2%d1%8b%d0%b5-%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82%d1%8b.htm#comments</comments>
		<pubDate>Tue, 30 Jun 2009 14:14:57 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS3]]></category>
		<category><![CDATA[текстовые эффекты]]></category>
		<category><![CDATA[тень]]></category>

		<guid isPermaLink="false">http://webduty.ru/?p=472</guid>
		<description><![CDATA[В этой статье я расскажу вам о новых текстовых эффектах в CSS3.
Типографика, несомненно, очень важная часть веб-дизайна. В данный момент CSS хоть и является достаточно эффективным инструментом, но всё же во многом ограничивает дизайнера. CSS3 частично устраняет эти ограничения.

Рассмотрим более детально грядущие нововведения.
Тени
С помощью тени текста можно сделать его поистине ужастным, но если использовать этот [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://webduty.ru/wp-content/uploads/2009/06/231548700_71be1b7377_m1.jpg" alt="css3" title="css3" width="240" height="160" style="float: left; margin-left:0px; margin-top: 5px;" /><em>В этой статье я расскажу вам о новых текстовых эффектах в <strong>CSS3</strong>.<br />
Типографика, несомненно, очень важная часть веб-дизайна. В данный момент <strong>CSS</strong> хоть и является достаточно эффективным инструментом, но всё же во многом ограничивает дизайнера. <strong>CSS3</strong> частично устраняет эти ограничения.</em><br />
<span id="more-472"></span><br />
Рассмотрим более детально грядущие нововведения.</p>
<h3>Тени</h3>
<p>С помощью тени текста можно сделать его поистине ужастным, но если использовать этот эффект грамотно, можно получить достаточно эстетичный текстовый блок либо загаловок. В данный момент тени поддерживают Firefox 3.1/3.5, Google Chrome, Opera 9.5, Safari 1.1+. IE 6,7,8 увы не поддерживает данный эффект.<br />
Пример:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.text_shadow</span> <span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#897048</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #933;">2px</span> <span style="color: #933;">2px</span> <span style="color: #933;">2px</span> <span style="color: #cc00cc;">#ddccb5</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">15px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p><img src="http://webduty.ru/wp-content/uploads/2009/06/text_shadow.png" alt="text_shadow" title="text_shadow" width="315" height="47" class="simple size-full wp-image-473" /></p>
<h3>Разделимость слов</h3>
<p>В настоящее время если слово достаточно длинное, то оно вылезет за границы блока. Это конечно правильно, но бывают ситуации, когда необходимо чтобы браузер переносил часть слова на другую строчку.<br />
Пример:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.text_wrap</span> <span style="color: #00AA00;">&#123;</span>
word-wrap<span style="color: #00AA00;">:</span>  break-word<span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p><img src="http://webduty.ru/wp-content/uploads/2009/06/text_wrap.png" alt="text_wrap" title="text_wrap" width="255" height="118" class="simple size-full wp-image-474" /></p>
<h3>В заключение</h3>
<p>Данная статья не охватывает все изменения, касающиеся текста в <strong>CSS3</strong>. Если интересно, вы можете почитать более <noindex><a rel="nofollow" href="http://www.w3.org/TR/2003/CR-css3-text-20030514" >подробную информацию о текстовом модуле</a></noindex>.<br />
В следующей статье из этой серии я расскажу о фонах в  <strong>CSS3</strong>.</p>
]]></content:encoded>
			<wfw:commentRss>http://webduty.ru/css3-%e2%80%93-%d1%87%d0%b0%d1%81%d1%82%d1%8c-3-%d1%82%d0%b5%d0%ba%d1%81%d1%82%d0%be%d0%b2%d1%8b%d0%b5-%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82%d1%8b.htm/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

