Google+ Blogger WordPress Facebook Like Vkontakte Odnoklassniki LiveJournal vKruguDruzei Facebook Email Gmail
воскресенье, 15 апреля 2018 г.

Закругляем углы изображения в блоге

Для автоматизации процесса есть проверенный скрипт который генерирует код border-radius и позволяет осуществлять округление углов изображения.
Для этого вам в коде скрипта необходимо указать число желаемого округления углов картинки в пикселах. 
Далее в заходим в свой блог "Дизайн" - "Добавить гаджет" - "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>
<!--/Конец кода для закругления углов изображений -->
Кодом предусмотрено закругление углов  картинки в 12 пикселов (12px).
Дополнительно в коде присутствуют ещё полезные переменные для рамки с бордюром вокруг изображения:
padding: 8px; - ширирина рамки вокруг изображения.
background: #ffffff; - цвет рамки вокруг изображения.
border: 1px solid #b6b5b5; - 1px - ширина, 

solid - вид (стиль-http://css-b.blogspot.com/2013/02/svoystvo-border-style.html) и #b6b5b5 - цвет границы (бордюра) рамки вокруг изображения.
  Если рамка с бордюром вокруг изображения не нужны, то сделайте их ширину равную нулю. Тогда рамка с бордюром исчезнут и скругление углов будет непосредственно у картинки.



0 коммент.:

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