Простой способ закруглить углы изображений



Как автоматически закруглить углы всех изображений в блоге Blogspot


Как закруглить углы изображений на страницах блога blogspot
Здравствуйте дорогие гости и читатели. Сегодня в своем небольшом сообщении я хочу рассказать Вам, как вставив код в виде гаджета, мы сможем закруглить все изображения на страницах блога.

Код этот был сохранен у меня на компьютере, и я, честно сказать и забыла о нем. Вчера решила почистить папку, удалить лишнее и нашла код, поэтому источник происхождения затрудняюсь сказать, пусть простит меня автор.

Хочу обратить внимание, что вставив этот код, изображения на страницах Вашего блога все будут отображаться с закругленными углами, даже кто пользуется перелинковкой страниц определенных программ (nRelate.com), миниатюры так же будут с закругленными углами. Единственное, что не изменится, так это картинки в сайдбарах. Что радует, подходит для любого фона дизайна сайта, всех цветов, но за работу скрипта поручится могу только на блогах  Blogspot. 

Автоматическое закругление углов изображений на страницах блога blogspot
Предлагаемый скрипт генерирует код border-radius и осуществляет закругление краев изображений, достаточно лишь указать требуемое число округления в пикселях.

Слева предлагаю посмотреть на картинки: на первом рисунке края закруглены радиусом 12 рх; на втором 30 рх.

Радиус закругления задала больше, разницу в округлении углов Вы видите.



А вот и сам небольшой код

<style>
.post-body img
{
-webkit-border-radius:12px!important;
-moz-border-radius:12px!important;
 border-radius:12px!important;
}
</style>


Сюда я добавила оформление фона и рамки вокруг картинки 


<style>
.post-body img
{
padding: 8px;
background: #0a9e08;
border: 1px solid #0a9e08
-webkit-border-radius:12px!important;
-moz-border-radius:12px!important;
 border-radius:12px!important;
}
</style>

Заменив 12 рх на требуемое значение, можно задать закругление изображений больше или меньше; выделенное оранжевым меняйте на свои значения. Код вставляете обычным гаджетом: черновик blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-сохранить. В поле название ничего не пишите, расположите гаджет в нижней части макета блога.

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


Автор статьи ✎ Olga Protasova Выпуск ✹ 1/04/2014 Ярлыки ►


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

2 коммент. :

  1. Спасибо, Ольга. Будет время обязательно примерю на свой блог.

    ОтветитьУдалить
    Ответы
    1. Пожалуйста Сергей, пробуйте. Изображения с загругленными углами смотрятся намного оригинальнее..

      Удалить


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

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

Имя

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

Сообщение *