На сайтах часто встречаются блоки с ответами на часто задаваемые вопросы. Ответы при этом по умолчанию скрыты, а при клике на вопрос ответ раскрывается. Такого типа блок еще называют “аккордеоном”. Я видел разные варианты HTML-разметки “аккордеона”. Чаще всего, к сожалению, используется просто тег ...
Время от времени возникает необходимость сверстать необычный заголовок, в котором слева и/или справа от текста проходит горизонтальная линия, занимающая все свободное пространство. Выглядит это следующим образом (живой пример): Заголовок с выравниванием слева Заголовок с выравниванием по центру Заголовок с выравниванием справа Раньше для ...
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не ...
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить заведомо длинное изображение тега, которое с уверенностью подойдет для тегов разной ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. В связи с этим хочу составить ...
После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3. Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю я, как правило, под заказ, а там в ...
Предлагаю один из возможных вариантов верстки поисковой формы для сайта, которая будет выглядеть вот так: Ее особенность заключается в том, что вся видимая часть формы — это поле ввода текста и нужно учесть, что его оформление будет меняться при получении фокуса, т.е. когда ...
Продолжаю делиться версткой элементов интерфейса для сайтов. Как и в своей предыдущей статье, я взял интересный пример с сайта PremiumPixels.com и сверстал его, используя CSS3. На этот раз это форма авторизации. В дизайне этой формы используются приятные нежные цвета, поэтому выглядит она действительно ...
Замечательная технология CSS3 позволяет в ряде случаев при оформлении сайта отказаться от использования изображений, которые заменяет чистый CSS-код. К примеру, подобным образом можно поступить с какими-либо кнопками, используемыми на сайте. Есть один замечательный дизайнерский англоязычный блог PremiumPixels.com, автор которого бесплатно делится красивыми элементами ...
Я предпочитаю при написании текста использовать текстовые смайлы, а некоторые блоггеры любят графические (у WordPress, например, есть специальная опция, которая автоматически преобразует текстовые смайлы в картинки). Иногда (это зависит от размера картинки) в результате вставки картинок-смайлов в текст происходит неприятная глазу вещь — ...