1 052 И еще раз всех с наступающим Новым 2012 годом. Пусть в 2012 ваши планы будут реализованы в рабочие проекты.
А пока, в этот последний день 2011 года, еще раз вспомним про геометрию, выполененную с помощью CSS трюков. Мы уже создавали треугольники и различные фигуры с помощью CSS, вот пришло время кругов.
CSS
Установка свойства border-radius для каждой стороны элемента на 50%, сделает из квадрата круг любого размера:
|
1 2 3 4 5 |
.circle { border-radius: 50%; width: 200px; height: 200px; } |
Это очень просто... но, давайте добавим немного градиентов и анимации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/* Создание анимационных блоков */ @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } /* Вращение, градиент; только CSS! */ #advanced { width: 200px; height: 200px; background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%); background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange); background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%); /* webkit chrome, safari, mobile */ -webkit-animation-name: spin; -webkit-animation-duration: 3s; /* 3 seconds */ -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; /* mozilla ff */ -moz-animation-name: spin; -moz-animation-duration: 3s; /* 3 seconds */ -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; /* microsoft ie */ -ms-animation-name: spin; -ms-animation-duration: 3s; /* 3 seconds */ -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; } |
Вуаля. Получился невероятный CSS круг!
Конечно, CSS круги не так востребованы, как треугольники, но и у них есть достойное применение в дизайне (чего стоит новая социальная сеть от Google (; ). Надеемся, такие трюки вам пригодятся в ваших проектах. Еще раз вас с наступающим Новым годом.
