Как округлить углы изображения в блоге на Blogger
Это может быть полезно любому желающему кто захочет сделать закругление
углов изображения в своем блоге.
Для автоматизации процесса есть проверенный скрипт который генерирует
код border-radius и позволяет осуществлять округление углов
изображения. Закругление углов картинки при этом создаётся кроссбраузерное и будет работать даже в старых версиях Opera, Chrom, IE, Mozila. Для этого вам в коде скрипта необходимо указать число желаемого округления углов картинки в пикселах. Далее в заходим в свой блог "Дизайн" - "Добавить гаджет" - "HTML/JavaScript", вставляем
там получившийся код. Чтобы гаджет не "светился" заголовок оставляем пустым. Готово: закругление углов изображения выполнено.
В любой
момент можно удалить гаджет и округление
углов изображения вернется к старым настройкам. Так же
код можно вставить в шаблон если первый вариант вам не подошёл (только обязательно сохраните перед изменением старый вариант шаблона).
Степень закругления углов рамки: 12px
Вставляем в гаджет следующий код:
<!-- Код для закругления углов изображений -->
<style>
.post-body img
{
padding: 8px;
background: #ffffff;
border: 1px solid #b6b5b5;
-webkit-border-radius:12px!important;
-moz-border-radius:12px!important;
border-radius:12px!important;
}
</style>
<!--/Конец кода для закругления углов изображений -->
.post-body img
{
padding: 8px;
background: #ffffff;
border: 1px solid #b6b5b5;
-webkit-border-radius:12px!important;
-moz-border-radius:12px!important;
border-radius:12px!important;
}
</style>
<!--/Конец кода для закругления углов изображений -->
Кодом предусмотрено закругление углов картинки в 12 пикселов (12px). Заменив на нужное значение все дюжины, выделенные красным цветом, можно сделать округление углов картинки больше или меньше.
Дополнительно в коде присутствуют ещё полезные переменные для рамки с бордюром вокруг изображения:
padding: 8px; - ширирина рамки вокруг изображения.
background: #ffffff; - цвет рамки вокруг изображения.
border: 1px solid #b6b5b5; - 1px - ширина, solid - вид (стиль) и #b6b5b5 - цвет границы (бордюра) рамки вокруг изображения.
Если рамка с бордюром вокруг изображения не нужны, то сделайте их ширину равную нулю. Тогда рамка с бордюром исчезнут и скругление углов будет непосредственно у картинки. Выбор за вами!!!
Не получается в Джумла. Рамка закругляется а сама картинка не закругляется и выходит углами из закругленной рамки. Такое только в джумла почему то. Отдельно делаю в HTML, всё получается нормально.
ОтветитьУдалить