Дизайн | Форекс блог Николая Маркелова

Дизайн

Как найти неиспользуемые стили

Лишняя пешка

Большинство веб-разработчиков в процессе работы над проектом рано или поздно сталкиваются с тем, что становится трудно определить: используются ли некоторые, прописанные ранее, стили в файлах CSS. Довольно часто подобное происходит при командной работе, когда со стилями работает несколько человек. Также бывает, что Вы меняете что-то в работе предыдущих разработчиков или производится небольшой редизайн. Таких вариантов можно ещё вспомнить много, но результат единственный — браузер обрабатывает «мертвые» селекторы.

Если таких селекторов пара-тройка — не беда. Но если код уже достаточно объёмен, то неиспользуемых селекторов наберётся приличное количество. Выявление и уборка таких стилей облегчит файлы и увеличит скорость загрузки страниц. Так что, совсем не лишним будет узнать о различных способах очистки файлов CSS.

Категория:

Дизайн

Как избавиться от обтекания содержания

Волна обтекает скалу

Нередко при создании шаблонов с помощью плавающих блоков приходится решать проблему с нерасширяющимся контейнером по размеру плавающих элементов, находящихся в нем. Чтобы исправить это, существует множество методов, но самым быстрым и легким является использование свойства overflow .

Категория:

Дизайн

Тени с помощью CSS3

Тень в лесу

Используя CSS3, у разработчиков сайтов появилась возможность реализовывать тени для изображений или других элементов без использования дополнительных картинок. Разнообразные тени повсеместно используются в дизайне, потому что они подчёркивают реалистичность изображения. Раньше для этого в основном применялись соответсвующие картинки.

На самом деле реализовать тени средствами CSS достаточно легко и просто, определив необходимые правила соответсвующему «div». Дополнительная разметка теперь не требуется, достаточно создать дополнительные псевдоэлементы, помещённые за основным объектом. Сделать это можно с помощью замечательного свойства «box-shadow».

Категория:

Дизайн

Не игнорируйте «:focus»

Фокусировка

Зачастую при написании CSS-файла для нового веб-проекта используются псевдокласс «:hover», который отвечает за состояние объекта, когда на него наведена мышь. Здесь нередко возникает ошибка из-за небрежности в написании правил для :hover без выполнения псевдокласса «:focus», который устанавливает фокус на объекте страницы. Насколько глубокими будут проблемы от подобного недосмотра зависит от назначенных действий для :hover.

Категория:

Дизайн

@-правила в CSS

Собака

Собственно, разговор пойдет о правилах @charset, @import, @media и весьма популяром @font-face, позволяющем применять свои шрифты в сайтостроении.

Категория:

Дизайн

Меню «Аккордеон»

Аккордеон

Вы, наверное, не раз сталкивались с различными видами меню, каждый из которых имеет свой красивый дизайн и возможности. Сегодня мы рассмотрим выпадающее меню типа «аккордеон». Сначала не забудьте скачать исходники файлов, они пригодятся нам в ходе данного урока.

Категория:

Дизайн

Использование средств CSS и jQuery для центрирования блока

Ровный центр

Если вы уже занимались версткой веб-страниц, то вам, вероятнее всего, приходилось сталкиваться с проблемой центрирования блоков (div) по горизонтали и вертикали. Самый применяемый метод центрирования – это, несомненно, стили CSS.

Для начала вы должны определиться с шириной и высотой используемого блока. При горизонтальном центрировании с помощью CSS необходимо поставить для левой и правой границы значение auto (как показано на рисунке).

Категория:

Дизайн