16.08.2014 | Рубрика: Адаптивная верстка | Комментарии (3)
Тэги: CSS3, max-width, Media Queries, min-width, адаптивная верстка, Медиа-запросы

Медиа-запросы (Media Queries) — основной инструмент современного верстальщика сайтов, когда речь идет об адаптивной верстке. В двух словах медиа-запросы — это отдельные наборы правил в файле стилей CSS. Каждый из таких дополняющих наборов отвечает за тот или иной способ отображения сайта.

Например, за ширину окна конкретного девайса: настольного монитора, смартфона или планшета, а в случае с последними двумя также и за ориентацию в пространстве (альбомная или книжная или по-буржуйски landscape и portrait).

Читать далее »

14.08.2014 | Рубрика: Адаптивная верстка | Комментарии (2)
Тэги: Media Queries, адаптивная верстка, адаптивный веб-дизайн, Верстка, Медиа-запросы, отзывчивый веб-дизайн, современная верстка

Все чаще читатели блога Вебсовет задают в своих письмах вопросы по адаптивной верстке сайтов. Окей! Раз пошла такая пьянка тенденция, то вэлкам! Этим постом я открываю новую рубрику на блоге, посвященную исключительно вопросам адаптивной верстки сайтов.

Для тех, кто не в танке и впервые слышит об этой новомодной (с 2012 года) фишке, краткое пояснение:

Адаптивная верстка предназначена для автоматической подгонки сайта под различные размеры экранов отображающих устройств: настольных ПК, телевизоров, планшетов, смартфонов и прочих мобильников.

Здесь следует дать одно очень важное разъяснение касательно различных похожих определений в современном веб-дизайне, а именно: адаптивный (adaptive) и отзывчивый (responsive) веб-дизайн. Очень многие ошибочно полагают, что это одно и то же. Но это не так.

Читать далее »

18.02.2014 | Рубрика: WordPress | Комментарии (4)
Тэги: WordPress, категории WordPress, количество записей в Wordpress, проблемы Wordpress

У WordPress есть одно очень неудобное свойство – вывод количества записей везде одинаков. Хоть на главной странице, хоть в архиве, хоть в поиске. Устанавливается это количество в настройках в разделе Чтение один раз, и никуда от этого не денешься.

Оно бы все и ничего, но иногда такое положение вещей раздражает.

Например, у меня на главной выводится 5 постов с таким расчетом, чтобы общая длина ленты примерно была равна длине сайдбара со всеми его виджетами, рекламой и пр. В рубриках же, как известно, выводятся короткие анонсы постов. А ведь сайдбар остался такой же длинный, как и был. Получается эдакая куцая урезанная страница с кучей пустого пространства.

Можно, конечно, выводить в рубриках не анонс, а полный вариант статей, но это не слишком удобно, да и поисковики могут посчитать, что слишком до фига дублирующих страниц на сайте.

Есть более простое и элегантное решение. В код файла functions.php шаблона нужно добавить следующий код (до закрывающего тега ?>)

Читать далее »

15.11.2013 | Рубрика: CSS3 | 1 Комментарий
Тэги: CSS3, Metro стиль, Верстка, плоский дизайн, современная верстка, стильная тень

На днях наткнулся на стильный сайт blueman.com выполненный в современном плоском дизайне а ля Metro. Мне весьма понравилась менюшка на этом сайте. А именно то, как выполнена падающая широкая тень от плашек. Явно на CSS3. Поковырялся в коде и нашел довольно остроумный способ создания такой широкой тени средствами CSS3.

На самом деле фишка очень простая. Тень как бы наращивается постепенно путем задания множества значений одного и того же цвета, но разной толщины. По нарастающей. Т.е. сначала тень в 1 пиксель, затем в 2, потом в 3 и так далее. В результате получается правильная широкая падающая тень под 45°

Читать далее »