О рамках для текста я уже писала в статье Рамки для текста на Блоггер, и вот снова нашла несколько новых, с довольно интересным оформлением.
Рамками можно оформить цитаты, объявления и другую важную информацию.
В кодах можно многое поменять. Об этом напишу под каждым кодом подробнее.
Добавлять код нужно в редакторе блога, в режиме HTML.
Рамки
1 рамка
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6oGkQV1Ts7fBn8fEVs2acqgv20SKFElfVUfqaLiuBgL6hzwUGB787-j0F4ugSR6HnxHoUxJwf8bYqglvBfpMsBq2WLJYnuMns0In70vhvBsP1qmn0h062ptwir24jlLseZUUKqe6N-aShYNKx7t0HcgfJ_5oTf0bUmZ4-OVy_A1vtGwIYoo7wlLZWsg/s280-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0528-2022.jpg)
<div class="zig-zag">Ваш текст</div><style>.zig-zag {margin: 32px 0;background: #337AB7;text-align: center;color: #FFF;font-size: 22px;}.zig-zag:before {background: linear-gradient(-45deg, #337AB7 16px, transparent 0), linear-gradient(45deg, #337AB7 16px, transparent 0);background-position: left top;bottom: 22px;}.zig-zag:after {background: linear-gradient(-45deg, transparent 16px, #337AB7 0), linear-gradient(45deg, transparent 16px, #337AB7 0);background-repeat: repeat-x;background-position: left bottom;top: 22px;}.zig-zag:before,.zig-zag:after {background-repeat: repeat-x;background-size: 22px;content: "";display: block;height: 22px;left:0;width: 100%;position: relative;}</style>
Красным цветом в коде выделила цвет фона
Синим — цвет текста
Зелёным — размер текста
Рамка 2
![Рамка 2 Рамка 2](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1gQ2QYc8FMpganE5zgDFJCpHD9pF7bFu89HtSzIP9RUQHTiZaNqdhdN2Zt6jAy-02JJUHwxN1hRnax1rCnRPB4se1NKbhyXm_jgIPBHpDLQivNCZGHORtU7iwxWcjDF6ZW7uZ46mvOSZcoxFyis7ZV3P6-3CEl2fp15q201BLW5jNj3HQJwEkAQpsOg/w320-h55-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0529-2022.jpg)
g-inside">Ваш текст</div><style>.zigzag-inside {margin: 32px 0;text-align: center;color: #FFF;font-size: 22px;}.zigzag-inside {position: relative;width: 600px;height: 100px;background-image: url(ваша картинка);}.zigzag-inside:before {content: "";position: absolute;top: 0;left: 0;right: 0;height: 4px;background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C0%204%2C4%208%2C0%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");}.zigzag-inside:after {content: "";position: absolute;bottom: 0;left: 0;right: 0;height: 4px;background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C4%204%2C0%208%2C4%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");}</style>
Красный — размер текста
Оранжевый — добавляете адрес вашей картинки
Зелёный — ширина и высота фона картинки
Рамка 3
![Рамка 3 Рамка 3](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh94xjPrEkpVFINKgYAmtzsHnn33IwTwCtvSwfCxLMvhSclCGtFDWpoI3cegL4YUJ181eUDtNKVw4bCNOCsB6GeLxjVqHvYBtQ-MAaaEUBzt8urb4_L2CHOyZLSgcxrT00a68VonHUWiD8-3CIDQT4rbe0h2wyPivyG0MsyGGAyxLoyI_P9j_TIw11-iw/w320-h43-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0533-2022.jpg)
<div class="container">Ваш текст</div><style>.container {margin: 32px 0;text-align: center;color: #FFF;font-size: 22px;}.container {position: relative;padding: 8px 8px 32px 8px;background: #8f64ff;}.container:after {background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);background-position: left-bottom;background-repeat: repeat-x;background-size: 32px 32px;content: " ";display: block;position: absolute;bottom: 0px;left: 0px;width: 100%;height: 32px;}</style>
Красный — цвет текста
Синий — размер текста
Зелёный — фон рамки
Менять в кодах можно и другие числовые значения, тогда зигзаг будет выглядеть по другому.
Например, в первом коде я поменяла некоторые цифры и получилось вот так:
![зиг-заг зиг-заг](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuYaMWsDwXXCvtcgavvVnTYmGx0kmtDxD2imwnC_XMmdS5KgtNGNOia0nORx4KFKhl4LbJVl0KJQua-nuod13mBJTKg5doAQENxhpKIiARNR_SW9Q3Dy_Gknlpb2Q1tmR-8S0__hTS1l3c99kEAZi5F0L-LyUceycYDDNvvPvREi8kQ59mB96RYpsBHQ/w320-h57-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0531-2022.jpg)
А во втором коде картинку можно брать любую, например узоры, абстракцию:
![узоры узоры](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp8OIHT_1vpjvKZGxYDEGCNkv-cun4hnkk7pjzWuN0o0Kk9GJ5lIrLQSii7QtY9pnFs4ocNox46m043qd6ohLNAmdHZkcy9NdevNLFHJ039_Q4ZmzvRfKwa5944c_Sn-RweeemP6WmEFuYmJWN8aNPTFPGOfKPDp1axUewOR4sXHmmUsepFlpR8imWpw/w320-h56-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0532-2022.jpg)
Удобнее всего менять цвет, размер и другие числовые значения в коде на тестовом блоге или в визуальном редакторе.
Комментарии со спамом удаляются.