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