Яйца на 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. Это тоже может быть интересно:
Чудесный сайт)))