HTML and CSS
HTML and CSS
{Лаборатория экстремальной web-верстки...}
Текст под прозрачным фоном Закругляем без графики...
Текст под прозрачным фоном
В большинстве случаев подобного рода изыск нужен только для того, чтобы при отключенной графике на ее месте появлялся текст.
В основном это касается шапки сайта.
Ситуация выглядит следующим образом:
- Основная часть header состоит из одного или нескольких графических файлов и имеет неоднородный фон, скажем градиент.
- На этом фоне расположен логотип – картинка или картинка с текстом на прозрачной подложке.
- Необходимо спрятать текст под логотипом.
- Логотип и текст появляющийся при отключенной графике должны быть кликабельны.
<body>
<div id="header">
<h1>
<a href="путь к главной сайта">Имя сайта</a>
<span onclick="location.href='путь к главной сайта'"></span>
</h1>
</div>
#header {
background:url(header.jpg) no-repeat;position:relative;
}
#header h1 {position:absolute;top:XXpx;left:XXpx;}
#header h1 a {font:bold XXpx Georgia;}
#header h1 span {
background:url(logo.png) no-repeat;
position:absolute;top:XXpx;left:XXpx;
}
Данный код лишь частный случай, все справедливо, если только logo.png имеет цвет подложки, совпадающий с header.jpg или в отсутствии header.jpg с его фоновой заливкой.
Скриншоты:
Нижний скриншот наглядно показывает проблему, если бы графический текст был бы выполнен на прозрачной подложке.
Возможно, решение существует и оно намного проще моего, но то, что удалось сделать за пару минут, полностью меня устроило и искать, что-либо не было необходимости.
Чип и Дейл, а вернее абсолютное позиционирование спешит на помощь.
<body>
<a class="title_site" href="путь к главной сайта">Имя сайта</a>
<div id="header">
<h1 onclick="location.href='путь к главной сайта'"></h1>
</div>
#header {
background:url(header.jpg) no-repeat;position:relative;
}
#header h1 {
background:url(logo.png) no-repeat;
position:absolute;top:XXpx;left:XXpx;
}
a.title_site {
font:bold XXpx Georgia;position:absolute;
top:XXpx;left:XXpx;
}
Для стилей в первом и во втором случае ряд параметров не указан, в частности это высота и ширина для logo.png и цвет фоновой заливки header’a.
Закругляем без графики...
Закругленные углы у блоков, что-то в этом есть притягивающее и манящее, другое дело, как и каким образом, все сделано.
Если оставить в стороне использование графики, что в большинстве случаев приводит к тому, что макет страницы будет фиксированным по ширине, сложности ее нарезки и расфасовки полученных кусков в пустые дополнительные контейнеры, а при изменении цветовой гаммы, на любом отдельно взятом участке все операции придется повторить и не единожды, то…
И начинаются поиски более простых решений – html-код и стили.
Понятно, что говорить о полноценном использовании CSS3 преждевременно, но в будущем это без всяких сомнений значительно упростит не легкую жизнь верстальщика.
Посмотрим скриншот:
Верхний блок с прямыми углами, нижний с небольшими закруглениями, на первый взгляд практически не заметными и сразу же возникает мысль, а стоит ли огород городить?
Может быть, и не стоит, но посмотрим следующий скриншот:
Как видим закругление углов пусть и не очень значительное, выглядит более привлекательным чем, если бы были просто прямые углы.
О технике создания подобного трюка писал ранее, теперь же рассмотрим все в расширенном варианте.
В общем случае потребуется три контейнера вложенных друг в друга:
<div><!-- Блок #1 -->
<div><!-- Блок #2 -->
<div><!-- Блок #3 -->
...
</div>
</div>
</div>
Каждый блок отвечает за прорисовку необходимых нам border’ов:
первый – вертикальные
второй – верхний
третий – нижний
На этом собственно теория и заканчивается, по линку данному выше можно ознакомится со стилями, мы же перейдем к более практичным вещам.
Скриншот горизонтального меню уже посмотрели, посмотрим html-код:
<ul> <li><a href="#">Home</a></li> </ul>
Для полного счастья не хватает одного контейнера, рисуем :)
<ul> <li><a href="#"><b>Home</b></a></li> </ul>
Не на много все сложнее для вертикального меню:
<ul> <li class="nolink"><em><em>Раздел № 1</em></em></li> <li><a href="#"><b>Кнопка 1</b></a></li> </ul>
Форма поиска по сайту, куда без нее :)
Собственно статья из-за поиска и написана.
Время, от времени занимаюсь адаптацией тем WordPress под скрипты Мастера Lasto и очень часто форма поиска в графическом исполнении или без оного, никак не вписывается в то, что получается в конечном итоге, а рисовать графику это последнее дело…
Без проблем в эти милые закругления можно вставить и картинку при помощи:
background:url(...);
Без тестовой страницы не обойтись.
Плюсы данного подхода:
- Блок не имеет фиксированной ширины
- Легко можно сменить цвет окантовки блока
- При отключенной графике ничего не теряем
- Фоновая заливка или графика, размноженная по x или y в контейнере любая
Минусы:
- Толщина border’a не может быть больше 1px
- Нет возможности изменить радиус закругления
- Дополнительные контейнеры
- В меню на hover трудно получить смену цвета border’a, по крайней мере, пока у меня не получилось :)
