Круглая аватарка

Давайте представим, что вам или вашему начальнику вдруг захотелось иметь на сайте не квадратные аватарки, а круглые. Что будете делать?
Первое что приходит в голову это перенарезать картинки на сервере, но этот метод слишком сложноват, т.к. придется использовать маску, а в случае если мнение о круглых аватарках изменится, то что делать тогда? Второй вариант - сделать поверх каждой картинки png маску, идея не плохая. Но давайте все же попробуем реализовать круглые аватарки на чистом css 3.0.

Условимся, что у картинки есть класс, теперь нам нужно описать класс для скругления картинки:

.round-avatar{
	border: 2px solid #c7b89e;
	width: 50px;
	height: 50px;
	border-radius: 30px; /* IE9 и другие в будущем*/
	-webkit-border-radius: 30px; /* Safari, Chrome */
	-o-border-radius: 30px; /* Opera */
	-moz-border-radius: 30px; /* Firefox */
	overflow: hidden;
	display: inline-block;
}

И посмотрим что получилось, например Safari и Chrome:

Не плохо, почти даже хорошо. Теперь посмотрим что в Firefox 3.6

К сожалению это не подходит вообще. Углы изображения не срезаются. Можно попытаться сделать по-другому. Сделаем span, а картинку положим фоном, в таком случае все уголки будут красиво срезаться.

Но давайте подумаем еще, раз пока сильный косяк остается только в FF3.6, то возможно в 4 версии его поправят. К тому же, ведь мы с вами хоть поправить только класс картинки, а не городить умные конструкции. на помощь приходит яваскрипт. В тенценции сделаем все на jQuery. И так, напишем следующий код:

$(document).ready(function(){
	$(".round-avatar").load(function() {
		$(this).wrap(function(){
		return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
	});
		$(this).css("opacity","0");
	});
});

Код делает следующее. Ждет когда загрузится страница, после этого мы получаем в цикле данные картинок класса .round-avatar, а именно: ширину, высоту, путь к картинке. Саму картинку делаем прозрачной, а вокруг оборачиваем все элементом span. К самому span применяем тот же класс что и у картинки, делаем фоном span саму картинку и выставляем такую же высоту и ширину. Все.

Посмотрим что получилось:
Chrome

Firefox

Отлично! Посмотрите пример в действии.

(3 votes, average: 5,00 из 5)

 Loading ...