Простая таблица цен при помощи CSS

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

Создаем эффект скольжения (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». Другими словами, знак равенства означает точное соответствие. Рассмотрим другие примеры.