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

На всички уебмастъри се е налагало да направят кръгли снимките, които добавят в техните сайтове или блогове.

Всички те знаят колко е „туткав“ процеса особено ако трябва да обработват доста снимки.

За целта се използват програми за редактиране на снимки и всяко едно отделно изображение трябва да бъде обработено. С програмите се създават снимки с кръгла форма и за да бъдат с прозрачен фон трябва да бъдат запазени в PNG или GIF формати.

В тази статия ще ви покажем как да направите това много лесно, като просто добавите кратък CSS3 код.

Как да направим лесно снимките кръгли

Както споменахме, по-рано уебмастърите правеха кръгли снимките за техните сайтове, като използваха подходящ софтуер за редактиране на изображения.

С въвеждането на border-radius, визията на мрежата стана по-малко квадратна. Можете да използвате тази опция и да направите всички изображения, които искате кръгли.

За целта просто добавете този код в кода на всяка една снимка която искате да направите кръгла:

 

style="border-radius: 50%;"

Целият код на снимката трябва да изглежда така:

<img src="снимка.jpg" width="248" height="248" style="border-radius: 50%;"/>

Кръгла снимка

Ще отбележим, че за най-добър резултат изображенията трябва да са квадратни, а не правоъгълни. По този начин след добавянето на кода снимките ще станат идеално кръгли.

Всякакво друго съотношение на размера на страните, ще доведат до получаване на някакво елипсовидно, а не кръгло изображение.

Заобляне краищата на снимка

Ако имате квадратни изображения на вашия уебсайт и искате да заоблите само техните краища използвайте същия код, но намалете процента примерно на 20%. По този начин заоблянето на изображението няма да е толкова драстично и ще омекоти само малко неговите ъгли.

Заоблянето зависи само от вашето желание и процента, който зададете. Ако изображенията са правоъгълни за да им заоблите ъглите използвайте същия код но вместо процент (%), задайте пиксели (px), така ще получите по-добър резултат.

<img src="снимка.jpg" width="248" height="248" style="border-radius: 25px;"/>

Този код работи на всеки съвременен браузър, но потребителите, които използват стария IE8 отново ще виждат квадратни изображенията.

Но това не трябва да ви безпокои, ако те все още използват IE8, така или иначе са свикнали с подобен изглед на нещата.