Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 16. Создание рамки
Не нравится(-) 21 Нравится(+)
29-06-2008, 13:34 - GZ Design (Уроки CSS)
Урок CSS 16. Создание рамки

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

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок 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]-->


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


Идея: Web Designer Wall
Модернизация и перевод: Российская школа CSS
Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.xx; Opera 7.хх - 9.xx
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 15 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 24434 раз(а) и написали 11 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Май 2017    »
ПнВтСрЧтПтСбВс
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!