Оформление текста,цитат,блоков

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

Варианты оформления блоков

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

Код CSS для установки.

<style type="text/css">
.vg1 {
overflow:auto;width:503px;height:200px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWVcLh_fuWmc_Yw_4fk6BalXr3HWm-y2NEnSAJaWe7q_z08yvJUbDRkSAjl5KdSEtvHi4_O1Ksc36pFZ3CIutefySElLUoUCjCFb82JbtaYUHqD0-fD61dVpJbmQ43DgkyEYB2No0NtDU/s1600/v-gol.ru+lamp3.JPG) repeat-y top left;
border : 1px solid #ccc;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.vg1:hover{
background : #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLypObPSeJuXj-boP4eLPtIKF5KCsL0Qp9ep_WnMkZGroExTiDrIeESXMybChh45dNd8KnlWHSFvKVdJEde_D9drFsZVf8tBCURvDo9m1orlKdiRd1v70oKoj_Yp8spZ4THkbLxU56HYBu/s1600/v-gol.ru+lamp3.JPG) repeat-y top left;
color:#fff;
border : 1px solid #ccc;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}
.vg2 {
overflow:auto;width:400px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#7A6417;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(http://1.bp.blogspot.com/-GYYwrX408NQ/Tv7JAIEwfMI/AAAAAAAACHc/w8IcSIvTsmc/s1600/000.JPG) repeat-y top left;
border : 1px solid #D8C37D;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.vg2:hover{
border : 1px solid #D8C37D;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.vg3 {
overflow:auto;width:280px;height:222px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#000000;
margin : 15px 5px 15px 15px;
padding : 15px 5px 10px 115px;
clear : both;
list-style-type : none;
background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitWUigHE14LSISqscbqm3bIxmqAf1uJUWP0CK46Lw3Gls-ByxOinRXt6DiItww8b2t3IAV5YuD6bOU8VMLHj1ZeLESMgX7gSLVGJ6Cbjds1snHZ7J5hlzKEFi2OYEQoPH1bloOsUSgh9U/s1600/v-gol.ru+seksi.jpg) repeat-y top left;
border : 1px solid #ffffff;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.vg3:hover{
background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0L8B49jffVPLbJg9NXCZfbPSRCZ4OTFGOmzCuKEmmXrWZ_5EGfRpv_18BpxdiswC1bhi9PXhfriJTjxVKp6gtiI-OqvK_3Ymd6zIV4qmmoIXPiVw2Y143kkpMhwODdwFb4E3dEXIr6oc/s1600/v-gol.ru+seksi.jpg) repeat-y top left;
color:#000000;
border : 1px solid #ffffff;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}
.vg4 {
overflow:auto;width:450px;height:153px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000  repeat-y top left;
border : 1px  solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.vg4:hover{
overflow:auto;width:450px;height:153px;
background : #000000 url(http://1.bp.blogspot.com/-6DJrGfUAwYE/TwA0s105QdI/AAAAAAAACKQ/8D6UBp5JMsY/s1600/1.JPG) repeat-y top left;
color:#eee;
text-shadow:1px 1px 1px #000;
text-transform: capitalize;
border : 1px solid #000000;
border-left:20px solid #CCC;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}
.vg5 {
overflow:auto;width:400px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 60px;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(http://1.bp.blogspot.com/-2ZYI5ROjqm0/TwGVjrytNjI/AAAAAAAACLs/AzzX67VYjCw/s1600/1.JPG) repeat-y top left;
border : 1px solid #ccc;
border-right:15px solid rgba(0, 0, 0, .100);
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}
.vg5:hover{
overflow:auto;width:400px;height:auto;
background : #F5F3F3 url(http://1.bp.blogspot.com/-2ZYI5ROjqm0/TwGVjrytNjI/AAAAAAAACLs/AzzX67VYjCw/s1600/1.JPG) repeat-y top left;
border : 1px solid #ccc;
border-right:15px solid rgba(0, 0, 0, .100);
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}
.vg6:{
overflow:auto;width:500px;height:200px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 10px;
clear : both;
list-style-type : none;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCHqz9rApUDtAIvKiLebKPzi4EgIA8CqhqZrSgnebqEKeyzR2sQ7N4MegN9Y0wWaME_tld8czdX0yDuTDb-afsIDFBGhWxwJfFvZU2g84mvhdXr4TB4-Y6CqgqkMzNxWprniCRF9iAHp4z/s1600/v-gol.ru+lamp2.jpg) repeat-y top left;
border : 1px solid #ccc;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.vg6:hover{
background : #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1B6-bq9qPoR-LNBagJpDiEYFzfgmuDJ1uZ3lT-DNJrgByI86pXR_1BLHYjz8cf7xvcb8Z3orm7HSSqkWy57ZjVg2Cv-TDAfnxUR_Msqko71FptUrBT9sYycjS_8cieQ2l9mAeckSY1Xqa/s1600/v-gol.ru+bla+bla.jpg) repeat-y top left;
color:#fff;
border : 1px solid #ccc;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}
</style>

А дальше скопировать себе в блокнот шесть див контейнеров,каждый из которых соответствует своему блоку и при необходимости нужный участок кода после написание статьи заключить в такого вида блок
<div class="vg2">Фрагмент текста</div>
Здесь на странице шесть вариантов оформления. вариант№2 vg2

<div class="vg1">Текст</div>
<div class="vg2">Текст</div>
<div class="vg3">Текст</div>
<div class="vg4">Текст</div>
<div class="vg5">Текст</div>
<div class="vg6">Текст</div>

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

вариант№3 vg3

вариант№4 vg4

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

вариант№5 vg5

вариант№6 vg6

Читать ещё по теме:
Слайдер-открывашка
Как срубить фишку?