Как оформить текст в красивую рамку

Доброго времени суток, читатели и гости блога. Небольшая шпаргалка о том, как заключить текст или отдельный его фрагмент в красивую рамку с заголовком или пояснением. Про различные стили рамок, для тех кто пропустил, можно прочитать здесь. В примере, который рассмотрим сегодня, необходимо сначала сделать html-разметку для всего блока.
А потом, добавляя различные стили к определённому классу, будем "ваять" внешний вид.

Код HTML

<div class="ramka">
<div class="vb">
<div class="title ">
заголовок</div>
Здесь будет видимый текст, заключённый в рамку
</div>
</div>

Начинается самое интересное. Зададим всю красоту блоку.

Код CSS.

/общие стили блока /
.ramka {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px solid #CCCCCC;
    margin: 20px 0;
    padding: 1px;
    position: relative;
}
/стили самой рамки /
.ramka .vb {
    background: none;
    padding: 20px 10px 10px 20px;
}
/стили заголовка /
.ramka .title {
    background-color:#CCCCCC;
    color: #FFFFFF;
    font-weight: bold;
    left: 20px;
    padding: 7px 10px;
    position: absolute;
    top: -19px;
}

Теперь переходим в режим HTML и устанавливаем в нужном месте весь код. Обратите внимание, что код CSS заключили в теги <style>код</style>

<div class="ramka">
<div class="vb">
<div class="title ">
заголовок</div>
Здесь будет видимый текст, заключённый в рамку
</div>
</div>
 <style>.ramka {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px solid #CCCCCC;
    margin: 20px 0;
    padding: 1px;
    position: relative;
}
.ramka .vb {
    background: none;
    padding: 20px 10px 10px 20px;
}
.ramka .title {
    background-color:#CCCCCC;
    color: #FFFFFF;
    font-weight: bold;
    left: 20px;
    padding: 7px 10px;
    position: absolute;
    top: -19px;
}
</style>

Результат.

Ю.Энтин

Если меркнет свет в окошке, Hа душе скребутся кошки, Кто сумеет вам помочь И прогонит кошек прочь? Это знает всякий. Это не слова. Преданней собаки нету существа!

Поколдуем ещё со стилями. Меняем цвет названия и всего блока заголовка, задаём тень, округление углов. Получаем.

<style>.ramka1{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    box-shadow: 3px 3px #66CC00 , 8px 8px #336600 ;
    margin: 20px 5px;
    padding: 15px;
    position: relative;
}
.ramka1.vb {
    background: none;
    padding: 20px 10px 10px 20px;
}
.ramka1.title {
    background-color:#336600;
    color: #FFF ;
    font-weight: bold;
    left: 20px;
    padding: 7px 10px;
    position: absolute;
    top: -19px;
} </style>

Результат.

Ю.Энтин

Если меркнет свет в окошке, Hа душе скребутся кошки, Кто сумеет вам помочь И прогонит кошек прочь? Это знает всякий. Это не слова. Преданней собаки нету существа! Преданней собаки, ласковей собаки, Веселей собаки - нету существа!

Представьте себе, как вы хотели видеть у себя такое оформление и смело поиграйтесь со стилями  CSS. Тут хватило бы фантазии. А если устраивают готовые решения просто копируйте готовый код и устанавливайте в сообщении блога. Если предпочтёте второй вариант, не забудьте в первом коде HTML поменять  "ramka" на "ramka1".

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email