Как сделать изображения в блоге круглой формы

Здравствуйте, мои дорогие читатели и гости блога. Сегодня будет много картинок. Речь пойдёт о том, как сделать в блоге изображения круглой (и не только) формы. Я пробовала это сделать в фотошопе, но так как очень слабо им владею, у меня это заняло достаточно времени. Есть онлайн- генераторы по округлению изображений. Но о них мы поговорим ниже.

Я хочу поделиться, как сделать картинки абсолютно разной формы прямо в Bllogger. Нам не нужно будет , что-то менять в шаблоне. Это будем делать прямо через редактор сообщений.

Давайте начнём. При написании сообщения загружаем обычным способом нужную картинку. В моём случае будет вот такой цыплёнок. Не забываем оптимизировать изображение (читаем пост будем оптимизировать картинки в блоге)

Теперь переходим из режима создать в режим HTML и  просто добавляем одно свойство CSS- style="border-radius: 100%;" после< img alt.....jpg". Таким образом мы зададим округление нашему изображению. Вот так это должно выглядеть

<a href="http://4.bp.blogspot.com/-tv4ZCiOnPx4/U3o92ziW0QI/AAAAAAAACLA/BNGVXETBSms/s1600/25042014657.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="квадратная картинка" border="0" src="http://4.bp.blogspot.com/-tv4ZCiOnPx4/U3o92ziW0QI/AAAAAAAACLA/BNGVXETBSms/s1600/25042014657.jpg"style="border-radius: 100%;"
 height="220" title="картинка" width="240" /></a></div>

В этом случае, у меня картинка получилась вот такой овальной формы. Всё дело в том, что высота и ширина загруженного изображения были неодинаковые. 

Чтобы сделать абсолютно круглой картинку, мы должны задать одинаковый размер ширины и высоты загруженного изображения. Можно прямо в режиме HTML. И потом уже добавить style="border-radius: 100%;"

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

Для такого вида мы также заходим в режим HTML, но прописываем вот такой код там, где должна быть наша картинка-

<div style="background: url('Ссылка на картинку '); width: 281px; height: 210px; border: 2px solid #405C0A; border-radius: 0 180px 0 200px; -webkit-border-radius: 0 180px 0 200px; - moz-border-radius: 0 180px 0 200px;"></div> .

Где выделено красным цветом-это адрес изображения, синим-высота и ширина, а вот зелёным мы прописали контур изображения. Его ширину и цвет можете менять на свои значения. (для информации - webkit-border-radius-это мы задаёт радиус закругления всех углов элемента)

Ну и ещё одна картинка вот такой формы

Для этого такой код

<div style="background: url('Ссылка на картинку'); width: 265px; height: 211px; border: 5px solid #850000; border-radius: 120px 200px 0 180px; -webkit-border-radius: 120px 200px 0 180px; -moz-border-radius: 120px 200px 0 180px;"></div>

Когда будете работать с такими картинками некоторые размеры border-radius: нужно менять в соответствии с размерами изображения.

Ну и напоследок, как я и обещала,  предлагаю вам один онлайн-генератор округления картинок http://www.oooo.com.ru/.

 Сайт на русском языке и там достаточно просто разобраться. Поэтому обойдусь без скриншота. В левой стороне нам предлагают выбрать форму выделенной области, а в правой всевозможные эффекты. Потом просто скачиваем результат, и всё.
Вот видите. Если немного пофантазировать и кое-что дополнить или поменять,можно добиться совершенно другого эффекта наших картинок в блоге. А в этом сообщении ещё интересные эффекты для картинок. Пробуйте, это ведь интересно.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :