Как да направим изображение с кръгла форма

Здравейте скъпи читатели и посетители на блога. Днес ще има много снимков материал. Много изображения. Става въпрос за това как да се направи в блога изображение с кръгла, и не само, форма. Опитах се да го направя в Photoshop, но тъй като владея много слабо това умение, ми отне много време. Има и онлайн генератори за закръгляване изображения. Но ще говорим за тях по-късно. Искам да споделя как да се правят изображения с напълно различна форма направо в Bllogger. Няма да се налага да променяме нещо в шаблона. Ще го направим направо чрез редактора на публикацията.
Нека да започнем. Когато напишете текста на публикацията си, по обикновения начин вмъквате в нея и желаното изображение. В моя случай е изображение на папагали.
Не забравяйте да оптимизирате изображението (прочетете публикацията за оптимизиране изображенията в блога).

Кода на изображението е:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsasPQ8tQQIii9XJ-bgG6Z2s8LVTILBu_bfAUzAFx06ZrWxeLZg1ktm3F7Ct8zcW9QIgrMS7Fhh3vFvaO3avPBQ-3uivx9KLJLb2Af4uBwZj6uJwRpercx4X6MEebwlDOP66snOXqRX8/s1600/papagal1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsasPQ8tQQIii9XJ-bgG6Z2s8LVTILBu_bfAUzAFx06ZrWxeLZg1ktm3F7Ct8zcW9QIgrMS7Fhh3vFvaO3avPBQ-3uivx9KLJLb2Af4uBwZj6uJwRpercx4X6MEebwlDOP66snOXqRX8/s1600/papagal1.jpg"  height="200" title="картинка" width="200" /></a></div>/></a></div>

Сега преминаваме към редакция в HTML режим и просто добавяме едно свойство от CSS-стила, а именно style="border-radius: 100%;" след  < img .....jpg". Получава се следното:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsasPQ8tQQIii9XJ-bgG6Z2s8LVTILBu_bfAUzAFx06ZrWxeLZg1ktm3F7Ct8zcW9QIgrMS7Fhh3vFvaO3avPBQ-3uivx9KLJLb2Af4uBwZj6uJwRpercx4X6MEebwlDOP66snOXqRX8/s1600/papagal1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsasPQ8tQQIii9XJ-bgG6Z2s8LVTILBu_bfAUzAFx06ZrWxeLZg1ktm3F7Ct8zcW9QIgrMS7Fhh3vFvaO3avPBQ-3uivx9KLJLb2Af4uBwZj6uJwRpercx4X6MEebwlDOP66snOXqRX8/s1600/papagal1.jpg style="border-radius: 100%; "  height="200" title="картинка" width="200" /></a></div>/></a></div>

И моите папагали вече са така.



Можем да направим изображение и с малко необичайна форма. За този вид, ние също отиваме в режим на 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> 

И се получава

И още едно изображение с друга форма. Кодът му е:

<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: трябва да се променят в съответствие с размерите на изображението.
Ще пиша още за интересни ефекти на изображенията в блога ни. Информацията споделих от тук.
Пробвайте, интересно е.

Желая ви успех!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: