
Код очень простой и устанавливается прямо в редакторе сообщений в режиме HTML на нужном месте. Смотрите сами, о чём я веду речь.
Она несла в руках отвратительные, тревожные желтые цветы.
Черт их знает, как их зовут, но они первые почему-то появляются в Москве.
И эти цветы очень отчетливо выделялись на черном ее весеннем пальто.
Она несла желтые цветы! Нехороший цвет.
Код.
<style>.box {
width: 100%;
padding: 4px;
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); /* цветовая гамма */
border-radius: 6px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
.content {
background: #fff; /*цвет фона внутри */
padding: 12px;
font-size: 16px;/* размер шпифта */
border-radius: 6px;/* рамка */
box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
}</style>
<div class="box">
<div class="content">
<p>
Она несла в руках отвратительные, тревожные желтые цветы.
Черт их знает, как их зовут, но они первые почему-то появляются в Москве.
И эти цветы очень отчетливо выделялись на черном ее весеннем пальто.
Она несла желтые цветы! Нехороший цвет.
</p>
</div>
</div>
width: 100%;
padding: 4px;
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); /* цветовая гамма */
border-radius: 6px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
.content {
background: #fff; /*цвет фона внутри */
padding: 12px;
font-size: 16px;/* размер шпифта */
border-radius: 6px;/* рамка */
box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
}</style>
<div class="box">
<div class="content">
<p>
Она несла в руках отвратительные, тревожные желтые цветы.
Черт их знает, как их зовут, но они первые почему-то появляются в Москве.
И эти цветы очень отчетливо выделялись на черном ее весеннем пальто.
Она несла желтые цветы! Нехороший цвет.
</p>
</div>
</div>
Для картинок изменим немного стили - ширину и высоту всего блока, картинки и убираем размер шрифта. А в коде HTML заменяем текст на путь к картинке (её URL адрес). Результат.
Код примерно такой.
<style>.box1 {
width: 300px;
height: 300px;
padding:5px;
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); /* цветовая гамма */
border-radius: 6px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
.content1 {
width: 290px;
height: 290px;
background: #fff; /*цвет фона внутри */
padding: 2px;
border-radius: 6px;/* рамка */
box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
}</style>
<div class="box1">
<div class="content1">
<a href="адрес страници, куда пользователь перейдёт при клике">
<img src="адрес картинки
" /></a>
</div>
</div>
width: 300px;
height: 300px;
padding:5px;
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); /* цветовая гамма */
border-radius: 6px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
.content1 {
width: 290px;
height: 290px;
background: #fff; /*цвет фона внутри */
padding: 2px;
border-radius: 6px;/* рамка */
box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
}</style>
<div class="box1">
<div class="content1">
<a href="адрес страници, куда пользователь перейдёт при клике">
<img src="адрес картинки
" /></a>
</div>
</div>
Воспользуйтесь этой таблицей цветов. Задайте нужную ширину рамки border-radius: 6px; И замените в коде HTML мой текст. Результат можно увидеть в режиме "Просмотр".
Сегодня у меня всё. Удачи всем и до встречи.
Здесь вы можете оформить подписку на новые шпаргалки
Вика, привет. Такой вариант выглядит красиво, мягко. Правда, здесь подбор цвета тоже важен. Спасибо за шпаргалку, где-нибудь применю. Удачи!
ОтветитьУдалитьДа, Люба. С цветами тут можно играться и играться. Ну ты найдёшь конечно где применить, кто бы сомневался.
УдалитьЛюблю всякого рода украшения. Вика, как я рада, что нашла ваш блог, спасибо, что делитесь своими знаниями!
ОтветитьУдалитьСпаибо, Алла. Я люблю Вашим садом наслаждаться.
Удалить