Недавно на одном из моих любимых форумов была задачка о том, как реализовать следующую идею с картинкой: сделать рамку (или обрезать углы у изображения, как вам приятнее и понятнее : ) с круглыми углами, при условии, что размер картинки неизвестен.
Сразу подмечу, что в данном примере использовалась графика.
Способов создания круглых углов очень много, использования графики, и заканчивая
попиксельным выравниванием. За основу я взял способ, придуманный Adam'ом Kalsey'ем, (по крайней мере, на его сайте я наткнулся на такую конструкцию), по созданию круглых углов у блоков.
Итак, приступим. Для начала нам понадобятся сами углы, рисуем четыре прозрачных гифа.
Используются четыре блока roundcont-это блок-контейнер, куда помещены остальные элементы-это два блока с углами:roundtop-это для верхних углов и roundbottom-для нижних, блок img для картинки.
Далее дело техники: помещаем все в блок-контейнер, прописываем ему свойство float, т.к. мы не знаем заранее ширину картинки, то при помощи свойства float достигнем того, чтобы блок принимал ширину по содержимому. Для блока с картинкой задаем отрицательные поля, на высоту блоков с углами.
Во внутренние блоки вкладываем картинку-уголок, выровненную по левому краю, и задаем бэгграундом другой уголок в правом углу. При помощи z-index перекрываем изображение.
css:
.roundcont {
width: auto;
float:left;
margin:10px;
z-index:10;}
.roundtop { z-index:10;
background: url(i/tr.gif) no-repeat top right;
position:relative;}
.roundbottom {
background: url(i/br.gif) no-repeat top right;
z-index:10;
position: relative;}
*html .roundbottom{position: static;}/*хак для IE6*/
img.corner {
width: 14px;
height: 16px;
border: none;
display: block !important;
}
.img{ margin:-16px 0;}
В Internet Explorer (в 7-ом не проверял) пропадает бэгграунд у нижнего блока, а вместе с ним и наш уголок. Проблема решается хаком *html.
Если случается писать хак, лучше пользоваться условными комментариями.
code:
<div class="roundcont">
<div class="roundtop">
<img src="i/tl.gif" alt="" width="14" height="16" class="corner" />
</div>
<div class="img">
<img src="i/flower.jpg" width="200px" height="180px" alt="" />
</div>
<div class="roundbottom">
<img src="i/bl.gif" alt="" width="11" height="12" class="corner" />
</div>
</div>
В результате This Page Is Valid XHTML 1.0 Transitional!, прекрасно работает в FF1.5, IE6, Opera8.5, Opera9.
Минусом кажется то, что блок все-таки имеет свойство float, но это легко решить вложенностью div'ов.
Labels: css, xhtml
Наконец то установил ИЕ-7 (очень долго отнекивался и отмахивался,жадничал трафик на скачивание дистрибутива), ну а вместе с ней и его младших братьев. Теперь имею полный боекомплект браузеров от майкрософт.
Наша оккупационная армия выражает особый respect pepelsbey’ю за то, что сводил нас в зоопарк и
иностранным товарищам за рассказ про condcom и версию IE пять-пятьтыщ ;)
