Рубрика "CSS-верстка" содержит 61 статью / показаны: 1-10

FAQ на тегах details и summary с анимацией и микроразметкой

На сайтах часто встречаются блоки с ответами на часто задаваемые вопросы. Ответы при этом по умолчанию скрыты, а при клике на вопрос ответ раскрывается. Такого типа блок еще называют “аккордеоном”. Я видел разные варианты HTML-разметки “аккордеона”. Чаще всего, к сожалению, используется просто тег ...

Верстка заголовка с горизонтальной линией слева и справа от текста

35 комментариев

Время от времени возникает необходимость сверстать необычный заголовок, в котором слева и/или справа от текста проходит горизонтальная линия, занимающая все свободное пространство. Выглядит это следующим образом (живой пример): Заголовок с выравниванием слева Заголовок с выравниванием по центру Заголовок с выравниванием справа Раньше для ...

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

105 комментариев

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не ...

Верстка красивых тегов для сайта + бонус

25 комментариев

Верстка красивых тегов для сайта + бонус

Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить заведомо длинное изображение тега, которое с уверенностью подойдет для тегов разной ...

Зеленый свет CSS-свойствам при верстке под IE8 и выше

26 комментариев

Зеленый свет CSS-свойствам при верстке под IE8 и выше

Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. В связи с этим хочу составить ...

Пример верстки поисковой формы для сайта на HTML5 и CSS3

62 комментария

Пример верстки поисковой формы для сайта на HTML5 и CSS3

После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3. Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю я, как правило, под заказ, а там в ...

Пример верстки поисковой формы для сайта

56 комментариев

Пример верстки поисковой формы для сайта

Предлагаю один из возможных вариантов верстки поисковой формы для сайта, которая будет выглядеть вот так: Ее особенность заключается в том, что вся видимая часть формы — это поле ввода текста и нужно учесть, что его оформление будет меняться при получении фокуса, т.е. когда ...

Элегантная форма авторизации с использованием CSS3

38 комментариев

Элегантная форма авторизации с использованием CSS3

Продолжаю делиться версткой элементов интерфейса для сайтов. Как и в своей предыдущей статье, я взял интересный пример с сайта PremiumPixels.com и сверстал его, используя CSS3. На этот раз это форма авторизации. В дизайне этой формы используются приятные нежные цвета, поэтому выглядит она действительно ...

Красивые 3D-кнопки с помощью CSS3

56 комментариев

Красивые 3D-кнопки с помощью CSS3

Замечательная технология CSS3 позволяет в ряде случаев при оформлении сайта отказаться от использования изображений, которые заменяет чистый CSS-код. К примеру, подобным образом можно поступить с какими-либо кнопками, используемыми на сайте. Есть один замечательный дизайнерский англоязычный блог PremiumPixels.com, автор которого бесплатно делится красивыми элементами ...

Устранение проблемы увеличения межстрочного интервала в тексте при использовании графических смайлов

26 комментариев

Устранение проблемы увеличения межстрочного интервала в тексте при использовании графических смайлов

Я предпочитаю при написании текста использовать текстовые смайлы, а некоторые блоггеры любят графические (у WordPress, например, есть специальная опция, которая автоматически преобразует текстовые смайлы в картинки). Иногда (это зависит от размера картинки) в результате вставки картинок-смайлов в текст происходит неприятная глазу вещь — ...