Стильный блок для текста.

Стильный блок для выделения текста с закруглёнными углами и приподнятыми краями.Простое решение для привлечения внимания к определённым участкам текста на страницы или для оформления цитат и высказываний.Примеры использования и другие визуальные эффекты оформления дизайна.

Установка кода блока для выделения текста.

Выделить и обозначить наиболее важные участки текста бывает порой просто необходимо.Заставить посетителя остановить свой взгляд на нужном нам участке текста можно с помощью стильного блока,где можно вставить, наиболее важные на ваш взгляд,фрагменты текста,ссылки или другую важную информацию.Реализовать эту идею и создать необходимый эффект можно с использованием CSS.Установить данный код CSS необходимо в шаблон блога перед закрывающим тегом ]]></b:skin> убрав теги <style>....<style> для Блогспот или в папку стилей style.css для Вордпресс.

<style>
#boxv-g
{
 position: relative;
 width: 50%;
 background: #E4E4EE;
 -moz-border-radius: 7px;
 border-radius: 7px;
 padding: 2em 1.5em;
 color: rgba(0,0,0, .8);
 text-shadow: 0 1px 0 #fff;
 line-height: 1.5;
 margin: 60px auto;box-shadow: 1px 1px 10px 3px #D7DFF6,
            0 0 4px rgba(0, 0, 0, .5) inset;
}
        #boxv-g:before, #boxv-g:after
{
 z-index: -1;
 position: absolute;
 content: "";
 bottom: 5px;
 left: 10px;
 width: 60%;
 top: 80%;
 max-width:300px;
 background: rgba(0, 0, 0, 0.7);
 -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
 -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
 box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
 -webkit-transform: rotate(-3deg);  
 -moz-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 -ms-transform: rotate(-3deg);
 transform: rotate(-3deg);
}

#boxv-g:after
{
 -webkit-transform: rotate(3deg);
 -moz-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 -ms-transform: rotate(3deg);
 transform: rotate(3deg);
 right: 10px;
 left: auto;
}
</style>

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

<div id="boxv-g">Ваш текст ссылки картинки</div>

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

---