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

фишки для оформления блога
Простые решения для выделения участков текста с помощью 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(http://4.bp.blogspot.com/-qpVGdBSTCAE/VAYW72tSAMI/AAAAAAAADs0/smydgNxSRso/s1600/v-gol.ru%2Blamp3.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(http://4.bp.blogspot.com/-rAJrF3SnsjQ/VAYYiG1e4wI/AAAAAAAADtA/wfGpd4ycGvk/s1600/v-gol.ru%2Blamp3.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(http://3.bp.blogspot.com/-LMbBa-hftgk/VAXu4JiJroI/AAAAAAAADrg/So_6Z9vsaRk/s1600/v-gol.ru%2Bseksi.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(http://1.bp.blogspot.com/-KSgXD2ADjDY/VAXzXu02EiI/AAAAAAAADrs/ysjaH8g1Da4/s1600/v-gol.ru%2Bseksi.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(http://3.bp.blogspot.com/-d4iPaPxiXmo/VAySpFQwE9I/AAAAAAAADu8/SjtWK_wYny4/s1600/v-gol.ru%2Blamp2.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(http://1.bp.blogspot.com/-eK1fGk9u8XI/VAyPRYU6HRI/AAAAAAAADuw/VA5NxA_g57Q/s1600/v-gol.ru%2Bbla%2Bbla.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

2 комментария:

  1. Анонимный4/9/14

    Любезный автор, не балуйтесь тестом, оставьте это дело кулинарам!
    В переводе на русский - название статьи исправьте, пожалуйста... и пробелы после запятых не забудьте поставить :)

    ОтветитьУдалить
  2. Ошибки в тексте если они и есть не столь важны.Важно чтобы костюмчик сидел.

    ОтветитьУдалить