0

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

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



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


<a href="https://2.bp.blogspot.com/-67vSOCD9LHA/WJA2q1ZIZPI/AAAAAAAAC54/Ym6mLpSbTc0BKzApst-4NuFOmkhW4DtQACLcB/s1600/papagal1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src=https://2.bp.blogspot.com/-67vSOCD9LHA/WJA2q1ZIZPI/AAAAAAAAC54/Ym6mLpSbTc0BKzApst-4NuFOmkhW4DtQACLcB/s1600/papagal1.jpg"  height="200" title="картинка" width="200" /></a></div>/></a></div>



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



<a href="https://2.bp.blogspot.com/-67vSOCD9LHA/WJA2q1ZIZPI/AAAAAAAAC54/Ym6mLpSbTc0BKzApst-4NuFOmkhW4DtQACLcB/s1600/papagal1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src=https://2.bp.blogspot.com/-67vSOCD9LHA/WJA2q1ZIZPI/AAAAAAAAC54/Ym6mLpSbTc0BKzApst-4NuFOmkhW4DtQACLcB/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: трябва да се променят в съответствие с размерите на изображението.
Ще пиша още за интересни ефекти на изображенията в блога ни. Информацията споделих от тук.
Пробвайте, интересно е.

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



Няма коментари :

Винаги се радвам на Вашето мнение


Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | Всички права запазени |
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита