Рамочки с прошивкой для текста и цитат на CSS



Здравствуйте друзья, читатели и гости. Ранее я уже писала об оформлении текста в разные рамочки. В содержании блога, ярлык рамки, почитайте статьи о формах рамок, фонах и другую информацию.

Сегодня вернемся к оформлению рамок. Очень мне нравятся рамочки с прошивкой, получается как двойная рамка, с прошивкой внутри.

Несколько примеров оформления

За спиной говорят что угодно, а в лицо-что выгодно...

Молодость бывает только раз, потом требуются уже другие оправдания...

Умные мысли всегда приходят поздно, дурные - всегда вовремя...


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

Стиль CSS для рамки

.code {
padding:20px; *// отступ вложенного текста от рамки
 margin: 10px; *// отступ рамки от внешних элементов  
 background: #03b4cc; *// фон рамки
      font-size: 18px; *// размер шрифта
   border: 2px dashed #fff; *// размер, форма и цвет рамки прошивки
   border-radius: 10px; *//  радиус скругления углов рамки для IE9 и Opera 
-moz-border-radius: 10px; * //радиус скругления углов рамки для Firefox
-webkit-border-radius: 10px; *// радиус скругления углов рамки для Safari и Chrome
   box-shadow: 0 0 0 4px #03b4cc, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); *// смещение, размер и цвет тени рамки для Опера
 -moz-box-shadow: 0 0 0 4px #03b4cc, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);*//  смещение, размер и цвет тени рамки для Firefox 
 -webkit-box-shadow: 0 0 0 4px #03b4cc, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); *// смещение, размер и цвет тени рамки для Safari и Chrome
   text-shadow: -1px -1px #d7b56d; *.// смещение, размер и цвет тени текста
   font-weight: normal; *// шрифт нормальный

Выделенный жирным код цвета должен быть одинаковым. Для всех страниц блога стиль CSS нужно вставить шаблон изменить шаблон выше строки ]]></b:skin>. Далее выбранный текст на странице заключить в код:

<div class="code">текст-текст-текст</div>

Для гаджетов и отдельной страницы по вкладке HTML

<div class"code">текст-текст-текст</div>
<style>код CSS</style>

Самый простой вариант без тени и скругления углов, используя свойство outline

.code {
    background: #f8f4cb;url(адрес картинки.jpg); *// цвет фона
    outline: 5px dashed #3d290e; *// пунктирная рамка
    outline-offset: -10px; *// выводим рамку внутри элемента
    padding: 10px; *// отступ пунктира от полей
    min-height: 50px; *// минимальная высота
font-size:16px;*// размер шрифта
color: #0e5198; *// цвет шрифта
padding:30px 0 0 35px; *// положение текста
   }

Здесь в CSS мы не используем свойство border для рамки, также нет скругления углов. На элемент outline не действует радиус закругления углов, заданный с помощью border-radius. С помощью свойства outline-offset выводим пунктирную рамку внутри блока.

При использовании стилей CSS все мои подсказки удалите. Включайте свои дизайнерские способности, рамку (прошивку) можно настроить любой формы. Посмотрите пост Как выделить часть текста в рамку. Удачи Вам. Если что-то непонятно или не будет получаться, обращайтесь в комментариях или контактная форма. Всего доброго.

Предыдущий пост: Подчеркивание заголовков используя CSS для блоггер;

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 10/30/2016 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *