FAQ Создание рамки

Администратор · Регистрация: 27.02.2009

Cпособ создания рамки для изображения.

Нужный эффект достигается благодаря наличию пустого тега span перед изображением. Но обо всём по порядку...

Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css;

Вставьте в этот файл следующий код (подробнее о командах - в коде):

PHP код:



/* Задание стилей для всей изображения */
.bord {
    margin: 50px;
    position: relative; /* Важно! */
}

/* Задание стилей для рамки */
.bord span {
    width: 200px; /* Задание размеров рамки */
    height: 150px;
    display: block;
    position: absolute; /* Важно! */
    top: -9px; /* Задание отклонения рамки */
    left: -12px;
    background: url(2.png) no-repeat; /* Задание отображения рамки, как фона */
}

Дабы лицезреть работу стилей, создадим в той же директории html-файл и, например, вставим туда такой код:

PHP код:



<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.bord span { behavior: url(iepngfix.htc);}
}
</style>
<![endif]-->
</head>
<body>
<div class="bord">
    <span></span><img src="1.jpg" alt="" />
</div>
</body>
</html>

Сохраняем и смотрим, что получилось.

Заключение и поправки

Как известно, наш "любимый" браузер IE 7 не поддерживает прозрачность *.png. Эта проблема решается довольно просто: был создан специальный скрипт для устранения этой проблемы. Мы вставили его следующим образом:

PHP код:



<!--[if lt IE 7]>
<style type="text/css">
.bord span { behavior: url(iepngfix.htc);}
}
</style>
<![endif]-->

Итак, нам удалось добавить рамочку к изображению, идеально расположить её и добиться полной кроссбраузерности.

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
FAQ Создание прозрачных объектов	Vector	HTML, CSS	1	21.07.2014 11:23
FAQ Создание горизонтального меню	Vector	HTML, CSS	0	18.01.2010 22:54
FAQ Создание нумерованного списка	Vector	HTML, CSS	0	18.01.2010 22:49
FAQ Создание градиентного текста	Vector	HTML, CSS	0	18.01.2010 22:43
FAQ Создание собственного хостинга	Vector	nginx	4	22.06.2009 18:31