Трёхмерный эффект, сделанный бордерами

2008-01-22 / Рубрика: 3D

Демонстрация необычного использования CSS-свойств.

Пример 3D-эффекта

Chris Hester — Design Detector

источник

Интересный способ имитации трёхмерного эффекта продемонстрировал Крис Хестер. Самое сложное в создании подобного эффекта — подобрать цвета.

Границы могут применяться для всех HTML-тегов

#display {
width: 200px;
}
 
.outer {
 width: 170px;
 margin:0;
 padding:0 0 12px 0;
 border-top:10px solid #fc0;
 border-left:29px solid #f55;
 border-bottom:14px solid #fc0;
 border-right:29px solid #f55;
 background-color:#ffc;
 font-size: 90%;
}
 
.inner {
 width:130px;
 margin: 0;
 padding: 0 0 10px 0;
 border-width: 10px 20px 8px 20px;
 border-style: solid;
 border-color: #fc0 #d33;
 background-color:#ffc;
}
 
.inner p {
 width: 90px;
 margin:0;
 padding:10px;
 border-width: 0 10px;
 border-style: solid;
 border-color: #b11;
 background-color:#fff;
 color: #000;
 text-align: center;
}
 
.inner p.one {
 border-top: 9px solid #fc0;
 border-bottom: 6px solid #c88;
 }
 
.inner p.two {
 border-top: 10px solid #633;
 border-bottom: 6px solid #c88;
	}
 
.inner p.three {
 border-top: 10px solid #633;
 border-bottom: 6px solid #fc0;
 }
<div id="display">
<div class="outer">
<div class="inner">
<p class="one">Пример 3D-эффекта</p>
<p class="two">Chris Hester — <a hrеf="http://www.designdetector.com/" title="designdetector.com" target="_blank">Design Detector</a></p>
<p class="three"><a hrеf="http://www.designdetector.com/tips/3DBorderDemo.html" title="demo here" target="_blank">источник</a></p>
</div>
</div>
</div>

Автор — Design Detector

Дата написания — 2008-01-22

Перевод — Владимир Полухин

Отлично.

Отлично. Рисование программными средствами это очень интересно. Позволю себе показать Вам свое. Правда это не CSS(и не 3D) а простой HTML/ http://ars.2samurais.com/opus1/indexgopp.htm

Кодер |

Кодер | murzilko@inbox.ru | x28.ru | IP: 91.197.128.4

Буквально на днях кто-то уже поднимал эту тему, можно в поиске по блогам пошариться. А автор читал, что другие пишут?

И к чему у меня в блоге такой говнокоммент?

Что за х? Вы уже

Что за х? Вы уже второй, кто это пишет здесь!

Не знаю кто =)

Не знаю кто =) Ваш блог такими методами качает.

Способ,

Способ, конечно, интересный ... но он совершенно не эстетично выглядит. Или есть красивые примеры его применения?

Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Сохранить установки".