Все заметки с меткой «css»
Простая таблица цен при помощи CSS
В сегодняшней статье я расскажу, как создать простую таблицу цен используя лишь CSS. Таблица цен является одним из наиболее широко используемых элементов в веб-дизайне, особенно для веб-сайтов, предлагающих различные виды товаров или услуг, например, мы можем видеть таблицу цен на сайтах, предлагающих хостинг услуги или коммерческую поддержку программного обеспечения, онлайн-консультации и т.д.
Читать дальше24 онлайн-сервиса для сжатия и оптимизации CSS кода
Один из наиболее важных факторов при разработке веб-сайта является скорость загрузки страницы. Загружать страницу нужно как можно быстрее, особенно в случае больших сайтов с большим количеством CSS кода, в котором более быстрая загрузка означает повышение удобства использования и удовлетворенности пользователей.
Инструменты для сжатия CSS улучшают время загрузки, удалив комментарии из кода, включающих каждую команду в одной строке, удаление "белого пространства" - пробелов и переносов строк.
Имейте в виду, если вы действительно хотите, увеличить производительность веб-сайта, после стадии разработки, вы должны пойти еще дальше и использовать GZIP сжатие и кэширование ваших файлов. Но об этом мы поговорим в следующей статье!
Попробуйте воспользоваться одним из этих онлайн сервисов по оптимизации CSS файлов (некоторые из них также предлагают и JavaScript сжатие), и посмотреть, как они могут ускорить время отклика веб-сайт и сохранить пропускную способность.
Читать дальшеТонкости использования селекторов аттрибутов в CSS
CSS может связываться с HTML элементами используя любые из его
атрибутов. Вы наверняка знаете о классах и ID. Проверим это в HTML:
Этот один элемент имеет три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-line) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:<h2 id="first-title" class="magical" rel="friend">David Walsh</h2>
h2[rel=friend] {
/* woohoo! */
}[rel=external] — Точное совпадение значения атрибута
В примере выше, мы использовали атрибут со значением «friend» у элемента h2. CSS селектор, который мы написали, нацелен на элемент h2, потому что его атрибут rel имеет значение «friend». Другими словами, знак равенства означает точное соответствие. Рассмотрим другие примеры. Читать дальшеПлавно исчезающая панель навигации на CSS и jQuery
В сегодняшней статье я расскажу Вам, как создать верхнюю панель навигации, которая становится полупрозрачной при прокрутке страницы вниз.
Идея заключается в фиксированной панели навигации, которая следует за пользователем и плавно становится полупрозрачной, когда он прокручивает страницу. Когда пользователь наводит курсор на эту панель навигации, она становится непрозрачной.
Внутри навигация у нас будет несколько ссылок, поле поиска и две кнопки в виде стрелочек, которые позволяют пользователю перейти к верхней или нижней части страницы.
Выглядеть все это будет так
Читать дальшеОформление гиперссылок
Оформление гиперссылок вещь ответственная. Посетитель должен четко знать, что является ссылкой, а что нет. Вообще оформлением ссылок обязан заниматься дизайнер, потому что отдавать это на откуп верстальщику опасно.
Если ссылка находится в тексте, то подчеркивание крайне желательно, потому что оно однозначно ассоциируется с гиперссылкой. Часто его и оставляют, ограничиваясь только заданием другого цвета. Как вы знаете, по умолчанию ссылки имеют синий цвет. Многие специалисты по юзабилити яростно советуют не изменять прекрасный и привычный синий цвет, но эстетический взгляд дизайнера не в силах смотреть на синие ссылки и всячески старается поменять цвет. В этом вопросе я с дизайнерами солидарен.
Обычно различные эффекты применяют при наведении мыши на ссылку: изменяют цвет и фон, убирают подчеркивание, задают рамки и т.п. Имеет смысл познакомиться с эффектами поближе.
Начнем с того, что в CSS имеется псевдо-класс hover, который позволяет задавать стили для состояния при наведении курсора мыши на элемент. Например, ссылки у нас черного цвета, а при наведении курсора мыши надо изменять цвет на оранжевый. Такое поведение реализуется двумя объявлениями...
Читать дальше
