CSS-live.ru

Яйца на CSS

Простые и свежие CSS3 Яйца сделаны с помощью border-radius и прямоугольного элемента div. В создании фигуры яйца использованы два значения свойства border-radius, разделённые слешем. Для примера: border-radius: 50% 40% / 50% 80%; будет создана искажённая овальная фигура (посмотрите этот пример на тестовой площадке).

Давайте посмотрим код.

HTML:

<div id="verti-egg"></div>
<div id="horiz-egg"></div>

CSS:

#verti-egg {
	width: 125px;
	height: 200px;
	margin: 20px auto 30px;

	-webkit-border-radius: 50%/60% 60% 40% 40%;
	-moz-border-radius: 50%/60% 60% 40% 40%;
	border-radius: 50%/60% 60% 40% 40%;

	-webkit-box-shadow: 0px 0px 20px #D5D3D3, 0px 0px 20px #D5D3D3;
	-moz-box-shadow: 0px 0px 20px #D5D3D3, 0px 0px 20px #D5D3D3;
	box-shadow: 0px 0px 20px #D5D3D3, 0px 0px 20px #D5D3D3;
}

#horiz-egg {
	width: 200px;
	height: 125px;
	margin: 20px auto 30px;

	-webkit-border-radius: 40% 60% 60% 40%/50%;
	-moz-border-radius: 40% 60% 60% 40%/50%;
	border-radius: 40% 60% 60% 40%/50%;

	-webkit-box-shadow: 0px 0px 20px #4b8df9, 0px 0px 20px #4b8df9;
	-moz-box-shadow: 0px 0px 20px #4b8df9, 0px 0px 20px #4b8df9;
	box-shadow: 0px 0px 20px #4b8df9, 0px 0px 20px #4b8df9;
}

Не поддерживаются браузеры:

  • Internet Explorer 8.0 и ниже.

А вот и пример:

Перевод статьи "Eggs" с сайта "cssdeck.com, автор CSS Creations.

P.S. Это тоже может быть интересно:

1 комментарий

Добавить комментарий для Bingo Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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