Это цитата сообщения tomishka Оригинальное сообщение

Как самому сделать рамочку для текста

Сначала приведу скелетик рамочки, о которой пойдет речь дальше.

<center><div style="border: 3px solid #КОД ЦВЕТА ОКАНТОВКИ НИЖНЕГО ФОНА; padding:10px; width: 700px; background: #КОД ЦВЕТА НИЖНЕГО ФОНА; border-radius: 12px; box-shadow: inset 5px 6px 3px rgba(227,249,252,0.4), 3px 3px 4px rgba(0,0,0,0.6);"><div style="border: 3px solid #КОД ЦВЕТА ОКАНТОВКИ ВЕРХНЕГО ФОНА; padding:10px; width: px; background: #КОД ЦВЕТА ВЕРХНЕГО ФОНА; border-radius: 12px; box-shadow: inset 5px 6px 3px rgba(227,249,252,0.4), 3px 3px 4px rgba(0,0,0,0.6); "><br /><span style="font-family: Georgia; color:#КОД ЦВЕТА ТЕКСТА; font-size: 19px;"><i> Здесь будет ваш текст<br /><br /></i></span></div></div></center>

Теперь посмотрим на рамочку, сделанную по нашему скелетику, с кодами двух разных цветов интернета, взятыми для фона и окантовки.

Здесь будет ваш текст

<center><div style="border: 3px solid #cdc5bf; padding:10px; width: 700px; background: #eee5de; border-radius: 12px; box-shadow: inset 5px 6px 3px rgba(227,249,252,0.4), 3px 3px 4px rgba(0,0,0,0.6);"><div style="border: 3px solid #cdc5bf; padding:10px; width: px; background: #eee5de; border-radius: 12px; box-shadow: inset 5px 6px 3px rgba(227,249,252,0.4), 3px 3px 4px rgba(0,0,0,0.6); "><br /><span style="font-family: Georgia; color:#664400; font-size: 19px;"><i> Здесь будет ваш текст<br /><br /></i></span></div></div></center>

На мой взгляд, это одна из самых простых рамочек, которую может для себя сделать каждый желающий. Для этого потребуется найти коды двух цветов интернета ( при желании можно взять больше ), один из которых будет использован для фона, а другой для окантовки. Как видим, в рамочке оба фона и обе окантовки одного цвета, но можно, если будет желание, сделать рамочку и с разными фонами. Тогда придется подобрать коды большего количества цветов интернета. Чтобы рамочка с текстом смотрелась лучше, желательно взять подходящий цвет для текста. Вот и всё. Таблицу цветов я нашла, зайдя по адресу http://www.stm.dp.ua/web-design/color-html.php и выбрала там два понравившихся мне цвета ( один для фона, другой для окантовки ), цвет текста я взяла так, чтобы его хорошо было видно на фоне.

Здесь будет ваш текст

<center><div style="border: 3px solid #664400; padding:10px; width: 700px; background: #b4cdcd; border-radius: 12px; box-shadow: inset 5px 6px 3px rgba(227,249,252,0.4), 3px 3px 4px rgba(0,0,0,0.6);"><div style="border: 3px solid #664400; padding:10px; width: px; background: #eee5de; border-radius: 12px; box-shadow: inset 5px 6px 3px rgba(227,249,252,0.4), 3px 3px 4px rgba(0,0,0,0.6); "><br /><span style="font-family: Georgia; color:#664400; font-size: 19px;"><i> Здесь будет ваш текст<br /><br /></i></span></div></div></center>

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

Здесь будет ваш текст

<center><div style="border: 3px solid #664400; padding:10px; width: 700px; background: #b4cdcd; border-radius: 12px; box-shadow: inset 5px 6px 3px rgba(227,249,252,0.4), 3px 3px 4px rgba(0,0,0,0.6);"><div style="border: 3px solid #664400; padding:10px; width: px; background: #eee5de; border-radius: 12px; box-shadow: inset 5px 6px 3px rgba(227,249,252,0.4), 3px 3px 4px rgba(0,0,0,0.6); "><br /><span style="font-family: Georgia; color:#664400; font-size: 19px;"><i> Здесь будет ваш текст<br /><img src="//img1.liveinternet.ru/images/attach/d/3/154/476/154476663_b0.png" width="100" /><br /></i></span></div></div></center>

Здесь будет ваш текст

<center><div style="border: 3px solid #664400; padding:10px; width: 700px; background: #b4cdcd; border-radius: 12px; box-shadow: inset 5px 6px 3px rgba(227,249,252,0.4), 3px 3px 4px rgba(0,0,0,0.6);"><div style="border: 3px solid #664400; padding:10px; width: px; background: #eee5de; border-radius: 12px; box-shadow: inset 5px 6px 3px rgba(227,249,252,0.4), 3px 3px 4px rgba(0,0,0,0.6); "><br /><span style="font-family: Georgia; color:#664400; font-size: 19px;"><i> Здесь будет ваш текст<br /><img src="https://img1.liveinternet.ru/images/attach/d/3/154/231/154231617_l2.png" width="500" /><br /></i></span></div></div></center>

Скелетик украшающего элемента представлен ниже в рамочке. Украшающим элементом может быть картинка или какая-то надпись. Если возникнут вопросы, то их можно задать в комментариях, и я обязательно отвечу.

<img src="АДРЕС КАРТИНКИ" width="ШИРИНА КАРТИНКИ" />