Логин (e-mail) Пароль

Записи в разделе «Верстка сайтов»

RSS

Версия браузера за номером 3.6 научилась вертикально выравнивать содержимое текстовых полей (input type="text") строго по центру. Каюсь, заметил совсем недавно. По-видимому, на такое поведение повлиял подросший движок Gecko 1.9.2. Вот небольшой пример для наглядности:

далее...

Тег kbd

7 июня 2010 г.

Рассказ о работе различных программ бывает полезно сопроводить применяемыми клавиатурными сочетаниями. Оказывается, В HTML 5 (как и в HTML 4) для таких случаев существует специальный парный тег — <kbd>. Добавив CSS-правила, можно добиться некоего подобия настоящих клавиш:

далее...

Недавно обратил внимание, что Internet Explorer как-то не так отрисовывает угловые стыки, сформированные однопиксельными рамками разного цвета. Заинтересовался по поводу остальных браузеров. Оказалось, каждый рендерит уголки по-своему. В итоге, "нарисовались" два варианта. В первом случае ширина рамок равна 1px. Во-втором она больше 1px:

Стыковка разноцветных рамок в прямых углах

Намедни во френдфидике, в группе «Учимся верстать» материализовался вопрос, как вертикально выровнять блок произвольной высоты по центру окна браузера без использования таблицы в разметке. Решение не ново; возможно, вам пригодится.

HTML:

<div id="wrapper">
	<div id="middle">
		<p>Lorem ipsum...</p>
	</div>
</div>

CSS:


* {margin: 0; padding: 0;}
html, body {height: 100%;}
body {display: table;}
#wrapper {display: table-cell; vertical-align: middle;}
#middle {color: white; background: gray;}

Посмотрите, все просто. Во всех современных браузерах конструкция работоспособна; IE 6,7 к названным не относятся.

Праздник на носу и оставлять что‑то недосказанным в уходящем году совершенно не хочется. В одном из предыдущих постов я начал выяснять как убрать подчеркивание (основанное на свойстве border) для ссылки, содержащей рисунок.

Помимо прочего, при использовании описанного метода придется держать в голове, что контент (текст), следующий за таким рисунком будет подниматься к нему на величину указанного отрицательного нижнего поля. Пусть это может не бросаться в глаза, но все же.

далее...

Что такое RGBA-цвет?

Не открою секрета если скажу, что необходимый цветовой оттенок создается в CSS путем смешивания в необходимых пропорциях красного зеленого и синего. Существует, правда, один нюанс — какой бы цвет мы не выбрали, он всегда будет сплошным и непрозрачным.

Плоские, сплошные RGB-цвета

далее...

Изменения стиля подчеркивания ссылок (цвет, внешний вид, толщина) — слишком заманчивая возможность, чтобы ей не воспользоваться. Код для такого случая предельно прост:

далее...