Создаем эффект скольжения (LavaLamp) в меню

Не так давно решил добавить динамики в верхнее меню на своем сайте. Вы наверное обратили внимание на то, как скользит выделенная область элемента в верхнем меню на этом сайте.

Если данный эффект показался Вам привлекательным, то сегодняшняя статья будет Вам полезной, т.к. в ней я решил рассказать, как создаются такие менюшки.

Для того, чтобы не изобретать велосипед, первым делом я решил поискать готовые решения в Интернете и как оказалось не зря. Существует специальный плагин для jQuery, который называется LavaLamp.

В этой статье мы разберем создание динамического меню с использованием плагина LavaLamp в деталях.

Коллекция заготовок, для навигации по страницам сайта

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

Данная коллекция содержит 24 очень красивых навигации по страницам сайта, сделанных при помощи CSS. Представлены примеры навигации, которые используются на таких ресурсах как Digg, Yahoo, Meneame, Flickr, YouTube и другие. 2 из них сделаны с применением изображения.

Пять способов ускорить время загрузки страниц

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

24 онлайн-сервиса для сжатия и оптимизации CSS кода

Один из наиболее важных факторов при разработке веб-сайта является скорость загрузки страницы.  Загружать страницу нужно как можно быстрее, особенно в случае больших сайтов с большим количеством CSS кода, в котором более быстрая загрузка означает повышение удобства использования и удовлетворенности пользователей.

Инструменты для сжатия CSS улучшают время загрузки, удалив комментарии из кода, включающих каждую команду в одной строке, удаление "белого пространства" -  пробелов и переносов строк.

Имейте в виду, если вы действительно хотите, увеличить производительность веб-сайта, после стадии разработки, вы должны пойти еще дальше и использовать GZIP сжатие и кэширование ваших файлов. Но об этом мы поговорим в следующей статье!

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

Тонкости использования селекторов аттрибутов в CSS

CSS может связываться с HTML элементами используя любые из его атрибутов. Вы наверняка знаете о классах и ID. Проверим это в HTML:

<h2 id="first-title" class="magical" rel="friend">David Walsh</h2>

Этот один элемент имеет три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-line) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:

h2[rel=friend] {
  /* woohoo! */
}

Существует множество селекторов атрибутов, мы не будем рассматривать все возможные варианты, рассмотрим наиболее полезные сценарии, встречающиеся в реальном мире.

[rel=external] — Точное совпадение значения атрибута

В примере выше, мы использовали атрибут со значением «friend» у элемента h2. CSS селектор, который мы написали, нацелен на элемент h2, потому что его атрибут rel имеет значение «friend». Другими словами, знак равенства означает точное соответствие. Рассмотрим другие примеры.

Оформление гиперссылок

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

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

Обычно различные эффекты применяют при наведении мыши на ссылку: изменяют цвет и фон, убирают подчеркивание, задают рамки и т.п. Имеет смысл познакомиться с эффектами поближе.

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