Наш очередной урок CSS, посвящён одному из самых простых и, пожалуй, самому удобному способу создания рамки для изображения.
Нужный эффект достигается благодаря наличию пустого тега span перед изображением. Но, обо всём по порядку...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):
/*
=============================================================
© 2008 Ваш текст(кто,что)Урок CSS №16. Создание рамки
style.css - Набор стилей для урока
=============================================================
*/
/* Задание стилей для всей изображения */
.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; /* Задание отображения рамки, как фона */
}
3) Чтобы увидеть работу стилей, создадим в той же директории html файл и, например, вставим туда такой код:
<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>
4) Сохраняем и смотрим, что получилось.
Как известно, наш "любимый" браузер IE 6 не поддерживает прозрачность png. Эта проблема решается довольно просто: был создан специальный скрипт для устранения этой проблемы. Мы вставили его следующим образом:
<!--[if lt IE 7]>
<style type="text/css">
.bord span { behavior: url(iepngfix.htc);}
}
</style>
<![endif]-->
Итак, нам удалось добавить рамочку к изображению, идеально расположить её и добиться полной кроссбраузерности.
| 
Главная