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

Адаптивная верстка сайта — уроки для начинающих. Все чаще читатели блога Вебсовет задают в своих письмах вопросы по адаптивной верстке сайта. Окей! Раз есть вопросы, то вэлкам! Этим постом я открываю новую рубрику на блоге, посвященную исключительно адаптивной верстке сайтов. Для тех, кто не в танке и впервые слышит об этой новомодной (с 2012 года) […]

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

Сегодня речь пойдет о свойстве content: "."; из обоймы правил CSS. Наверняка вам уже попадалась эта странная конструкция в некоторых файлах стилей. Само по себе свойство content весьма полезное и, как следует из названия, внедряет на страницу сайта некое содержимое. Так зачем же внедрять туда обычную точку? Следует упомянуть, что свойство content применяется к псевдоэлементам […]

Простая но симпатичная подсветка полей формы ввода данных в стиле Twitter. При установке курсора мыши в поле, оно подсвечивается голубым сиянием. Гламурненько ччорт! :) Возможно, кто-то захочет прикрутить такую фишку у себя на блоге в форме ввода комментариев. Вэлкам! Код достаточно простой и использует последние веяния CSS3: input[type=text], textarea { outline: none; padding: 5px; margin: […]

Швейная строчка — довольно часто встречающийся элемент современного дизайна веб-сайтов. Обычно ее рисуют в Photoshop. Но с приходом CSS3 появилась возможность выполнить такую строчку при помощи кода, без использования каких-либо изображений. Сделать это весьма просто. Блоку с текстом вначале задается пунктирная рамка (border) толщиной в 2 пикселя. Затем при помощи новых правил, входящих в состав […]