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

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

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

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 и jQuery

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

Идея заключается в фиксированной панели навигации, которая следует за пользователем и плавно становится полупрозрачной, когда он прокручивает страницу.  Когда пользователь наводит курсор на эту панель навигации, она становится непрозрачной.

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

Выглядеть все это будет так

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

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

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

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

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

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

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