<?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>UGgallery &#187; CSS-верстка</title>
	<atom:link href="http://uggallery.audiopeace.ru/category/css-verstka/feed" rel="self" type="application/rss+xml" />
	<link>http://uggallery.audiopeace.ru</link>
	<description>CSS=~- HTML=~- Web=~-</description>
	<lastBuildDate>Mon, 21 Jun 2010 02:17:49 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CSS3: брюки превращаются&#8230; превращаются брюки&#8230;</title>
		<link>http://uggallery.audiopeace.ru/2010/04/01/css3-bryuki-prevraschayutsya-prevraschayutsya-bryuki</link>
		<comments>http://uggallery.audiopeace.ru/2010/04/01/css3-bryuki-prevraschayutsya-prevraschayutsya-bryuki#comments</comments>
		<pubDate>Thu, 01 Apr 2010 13:22:38 +0000</pubDate>
		<dc:creator>uggallery</dc:creator>
				<category><![CDATA[CSS-верстка]]></category>

		<guid isPermaLink="false">http://uggallery.audiopeace.ru/?p=469</guid>
		<description><![CDATA[Словечко CSS3 мелькает всё чаще, и я тоже начал искать новые методы работы. Естесвенно, оказалось, что даже в самых последних версиях браузеров поддержка CSS3 оставляет желать лучшего. Те CSS-свойства, которые действительно могли бы облегчить работу, поддерживаются не слишком широко. Например, псевдоклассы для создания &#8220;зебры&#8221; в таблицах. Зато тени и скругленные уголки уже точно можно применять, [...]]]></description>
			<content:encoded><![CDATA[<p>Словечко CSS3 мелькает всё чаще, и я тоже начал искать новые методы работы. Естесвенно, оказалось, что даже в самых последних версиях браузеров поддержка CSS3 оставляет желать лучшего. Те CSS-свойства, которые действительно могли бы облегчить работу, поддерживаются не слишком широко. Например, псевдоклассы для создания &#8220;зебры&#8221; в таблицах. Зато тени и скругленные уголки уже точно можно применять, причем без ущерба для IE, что прибавляет радости. Но это же мелочь! И это всё? Жаль! А я уж размечтался&#8230;</p>

<p>Мои ощущения лучше всего передает фраза, которую я сегодня прочитал <a href="http://www.onderhond.com/blog/work/css-child-selectors">на Onderhond.com</a>:</p>

<blockquote>

The more I play around with the possibilities of css3, the more I keep coming back to the same tired old concept of workaround, fixes and alternative methods. It&#8217;s a somewhat depressing realization.

</blockquote>

<p>Действительно: &#8220;depressing&#8221;. </p>
]]></content:encoded>
			<wfw:commentRss>http://uggallery.audiopeace.ru/2010/04/01/css3-bryuki-prevraschayutsya-prevraschayutsya-bryuki/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Firebug: быстрый перебор размеров и цветов (мечта шопоголика)</title>
		<link>http://uggallery.audiopeace.ru/2009/12/10/firebug</link>
		<comments>http://uggallery.audiopeace.ru/2009/12/10/firebug#comments</comments>
		<pubDate>Thu, 10 Dec 2009 06:34:07 +0000</pubDate>
		<dc:creator>uggallery</dc:creator>
				<category><![CDATA[CSS-верстка]]></category>
		<category><![CDATA[Браузеры]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[firebug]]></category>
		<category><![CDATA[firefox]]></category>

		<guid isPermaLink="false">http://uggallery.audiopeace.ru/?p=391</guid>
		<description><![CDATA[Firebug для меня &#8212; причина номер один для того, чтобы пользоваться Firefox-ом &#8212; 99% от всех причин. Чудо-инструмент! Часто при верстке блока, в css-файле я задаю лишь примерные параметры (расположение, размеры, отсупы), а тонкую подгонку осуществляю в Firebug-е.

Это просто! Выбираем элемент, выбираем CSS-правило, устанавливаем курсор и меняем цифровые значения при помощи клавиш-стрелок на клавиатуре. &#8220;Вверх&#8221; [...]]]></description>
			<content:encoded><![CDATA[<p>Firebug для меня &#8212; причина номер один для того, чтобы пользоваться Firefox-ом &#8212; 99% от всех причин. Чудо-инструмент! Часто при верстке блока, в css-файле я задаю лишь примерные параметры (расположение, размеры, отсупы), а тонкую подгонку осуществляю в Firebug-е.</p>

<p>Это просто! Выбираем элемент, выбираем CSS-правило, устанавливаем курсор и меняем цифровые значения при помощи клавиш-стрелок на клавиатуре. &#8220;Вверх&#8221; &#8212; увеличиваем значение, &#8220;Вниз&#8221; &#8212; уменьшаем. Экономит время и облегчает работу со страшной силой!</p>

<p><img class="alignnone size-full wp-image-403" title="firebug1" src="http://uggallery.audiopeace.ru/wp-content/firebug1.png" alt="firebug1" width="399" height="186" /></p>

<p>То же самое  можно делать для чернового подбора цветов элементов. <span id="more-391"></span>Создаем правило, определяющее цвет элемента (background-color, color, border-color&#8230;) и справа от правила пишем латинскую букву &#8220;a&#8221; &#8212; Firebug автоматически дополнит его до слова &#8220;AliceBlue&#8221; (название HTML-цвета); нажимаем клавишу &#8220;Вниз&#8221; &#8212; появляется слово &#8220;AntiqueWhite&#8221; и так далее. При этом соответственно меняется и цвет редактируемого элемента в окне браузера.</p>

<p><img class="alignnone size-full wp-image-404" title="firebug2" src="http://uggallery.audiopeace.ru/wp-content/firebug2.png" alt="firebug2" width="399" height="316" /></p>

<p><img class="alignnone size-full wp-image-405" title="firebug3" src="http://uggallery.audiopeace.ru/wp-content/firebug3.png" alt="firebug3" width="399" height="316" /></p>

<p>Перебор цветов &#8212; мелкая, но забавная фича Firebug-a.</p>
]]></content:encoded>
			<wfw:commentRss>http://uggallery.audiopeace.ru/2009/12/10/firebug/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>&#8220;Похоже, скоро мы забудем о SIFR и Cufon! Ура!&#8221;</title>
		<link>http://uggallery.audiopeace.ru/2009/10/24/font-face</link>
		<comments>http://uggallery.audiopeace.ru/2009/10/24/font-face#comments</comments>
		<pubDate>Sat, 24 Oct 2009 15:01:33 +0000</pubDate>
		<dc:creator>uggallery</dc:creator>
				<category><![CDATA[CSS-верстка]]></category>
		<category><![CDATA[Ссылки]]></category>

		<guid isPermaLink="false">http://uggallery.audiopeace.ru/?p=342</guid>
		<description><![CDATA[Юрий Артюх (akella) описал состояние дел и перспективы такого нужного и замечательного дела как встраивание шрифтов в веб-страницы посредством CSS. Много ссылок для чтения.
]]></description>
			<content:encoded><![CDATA[<p>Юрий Артюх (akella) описал состояние дел и перспективы такого нужного и замечательного дела как <a href="http://cssing.org.ua/2009/10/24/font-face/">встраивание шрифтов в веб-страницы посредством CSS</a>. Много ссылок для чтения.</p>
]]></content:encoded>
			<wfw:commentRss>http://uggallery.audiopeace.ru/2009/10/24/font-face/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSStool.ru &#8211; генератор HTML+CSS шаблонов</title>
		<link>http://uggallery.audiopeace.ru/2009/06/29/csstool-ru</link>
		<comments>http://uggallery.audiopeace.ru/2009/06/29/csstool-ru#comments</comments>
		<pubDate>Mon, 29 Jun 2009 11:03:25 +0000</pubDate>
		<dc:creator>uggallery</dc:creator>
				<category><![CDATA[CSS-Шаблоны]]></category>
		<category><![CDATA[Ссылки]]></category>

		<guid isPermaLink="false">http://uggallery.audiopeace.ru/?p=339</guid>
		<description><![CDATA[UPD: Генератор шаблонов теперь находится по адресу Сsstemplater.com

Обновился интересный генератор HTML+CSS шаблонов CSStool.ru. Забыл о нем написать когда он появился. Обратите внимание, вдруг пригодится.

На сайте CSStool.ru, который представляет из себя генератор HTML+CSS шаблонов проведено обновление, которое включает ряд нововведений различного характера.

Список нововведений на сайте создателя сервиса. Полезный апгрейд получился, на мой взгляд.
]]></description>
			<content:encoded><![CDATA[<p><strong>UPD: Генератор шаблонов теперь находится по адресу <a href="http://csstemplater.com/">Сsstemplater.com</a></strong></p>

<p>Обновился интересный <a href="http://csstemplater.com/">генератор HTML+CSS шаблонов</a> CSStool.ru. Забыл о нем написать когда он появился. Обратите внимание, вдруг пригодится.</p>

<blockquote>На сайте CSStool.ru, который представляет из себя генератор HTML+CSS шаблонов проведено обновление, которое включает ряд нововведений различного характера.</blockquote>

<p><a href="http://dimox.name/csstool-update/">Список нововведений</a> на сайте создателя сервиса. Полезный апгрейд получился, на мой взгляд.</p>
]]></content:encoded>
			<wfw:commentRss>http://uggallery.audiopeace.ru/2009/06/29/csstool-ru/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Хак с немасштабируемым фоном страницы</title>
		<link>http://uggallery.audiopeace.ru/2009/06/26/blondinka-ru</link>
		<comments>http://uggallery.audiopeace.ru/2009/06/26/blondinka-ru#comments</comments>
		<pubDate>Fri, 26 Jun 2009 10:03:08 +0000</pubDate>
		<dc:creator>uggallery</dc:creator>
				<category><![CDATA[CSS-верстка]]></category>
		<category><![CDATA[Ссылки]]></category>

		<guid isPermaLink="false">http://uggallery.audiopeace.ru/?p=338</guid>
		<description><![CDATA[Прикольно на Блондинка.ру фон страницы сделан. Картинка &#8212; IMG &#8212; положена ниже остальных блоков страницы при помощи z-index. Спозиционирована абсолютно, с шириной 100% &#8212; всегда растягивается на всё окно. Сама картинка маленькая (500 х 286 px) но из за того, что рисунок нечёткий, незаметно, что оно сильно растянуто. 

Самое, наверное, интересное, что картинка не масштабируется [...]]]></description>
			<content:encoded><![CDATA[<p>Прикольно на <a href="http://www.blondinka.ru/">Блондинка.ру</a> фон страницы сделан. Картинка &#8212; IMG &#8212; положена ниже остальных блоков страницы при помощи z-index. Спозиционирована абсолютно, с шириной 100% &#8212; всегда растягивается на всё окно. Сама картинка маленькая (500 х 286 px) но из за того, что рисунок нечёткий, незаметно, что оно сильно растянуто. </p>

<p>Самое, наверное, интересное, что картинка не масштабируется при page zoom-e (в Опере она в какой-то момент начинает, но в Фоксе &#8212; нет). Немного необычно смотрится. Отличный хак: дешево и сердито )) Раньше не встречал.</p>

<pre>
<code>IMG#bg-fon{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: inline-block !important;   
}
</code>
</pre>

<p>А еще, фон рандомно меняется при обновлении окна. </p>
]]></content:encoded>
			<wfw:commentRss>http://uggallery.audiopeace.ru/2009/06/26/blondinka-ru/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Fixed.name. Эксперименты с фиксированной вёрсткой.</title>
		<link>http://uggallery.audiopeace.ru/2009/06/22/fixed-name</link>
		<comments>http://uggallery.audiopeace.ru/2009/06/22/fixed-name#comments</comments>
		<pubDate>Mon, 22 Jun 2009 13:41:23 +0000</pubDate>
		<dc:creator>uggallery</dc:creator>
				<category><![CDATA[CSS-Шаблоны]]></category>
		<category><![CDATA[CSS-верстка]]></category>
		<category><![CDATA[Ссылки]]></category>

		<guid isPermaLink="false">http://uggallery.audiopeace.ru/?p=337</guid>
		<description><![CDATA[На просторах рунета появился ресурс Fixed.name посвященный внешне довольно мелкой, но внутренне довольно необъятной теме &#8212; вёрстке блоками, фиксированным относительно окна браузера при помщи CSS-свойства position:absolute. 

Вот что пишет автор проекта на главной странице:

Если вас интересует экспериментальная разметка web-страниц с использованием position:absolute; позволяющая по вашему желанию, практически где угодно, в произвольном порядке, размещать фиксированные блоки [...]]]></description>
			<content:encoded><![CDATA[<p>На просторах рунета появился ресурс <a href="http://fixed.name/">Fixed.name</a> посвященный внешне довольно мелкой, но внутренне довольно необъятной теме &#8212; вёрстке блоками, фиксированным относительно окна браузера при помщи CSS-свойства position:absolute. <span id="more-337"></span></p>

<p>Вот что пишет автор проекта на главной странице:</p>

<blockquote><p>Если вас интересует экспериментальная разметка web-страниц с использованием position:absolute; позволяющая по вашему желанию, практически где угодно, в произвольном порядке, размещать фиксированные блоки и колонки, значит вы пришли туда, куда надо.</p>
<p>В каком-то смысле ресурс можно отнести в разряд учебного пособия, одной из глав которого, является раздел посвященный созданию web-страниц с применением фиксированных блоков и колонок в различных вариациях.</p>
<p>Автор, по возможности, постарается максимально доходчиво рассказать об этом, весьма, увлекательном процессе. В любом случае, ознакомившись с предложенным вам материалом, вы сможете самостоятельно использовать полученные знания и практические навыки, в своей дальнейшей, возможно, блестящей карьеры, на этом не легком пути.</p></blockquote>

<p><a href="http://trifler.ru/blog/">Автор</a> обладает, на мой взгляд, вредным характером (это плохо) и дотошностью в отношение вёрстки (это &#8212; хорошо). Нужно много терпения для чтения его текстов, но чтение может быть полезным. </p>

<p>Если вас интересуют экзотические эксперименты в области CSS-вёрстки &#8212; рекомендую.</p>
]]></content:encoded>
			<wfw:commentRss>http://uggallery.audiopeace.ru/2009/06/22/fixed-name/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Учебник по CSS-верстке вышел из беты</title>
		<link>http://uggallery.audiopeace.ru/2009/06/01/uchebnik-po-css-verstke-vyishel-iz-betyi</link>
		<comments>http://uggallery.audiopeace.ru/2009/06/01/uchebnik-po-css-verstke-vyishel-iz-betyi#comments</comments>
		<pubDate>Mon, 01 Jun 2009 11:25:27 +0000</pubDate>
		<dc:creator>uggallery</dc:creator>
				<category><![CDATA[CSS-верстка]]></category>

		<guid isPermaLink="false">http://uggallery.audiopeace.ru/?p=335</guid>
		<description><![CDATA[Сегодня убрал со страницы с Учебником надпись о том, что проект не окончен. Теперь он окончен официально. Это конечно полная условность, но все-таки повод для праздника :)

Эта страница с Учебником &#8211; одна &#8211; дает половину трафика на всем сайте. Полезный оказался проект.

Последним добавленным материалом стал перевод статьи с мозилловского блога: &#8220;Кроссбраузерный inline-block” (Grakhov.com)&#8221;.

Пришлось убрать раздел [...]]]></description>
			<content:encoded><![CDATA[<p>Сегодня убрал <a href="http://uggallery.audiopeace.ru/css-manual">со страницы с Учебником</a> надпись о том, что проект не окончен. Теперь он окончен официально. Это конечно полная условность, но все-таки повод для праздника :)</p>

<p>Эта страница с Учебником &#8211; одна &#8211; дает половину трафика на всем сайте. Полезный оказался проект.</p>

<p>Последним добавленным материалом стал перевод статьи с мозилловского блога: <a href="http://blog.grakhov.com/post/99406348/inline-block">&#8220;Кроссбраузерный inline-block” (Grakhov.com)&#8221;</a>.</p>

<p>Пришлось убрать раздел &#8220;Разделение контента, оформления и поведения&#8221; ввиду того, что так и не удалось найти (или написать самостоятельно) ничего подходящего к этой теме на русском. Фундаментальная вещь, а о ней почти не пишут, даже на английском.</p>

<p>Это конечно не означает, что Учебник никогда не будет меняться. При появлении интересных материалов буду добавлять, менять что-нибудь.</p>
]]></content:encoded>
			<wfw:commentRss>http://uggallery.audiopeace.ru/2009/06/01/uchebnik-po-css-verstke-vyishel-iz-betyi/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Айфон &#8212; сакс, но&#8230;</title>
		<link>http://uggallery.audiopeace.ru/2009/04/02/iphone-no-not-again</link>
		<comments>http://uggallery.audiopeace.ru/2009/04/02/iphone-no-not-again#comments</comments>
		<pubDate>Thu, 02 Apr 2009 03:10:17 +0000</pubDate>
		<dc:creator>uggallery</dc:creator>
				<category><![CDATA[CSS-верстка]]></category>
		<category><![CDATA[Мобильный веб]]></category>
		<category><![CDATA[Ссылки]]></category>

		<guid isPermaLink="false">http://uggallery.audiopeace.ru/?p=334</guid>
		<description><![CDATA[&#8230;находятся желающие им пользоваться ;) Возможно, придется для него верстать. И тогда я начну с изучения материалов из заметки &#8220;Верстка под IPhone (шпаргалка)&#8221; в блоге Ольги Алексашенко. 

Если однажды дизайнер принесет вам на блюдечке невероятно красивый, сияющий, округлый web-application для IPhone, эта шпаргалка и google помогут вам не ударить в грязь лицом.

Спасибо, Оля, что поделилась [...]]]></description>
			<content:encoded><![CDATA[<p>&#8230;находятся желающие им пользоваться ;) Возможно, придется для него верстать. И тогда я начну с изучения материалов из заметки &#8220;<a href="http://engelside.net/css-for-iphone/">Верстка под IPhone (шпаргалка)</a>&#8221; в блоге Ольги Алексашенко. </p>

<blockquote><p>Если однажды дизайнер принесет вам на блюдечке невероятно красивый, сияющий, округлый web-application для IPhone, эта шпаргалка и google помогут вам не ударить в грязь лицом.</p></blockquote>

<p>Спасибо, Оля, что поделилась ценным опытом.</p>
]]></content:encoded>
			<wfw:commentRss>http://uggallery.audiopeace.ru/2009/04/02/iphone-no-not-again/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Скругленные уголки &#8212; сакс, но&#8230;</title>
		<link>http://uggallery.audiopeace.ru/2009/03/31/roundead-korners</link>
		<comments>http://uggallery.audiopeace.ru/2009/03/31/roundead-korners#comments</comments>
		<pubDate>Tue, 31 Mar 2009 14:10:16 +0000</pubDate>
		<dc:creator>uggallery</dc:creator>
				<category><![CDATA[CSS-верстка]]></category>
		<category><![CDATA[Ссылки]]></category>

		<guid isPermaLink="false">http://uggallery.audiopeace.ru/?p=333</guid>
		<description><![CDATA[&#8230;людям по-прежнему приходится верстать блоки со скругленными уголками. И прогресс не стоит на месте, появляются новые методы. Про поиски и решения можно почитать в блогах Андрея Сумина и Сергея Чикуёнка:


Круглые края
Круглые края (часть 2)
rocon — подробности


Комментарии заслуживают особого внимания. Мне, человеку, который давно перестал волноваться по поводу скругленных уголков, было интересно почитать. 

Апдейт: Круглые углы [...]]]></description>
			<content:encoded><![CDATA[<p>&#8230;людям по-прежнему приходится верстать блоки со скругленными уголками. И прогресс не стоит на месте, появляются новые методы. Про поиски и решения можно почитать в блогах Андрея Сумина и Сергея Чикуёнка:</p>

<ul>
<li><a href="http://andrewsumin.livejournal.com/32937.html" title="">Круглые края</a></li>
<li><a href="http://andrewsumin.livejournal.com/33422.html" title="">Круглые края (часть 2)</a></li>
<li><a href="http://chikuyonok.ru/2009/02/rocon-more/" title="">rocon — подробности</a></li>
</ul>

<p>Комментарии заслуживают особого внимания. Мне, человеку, который давно перестал волноваться по поводу скругленных уголков, было интересно почитать. </p>

<p><strong>Апдейт:</strong> <a href="http://community.livejournal.com/ru_webdev/2718122.html#comments">Круглые углы в IE 8 (см. комменты)</a></p>

<p><strong>Апдейт 2:</strong> <a href="http://www.noinimod.ru/3/">Делаем закругленные уголки с помощью псевдоэлементов :before и :after</a></p>
]]></content:encoded>
			<wfw:commentRss>http://uggallery.audiopeace.ru/2009/03/31/roundead-korners/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>HTML Class Names of Web Dev Blogs</title>
		<link>http://uggallery.audiopeace.ru/2008/12/16/naming</link>
		<comments>http://uggallery.audiopeace.ru/2008/12/16/naming#comments</comments>
		<pubDate>Tue, 16 Dec 2008 06:24:46 +0000</pubDate>
		<dc:creator>uggallery</dc:creator>
				<category><![CDATA[CSS-Шаблоны]]></category>
		<category><![CDATA[Ссылки]]></category>

		<guid isPermaLink="false">http://uggallery.audiopeace.ru/?p=329</guid>
		<description><![CDATA[Собранные Энди Кларком имена классов для обозначения элементов шаблона страницы. С сайтов известных блогеров веб-разработчиков. Чисто &#8220;любопытно посмотреть&#8221;.

В дополнение к &#8220;5-ти советам верстальщику&#8221; (совет № 4) и обсуждению, развернувшемуся в комментах.
]]></description>
			<content:encoded><![CDATA[<p>Собранные Энди Кларком <a href="http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html">имена классов для обозначения элементов шаблона страницы</a>. С сайтов известных блогеров веб-разработчиков. Чисто &#8220;любопытно посмотреть&#8221;.</p>

<p>В дополнение <a href="http://uggallery.audiopeace.ru/2008/05/19/5-advices">к &#8220;5-ти советам верстальщику&#8221;</a> (совет № 4) и обсуждению, развернувшемуся в комментах.</p>
]]></content:encoded>
			<wfw:commentRss>http://uggallery.audiopeace.ru/2008/12/16/naming/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>
