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

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

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

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

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

Честно говоря, я «слегка» припозднился с данной статьей, т.к. то, что в ней изложено, можно было применять на практике уже довольно давно. Но лучше поздно, чем никогда, тем более, что я уверен, что среди моих читателей найдутся и те, кто не пользуется этим ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эмуляция псевдо-селектора :nth-child() в IE7 и IE8

Эмуляция псевдо-селектора :nth-child() в IE7 и IE8

Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т.е. одна строка, к примеру, с белым фоном, вторая с серым, третья опять с белым и так далее. При этом часто нет ...