Всем привет. Предложу сегодня несколько вариантов "заплаток" с использованием CSS, которые могут пригодится для оформления участка текста в сообщении. Возможно, вы пропустили статью как оформить текст в красивую рамку.
За основу возьмём такой код CSS. И сделаем простую разметку HTML.
Код CSS.
Создадим простую разметку HTML.
Код HTML.
<div class=" saplata">ваш текст </div>
Сейчас первый код CSS заключим в теги.
<style>тут весь код </style>
В редакторе сообщений переходим в режим HTML и в нужном месте устанавливаем его. Сразу ниже его (или выше) пишем второй код HTML с текстом. Получаем такое.
С помощью небольших изменений в стилях сделаем совершенно разные варианты своих "заплаток".
Код для зелёной.
Код для серой.
За основу возьмём такой код CSS. И сделаем простую разметку HTML.

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);
}
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>
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>
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>
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:здесь . И универсальный конвертер цветов , который для начинающих вполне подойдёт.
Сегодня всё. Спасибо, что заглядываете в мои шпаргалки. Увидимся.
В помощь могу предложить стили границ border-style:
Сегодня всё. Спасибо, что заглядываете в мои шпаргалки. Увидимся.
здесь можно оформить подписку на новые шпаргалки
красиво получается
ОтветитьУдалить