"Заплатки" на CSS при оформлении текста.

Всем привет. Предложу сегодня несколько вариантов "заплаток" с использованием CSS, которые могут пригодится для оформления участка текста в сообщении. Возможно, вы пропустили статью как оформить текст в красивую рамку.
За основу возьмём такой код CSS. И сделаем простую разметку HTML.

Код CSS.

saplata {
    height:150px;
    width:430px;
    padding: 5px 10px 5px 10px;
    margin: 15px;
    background: #669999 ;
    border: 2px dashed rgba(255,255,255,0.7 );
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 0 4px #669999 , 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 4px #669999  , 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 4px #669999 , 2px 1px 6px 4px rgba(10,10,0,.5);
        }

Создадим простую разметку HTML.

Код HTML.

<div class=" saplata">ваш текст </div>

Сейчас первый код CSS заключим в теги.

<style>тут весь код </style>

В редакторе сообщений переходим в режим HTML и в нужном месте устанавливаем его. Сразу ниже его (или выше) пишем второй код HTML с текстом. Получаем такое.

Ой, прохудилась!

С помощью небольших изменений в стилях сделаем совершенно разные варианты своих "заплаток".

вот так, прохудилось.

Код для розовой.

<style>.saplata1 {
    height:150px;
    width:430px;
    padding: 5px 10px 5px 10px;
    margin: 15px;
    background: #FF9999 ;
    border: 3px dotted rgba(128, 8, 42, 1);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 0 4px #FF9999 , 2px 1px 4px 4px rgba(140, 13, 64, 1);
    -webkit-box-shadow: 0 0 0 4px #FF9999, 2px 1px 4px 4px rgba(140, 13, 64, 1);
    box-shadow: 0 0 0 4px #FF9999, 2px 1px 6px 4pxrgba(140, 13, 64, 1);
        }</style>
<div class=" saplata1">
вот так, прохудилось</div>

текст текст

Код для зелёной.

<style>.saplata2 {
    height:150px;
    width:430px;
    padding: 5px 10px 5px 10px;
    margin: 15px;
    background: #99CC66 ;
    border: 5px dashed rgba(18, 128, 8, 1);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 0 4px #99CC66, 3px 2px 5px 5px rgba(7, 99, 10, 1);
    -webkit-box-shadow: 0 0 0 4px #99CC66, 3px 2px 5px 5px rgba(7, 99, 10, 1);
    box-shadow: 0 0 0 4px # 99CC66, 3px 2px 7px 5px rgba(7, 99, 10, 1);
        }</style>
<div class=" saplata2">
текст текст</div>

Ещё раз прохудилось

Код для серой.

<style>.saplata3 {
    height:150px;
    width:430px;
    padding: 10px 15px 10px 15px;
    margin: 15px;
    background: #ebf3f7 ;
    border: 2px dashed rgba(8, 32, 128, 1);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 0 4px #ebf3f7, 3px 2px 5px 5px rgba(13, 140, 47, 1);
    -webkit-box-shadow: 0 0 0 4px #ebf3f7, 3px 2px 5px 5px rgba(13, 140, 47, 1);
    box-shadow: 0 0 0 4px #ebf3f7, 3px 2px 7px 5px rgba(13, 140, 47, 1);
        }</style>
<div class=" saplata3">
вот так, прохудилось</div>

Если вы обратили внимание, то менялись только сами фоны, свойства  border: 5px dashed rgba(18, 128, 8, 1); - стили и цветовые варианты. А так же значения box-shadow, отвечающие за тень всего блока в целом. Если хватит фантазии попробуйте сделать что-то своё.

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

Сегодня всё. Спасибо, что заглядываете в мои шпаргалки. Увидимся.

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

Введите Ваш email