rss Twitter Facebook

Адаптивная верстка сайтов | Медиа-запросы

16.08.2014 | Рубрика: Адаптивная верстка | Комментировать
Тэги: , , , , ,

Адаптивная верстка сайтов | Медиа-запросы

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

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

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

Адаптивная верстка сайтов | Введение

14.08.2014 | Рубрика: Адаптивная верстка | Комментарии (2)
Тэги: , , , , , ,

Адаптивная верстка сайтов

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

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

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

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

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

Как вывести разное количество записей в WordPress

18.02.2014 | Рубрика: WordPress | Комментарии (4)
Тэги: , , ,

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

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

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

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

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

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

Меню с широкой тенью на CSS3

15.11.2013 | Рубрика: CSS3 | 1 Комментарий
Тэги: , , , , ,

Меню с широкой тенью на CSS3

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

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

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