• Авторизация
Дневник вера_шубина Лента друзей - Дневник - Полная версия


Закруглить углы изображения в блоге на Blogger 16-04-2018 15:53 к комментариям - к полной версии - понравилось!

Это цитата сообщения Иннушка Оригинальное сообщение

Закруглить углы изображения в блоге на 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>

<!--/Конец кода для закругления углов изображений -->




   Кодом предусмотрено закругление углов  картинки в 12 пикселов (12px). Заменив на нужное значение все дюжины, выделенные красным цветом, можно сделать округление углов  картинки больше или меньше.

  Дополнительно в коде присутствуют ещё полезные переменные для рамки с бордюром вокруг изображения:

padding: 8px; - ширирина рамки вокруг изображения.

background: #ffffff; - цвет рамки вокруг изображения.

border: 1px solid #b6b5b5; - 1px - ширина, solid - вид (стиль) и #b6b5b5 - цвет границы (бордюра) рамки вокруг изображения.

  Если рамка с бордюром вокруг изображения не нужны, то сделайте их ширину равную нулю. Тогда рамка с бордюром исчезнут и скругление углов будет непосредственно у картинки. Выбор за вами!!!





 



Серия сообщений "***УРОКИ по BLOGGER и ЖЖ":

Часть 1 - Полезные советы и подсказки по работе в Живом интернете
Часть 2 - Все гаджеты для Blogger
...
Часть 40 - Горизонтальное меню навигации в блоге на Blogger.
Часть 41 - Вертикальное меню навигации для блога на Blogger
Часть 42 - Закруглить углы изображения в блоге на Blogger
Часть 43 - Мой Красивый Блог - Урок №1
Часть 44 - Мой Красивый Блог - Урок №2
Часть 45 - Мой Красивый Блог - Урок №3
Часть 46 - Мой Красивый Блог - Урок №4


вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Закруглить углы изображения в блоге на Blogger | вера_шубина - Дневник вера_шубина | Лента друзей вера_шубина / Полная версия Добавить в друзья Страницы: раньше»