- Оформление HTML-заголовков с помощью CSS
- Как убрать непонятный отступ снизу картинки, находящейся в блоке или ячейке.
- Горизонтальное и вертикальное выравнивание по центру(vertical-align: middle) для div с помощью html и css
- Как задать значения минимальной или максимальной ширины или высоты (min-width, max-width, min-height, max-height) для ie.
- Как написать свойства css, работающие только в IE (хаки для ie6 и ie7).
- Как вставить прозрачный и полупрозрачный png в ie6
- Делаем рамки и закругленные углы с помощью html и css.
Оформление HTML-заголовков с помощью CSS
Между дизайнерами и верстальщиками часто возникают проблемы из-за того, что невозможно сверстать дизайн сайта так, чтобы готовый HTML/CSS код выглядел точно так же, как исходная картинка. Эти проблемы будут всегда, даже после того, как все популярные браузеры будут поддерживать HTML-5 и CSS-3, ведь любая технология имеет ограничения, а фантазия дизайнера — нет.
Один из таких случаев — креатив с оформлением текстов или заголовков. Как дизайнер, могу сказать, что оформление заголовков — очень важный момент в разработке дизайна любого сайта. Как верстальщик, могу сказать, что свойства CSS, предназначенные для оформления текстов и заголовков на HTML/CSS, можно пересчитать по пальцам. В итоге приходится либо упрощать дизайн, либо делать заголовки — о боже! — картинками.
Но на самом деле, есть и компромиссные решения, которые будут устраивать обе стороны. Несколько конкретных примеров я и приведу в этой статье.
Оформление HTML-заголовков в стиле web 2.0 на чистом CSS без картинок
Преимущества этого метода очевидны. А какие получаются заголовки — загляденье. Суть метода сводится к наложению полупрозрачного блока на основной текст. Цвета, фоны, размеры и прочие элементы оформления заголовков добавить по вкусу.
Поэкспериментировав с этим методом, можно сделать много очень красивых вещей. Например, используя несколько дополнительных элементов с разной степенью прозрачности, можно перекрасить текст в полосочку или создать градиент.
Пример 1. Заголовок в стиле web 2.0
HTML:
CSS:
font: normal 27px tahoma;
position: relative;
background: #000;
color: #0cf;
padding: 10px 0px;
}
h3#example span {
position: absolute;
top: 29px;
left: 0;
width: 100%;
height: 15px;
background: #000; /* цвет накладываемого блока, должен совпадать с цветом фона основного блока */
overflow: hidden;
opacity: 0.45;
filter: alpha(opacity=45);
}
Недостатки метода:
- Использование неструктурных элементов
- Часть текста, находящаяся под полупрозрачным блоком, не будет выделяться курсором
Оформление HTML-заголовков на CSS с использованием картинок
Этот метод похож на предыдущий. Разница в том, что на этот раз мы будем использовать для наложения не просто полупрозрачный блок, а картинку. В качестве картинки можно взять любой узор, имеющий в своём спектре только один цвет (цвет фона). При этом степень прозрачности разных пикселей картинки может быть любая (например, это может быть градиент от стопроцентной непрозрачности до стопроцентной прозрачности).
Для простоты в нижеследующем примере оформления заголовков я буду использовать картинку формата GIF, не имеющую полупрозрачных областей. Если же такие области вам нужны, суть метода не изменится, то нужно будет написать дополнительный CSS для отображения полупрозрачных PNG-картинок в IE.
Пример 2. Оформление заголовка узорами
HTML:
CSS:
font: normal 27px tahoma;
position: relative;
background: #000;
color: #0cf;
padding: 10px 0px;
}
h3#example2 span {
position: absolute;
top: 15px;
left: 0;
width: 100%;
height: 30px;
background: url(lines.gif); /* картинка-узор */
overflow: hidden;
opacity: 0.60;
filter: alpha(opacity=60);/
}
Само собой разумеется, с помощью этого метода можно не только штриховать текст, но и задавать ему любую другую текстуру (металлический блеск, градиент, зернистость, в цветочек и т.д.), что даёт огромные возможности для верстальщиков реализовать идеи дизайнеров.