Как сделать картинку в виде круга c помощью CSS?

0 / 5

Автор: Администратор

03.11.2015

Теги: css, img, border-radius

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

Сейчас очень модным стало в дизайне сайтов вставлять не обычные прямоугольные изображения, а закруглить их углы, делая тем самым их более симпатичными.

Если переносить такую задумку из макет-дизайна на веб-страницу, то тут используется свойство border-radius применительно к самому изображению - тег img.

img {
	border-radius:40px;
}

lilia lilia

Слева - исходное изображение, справа - с border-radius:40px;

Как вы уже поняли, в качестве значения наше свойство получает значение закругления, чаще всего оно численное. И степень закругления зависит от размеров изображения.

Предположим вот как задумал дизайнер и нарисовал такой макет(это всего лишь изображение):

maket

Мы получили этот самый макет и фото Светланы в хорошем качестве:

bc234a708bc2f5e078ffb233689d75c0

Приступим к процессу верстки. Сначала зададим разметку будущей странице:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta name="viewport" content="width=device-width" />    
	<link rel="stylesheet" href="/css/template.css" type="text/css" />
	<title>Страница</title>
</head>
<body>
	<div class="element">
		<img src="/images/img.jpg" alt="Светлана" />
		<h4>Светлана Костина</h4>
		<p>Ведущий веб-дизайнер проекта</p>
	</div>
</body>
</html>

А теперь добавляем стили:

/* Общие стили */
body {
	margin:0;
	font-family:"Myriad Pro";
	font-size:14px;
}
/* Общие стили закончилась */

div.element {
	text-align:center;
}

	div.element img {
		border-radius:100%;
		width:180px;
	}
	
	div.element h4 {
		font-size:21px;
		font-weight:bold;
		margin:10px 0 0 0;
	}
	
	div.element p {
		margin:5px 0 0 0;
		color:#575757;
		font-style:italic;
	}

Стоит обратить внимание на 14 строчку, в ней мы задаем border-radius равный 100%, что полностью закругляет углы и любое квадратное изображение превращается в круглое.

Результат примеры вы можете посмотреть на демо-странице:

Или скачать все файлы примера:

Самое замечательное, что данный метод кроссбраузерен и работает во всех браузерах последних версий, в том числе и в IE 9+.

Добавить комментарий

Авторизоваться с помощью:

Поиск по сайту

Топ 10 активных пользователей

Имя пользователя Баллы
gawk
44.20
ZOMRO
30.60
hr@proovelab
15.00
intuit89
8.40
Varvarka
4.00
Akyla58
3.00
AnnaOl
3.00
dimasik_3557
3.00
ErcardSa
3.00
Galinamuh
3.00

Рекламные ссылки

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

Похожие материалы

Языки программирования сайтов Просмотров 15671

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее

Удобное собрание CSS хаков для самых поп... Просмотров 10632

Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее

!important в CSS Просмотров 3960

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее

Как подключать свои шрифты на сайт, или ... Просмотров 6114