Портал для веб-мастера - Зарабатывай деньги с www.inetex.ru

Создать сайт

Раскрутка сайта

Photoshop

Разное

Электрооборудование оптом со склада, usb разветвитель.
Rambler's Top100
Главная
 

Скругление рамки с эффектом 3D

Date 24.07.2008
Author: admin

В данном уроке я расскажу Вам, как сделать скругление углов у квадратной рамки, и чтобы она имела вид 3D. Смотрится очень красиво, но, если Вы захотите сделать свои цвета, придется немного попыхтеть. Ну что ж, начнем.

Для начала скопируйте нижеприведенный текст в файл style.css и подключите данный файл командой
к сайту (при условии, что style.css будет в корневой папке сайта):

.raised { background:transparent; width:50%; }
.raised h1, .raised p { margin:0 10px; }
.raised p { padding-bottom:0.5em; }
.raised .b1, .raised .b2, .raised .b3, .raised .b4,
.raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b
{ display:block; overflow:hidden; font-size:1px; }
.raised .b1, .raised .b2, .raised .b3, .raised .b1b,
.raised .b2b, .raised .b3b { height:1px; }
.raised .b2
{ background:#EBEEF0; border-left:1px solid #fff; border-right:1px solid #eee; }
.raised .b3

{ background:#EBEEF0; border-left:1px solid #fff; border-right:1px solid #ddd; }
.raised .b4

{ background:#EBEEF0; border-left:1px solid #fff; border-right:1px solid #aaa; }
.raised .b4b
{ background:#EBEEF0; border-left:1px solid #eee; border-right:1px solid #999; }
.raised .b3b
{ background:#EBEEF0; border-left:1px solid #ddd; border-right:1px solid #999; }
.raised .b2b
{ background:#EBEEF0; border-left:1px solid #aaa; border-right:1px solid #999; }
.raised .b1 { margin:0 5px; background:#fff; }
.raised .b2, .raised .b2b { margin:0 3px; border-width:0 2px; }
.raised .b3, .raised .b3b { margin:0 2px; }
.raised .b4, .raised .b4b { height:2px; margin:0 1px; }
.raised .b1b { margin:0 5px; background:#999; }
.raised .boxcontent {
display:block; background:#EBEEF0; border-left:1px solid #fff;
border-right:1px solid #999; }

Затем скопируйте этот текст на HTML страницу в нужное место:

<div class="raised"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="boxcontent"> <p>С 3D-эффектом</p> </div> <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b> </div>

Ну вот и все, рамка готова.

Авторство данного кода неизвестно
»


Поиск

Вход для пользователей

Навигация

Сейчас на сайте

Сейчас на сайте 0 пользователей и 2 гостя.



Облако тегов