Ленточка для блога с активной ссылкой.

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

Сразу предлагаю вам полностью готовый код и некоторые моменты разберём ниже.

<div class="lenta ">
<div class="lenta_blok ">
<a href=" адрес страницы, куда ведёт ссылка">
Заголовок на ленте</a></div>
Текст блока</div>

<style>{
    margin: auto;
    padding: 0;
}
.lenta {
 background:#CCCCCC ;
    border: 2px solid #339900 ;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
      -23px 0 20px -23px rgba(0, 0, 0, 0.8),
      23px 0 20px -23px rgba(0, 0, 0, 0.8),
      0 0 40px rgba(0, 0, 0, 0.1) inset;
    display: block;
    margin-top: 20px;
    padding: 2px;
}
.lenta .lenta_blok {
    background: none repeat scroll 0 0 #339900 ;
    color: #FFFFFF;
    font-weight: bold;
    line-height:30px;
    margin: 5px 0 5px -10px;
    padding-left: 30px;
    position:relative ;
    text-transform: uppercase;
    width: 90%;
}
.lenta_blok :before {
    border-color: #7C0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 5px 0 0 5px;
    bottom: -5px;
    content: "";
    display: block;
    height: 0;
    left: 0;
    position: absolute;
    width: 0px;
}
.lenta p {margin: 5px;}</style>

Синим цветом я выделила свойства основного блока class="lenta ".  class="lenta_blok " отвечает за саму ленточку. При желании вы можете поменять в стилях этих блоков значения на свои.

Если не нужна кликабельная ссылка в заголовке, в коде HTML удалите то, что выделено красным цветом.

<div class="lenta ">
<div class="lenta_blok ">
<a href=" адрес страницы, куда ведёт ссылка">
Заголовок на ленте</a></div>
Текст блока</div>

Весь код, как обычно вставляем в нужном месте в редакторе сообщений, перейдя в режим HTML. 

Как оформить текст в красивую рамку.

Как оригинально оформить участок текста.
Опять про красивое оформление текста.

Если возникнут какие-то вопросы при оформлении ленты спрашивайте в комментариях. И сегодня всё. Спасибо за внимание и удачи всем.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email