Красивые бывают не только девушки

красивые блоги девушки


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




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

Код для появления на странице красиво выделенного окна состоит из двух частей,но первая часть CSS будет установлена на постоянной основе в шаблон блога,в ту часть кода,где содержаться стили,а именно перед закрывающим тегом ]]></b:skin>.



Установка кода CSS для оформления страниц.

<style type="text/css">
#v-golru {
margin: auto;
width: 95%;
height: 400px ;
padding: 2px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}#v-golru h2{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 10px -18px 10px -18px;
padding: 5px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}#v-golru h2:before {
content: '';
position: absolute;
bottom: -10px;
left: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}#v-golru h2:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}#Context{
width: 95%;
height:400px ;
margin: 5px auto;
padding: 15px 10px 0px 20px;
font-family:Arial, sans-serif;
background: #fff url()no-repeat 10px 10px;
color:#000;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}     </style>





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

<div id="v-golru"><h2>Текст заголовка</h2></div>
<div id="Context">Весь контент страницы</div>

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






Отправить комментарий