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

Доброго времени суток, читатели и гости блога. Небольшая шпаргалка о том, как заключить текст или отдельный его фрагмент в красивую рамку с заголовком или пояснением. Про различные стили рамок, для тех кто пропустил, можно прочитать здесь. В примере, который рассмотрим сегодня, необходимо сначала сделать 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


7 комментариев:

  1. Принято в копилку. Спасибо!

    ОтветитьУдалить
  2. Спасибо!!! Понравилось:))

    ОтветитьУдалить
    Ответы
    1. Пожалуйста Лариса. Вы любите такие фишки. Спасибо что заглядываете.

      Удалить
  3. Этот комментарий был удален автором.

    ОтветитьУдалить
  4. Интересно.. Обязательно попробую! Спасибо..

    ОтветитьУдалить
    Ответы
    1. Если есть где применить, почему бы и не попробовать. Спасибо.

      Удалить

Пользовательский поиск
Foto Saya
My Photo