Блог

Главная - Вопросы по программированию - можете ли вы создать 3d рельефный прямоугольник с помощью CSS или вам нужно использовать изображения?

можете ли вы создать 3d рельефный прямоугольник с помощью CSS или вам нужно использовать изображения?

#javascript #html #css #3d

#javascript #HTML #css #3D

Вопрос:

Я пытаюсь создать небольшую трехмерную рельефную «панель» или «коробку» на своем сайте. Я нашел аналогичный пример на этой странице, где у них есть эта страница с окнами, которые «подняты» со страницы с полем заголовка. В этом случае они используют изображение для всего блока, и только текст в середине является фактическим текстом на странице.

Я хотел посмотреть, можно ли это воспроизвести с помощью CSS, или мне действительно следует перейти к photoshop для такого рода вещей и сделать все это в виде изображений. (если нужно)

у кого-нибудь есть какие-либо предложения о том, можно ли это воспроизвести, используя чистый html и css, javascript.

В качестве второго вопроса, если это нужно сделать с помощью photoshop и изображений, есть ли какое-нибудь хорошее место для получения photoshop «templates», где вам не пришлось бы собирать это с нуля.

введите описание изображения здесь

Ответ №1:

Вот нечто подобное с использованием CSS3 для причудливых деталей:

http://jsfiddle.net/RrfJb / (просмотр в браузере WebKit, таком как Chrome)

Это можно заставить работать во «всех браузерах».

  • Для Firefox это так же просто, как добавить -moz префиксные версии.
  • Для IE используйте CSS3 PIE для градиентов и тени от прямоугольника, а также этот инструмент для создания transform CSS.
 .box {
    width: 300px;
    position: relative;
    background: -webkit-linear-gradient(top, #888 0%,#fff 30%);
    box-shadow: 3px 3px 5px #666;
    padding: 12px
}
.box > h2 {
    background: #ccc;
    float: left;
    padding: 8px 16px;
    position: relative;
    top: -18px;
    left: -21px;
    -webkit-transform: rotate(-2deg);
    font: bold 18px sans-serif
}
.box > p {
    clear: both
}
<div class="box">
    <h2>Welcome to website!</h2>
    <p>Lorem ipsum dolor sit amet..</p>
</div>

Комментарии:

1. спасибо . . когда вы говорите, что это можно заставить работать во «всех браузерах», означает ли это, что приведенный выше код работает только в каком-то браузере . . мне, к сожалению, нужно поддерживать все в качестве требования (включая IE6 : ( )

2. Я буквально только что обновил свой ответ, включив указатели на то, как заставить его работать в IE6.

3. Каково ваше точное определение «всех браузеров» / «всего»?

Ответ №2:

Вы можете многое сделать с CSS3, включая поворот, градиенты и различные шрифты. Недостатком является то, что ничто из этого, кроме встраивания шрифтов, не работает в IE без различных сложностей.

На самом деле вы не можете создавать нерегулярные растровые изображения, такие как смятие бумаги, поэтому для этого вам понадобится изображение.

Прямо сейчас я бы сказал, что если все данные не поступают из CMS, то лучший способ — использовать для этого изображение и, возможно, встроить шрифт для названия внизу.

Вторым лучшим способом было бы просто использовать бумажное изображение, а для всего остального использовать CSS3. Взгляните на http://css3please.com / для удобного просмотра различных свойств.

Ответ №3:

При использовании CSS3 вы всегда должны помнить, что люди, использующие старые браузеры, могут не увидеть то, что вы задумали. Лучше всего использовать его постепенно. Ознакомьтесь с этой статьей. В этом конкретном случае CC3 может добавить падающую тень. Итак, если вы согласны с тем, что люди, использующие старые браузеры, не могут видеть тень прямоугольника, используйте CSS3. В противном случае используйте изображение.