Чем отличается круг от шара | CSS

Круг - это плоский блин в двухмерном пространстве

Шар - это объёмный Колобок в трёхмерном пространстве

Карта не будет анимированной в Опере.

в f t
наверх ↑

8 комментариев:

NMitra
В Opera есть баг: у вложенного элемента углы не закругляются. Это можно подправить, дописав

#ball:after {
content: "";
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
box-shadow: 0 0 0 100px #fff;
border-radius: 100%;
}

Но тогда тень в Гугл Хром "обрезанная" получается. Поскольку Опера переезжает на движок Google, то я сделала выбор в пользу его браузера.
Космо Мизраил
Прикольно.
Сейчас делаю дизайн как раз с планетами, но аватарки и другие изображения приходится делать плоскими, потому что img не применишь box-shadow: inset.
NMitra
Сделайте фоном background. Скоро благодаря поддержки трансформации CSS можно будет добавлять объём. Предвестники http://codepen.io/html5web/pen/pnbwo
Космо Мизраил
Мдо, вроде-бы для вебкита, а не работает х) Это будет вступать лет пять ещё, до этого надо ещё дожить :)

Фоны сделать не всегда получится, а вот наложить поверх изображения элемент с заданными стилями очень даже можно. Но это если известны размеры изображения.
Пример: http://jsfiddle.net/9qzm6/

Ещё нашёл скрипт, который выполняет эту работу самостоятельно:
http://www.htmldrive.net/items/demo/1156/Multiple-CSS3-Image-Styles
Здесь он сам определяет размер, если изображение загрузилось. Нужен jQuery.

Это так, на заметку :)
NMitra
Там нужны настройки какие-то устанавливать.. Это сильно вперёд :))

Спасиб за ссылки!
Космо Мизраил
Ну, для кого-то вперёд, а кто-то сам скрипты всякие шмаляет на досуге :)

Пжалст :) я ваш постоянный читатель уже год как минимум :)
Анонимный
IE 11
Все анимировано))
NMitra
Молодцом IE, дотянулось. Осталась Хрому убрать -webkit-, он теперь в числе отстающих.