Двойна рамка
от Fuedo - Уеб дизайн енциклопедия
Искам в началото да отбележа че този метод работи(за съжаление) само за снимки. Така че ако се надявате да сложите двоина рамка около div тук няма да видите това :).
Започваме с HTML-а свсем упростен за да е ясен примера. Да отбележа само че трябва да сложите валиден Doctype за да не влезнете в quirks mode. Така няма да работи в IE. Та ето го HTML-a:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="http://imeleon.com/photo/184/robin_on_a_branch_thumb.jpg">
</body>
</html>
Съвсем прост HTML. Каква е магията... Слагаме една рамка около снимката с CSS, а втората рамка идва като зададем padding на снимката.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style>
img{
border:2px solid red;
padding:5px;
}
</style>
</head>
<body>
<img src="http://imeleon.com/photo/184/robin_on_a_branch_thumb.jpg">
</body>
</html>
За да контролираме цвета на вътрешната рамка само трябва да зададем фон на снимката.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style>
img{
border:2px solid red;
padding:5px;
background:blue;
}
</style>
</head>
<body>
<img src="http://imeleon.com/photo/184/robin_on_a_branch_thumb.jpg">
</body>
</html>
Може да направите нещо още по яко... фона да не е цвят а да е снимка. Например онея наклонените на 45 градуса черти дето рпеди бяха много модерни :). Ето примерче:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style>
img{
border:2px solid red;
padding:15px;
background:url(http://fuedo.com/images/bg1.gif);
}
</style>
</head>
<body>
<img src="http://imeleon.com/photo/184/robin_on_a_branch_thumb.jpg">
</body>
</html>
Ами общо взето това е :). Не забравяйте, че можете да зададете двойна рамка с Border-style:double; ама изобщо не е същото.
Успех!
Admin
Искам да благодаря за хуабавата снимка която ни беше предоставена учтиво от Петър Мичев :-).
