Окружность в IE8

@Lane · Регистрация: 08.03.2012

Author24 — интернет-сервис помощи студентам

Необходимо нарисовать в ИЕ8 круг\окружность.. Используется только HTML\CSS, без графики.. Можно ли что-то сделать? Радиальный градиент браузер не поддерживает, border-radius тоже..

@Mailo · 15.03.2012, 19:17

Знаю только способы с js. Ну или сверхгеморойный способ с кучей наложенных др. на др. блоков в местах углов, создающих своими углами подобие пиксельной окружности.

@Lane · 15.03.2012, 19:27 **[ТС]**

Проблема в том, что это дело должно еще иметь ширину в % =) То есть тянуться.. С наложенными блоками такое не выйдет..

@Heleg · 15.03.2012, 19:32

и на кой такой изврат, разрешите поинтересоваться?

@Lane · 15.03.2012, 19:40 **[ТС]**

Сколько угодно) Хочу сделать круглый сайт =)

@Heleg · 15.03.2012, 19:58

а яваскрипт не канает?

@Lane · 16.03.2012, 18:35 **[ТС]**

Нет, на JS есть готовая библиотека.. Тогда бы вопрос снялся.. HTML+CSS..

Добавлено через 22 часа 28 минут
Собственно найдено решение в две строчки.. Всем спасибо =)

@Heleg · 16.03.2012, 20:49

иииииии какое?

@vadimgrig · 17.03.2012, 02:40

Действительно, а как же решилась проблемма???

@Mailo · 17.03.2012, 07:50

Ну она прям вас заинтриговал ?) Наверняка, две строки это:
body:{
background:......

Ну и ножницами для верности края монитора подрезал, что бы было кросбраузерно.

@Lane · 17.03.2012, 08:02 **[ТС]**

Ну, задача была под ИЕ8 сделать круг =) Я использовал символ "n" шрифта Webdings.. Это кружок, дело в том что его высота равна высоте шрифта, что очень удобно.. Шрифт Webdings идет в комплекте с браузером, так что о его наличии у юзера можно не беспокоиться.. Дальше этот кружок можно крутить\обрезать\делать с ним что угодно..
Для ресайза можно использовать функцию CSS calc() для пересчета процентов в пиксели (но работает вроде только в ИЕ9).

HTML5

1	<div class="circle">n</div>

CSS

.circle {
font-family: 'Webdings';
font-size: 500px;
line-height: 500px;
}

В целом выглядит неплохо.. Можно использовать для круглых уголков)

@Mailo · 17.03.2012, 08:21

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

@Lane · 17.03.2012, 08:27 **[ТС]**

Было бы здорово) А пока, можно использовать абсолютное позиционирование..

@Heleg · 17.03.2012, 12:04

и он будет резиновым?

Добавлено через 5 минут

Сообщение от Lane

В целом выглядит неплохо.. Можно использовать для круглых уголков)

это же только в эксплорере работает, поэтому в целом плохо, на мой взгляд

@Lane · 15.05.2012, 18:38 **[ТС]**

Отнюдь) В человеческих браузерах делаем радиальным градиентом, а для осла - буковой и убираем в комментарий, в css используем хак чтобы убрать градиентный круг из ие) Все замечательно и более-менее кроссбраузерно.. Собственно это использовалось для построения pie-chart графиков.

@Heleg · 15.05.2012, 21:22

Lane, да, зашибись

@Mailo 228 / 208 / 27 Регистрация: 18.02.2010 Сообщений: 2,042
	17.03.2012, 07:50	10
	Ну она прям вас заинтриговал ?) Наверняка, две строки это: body:{ background:...... Ну и ножницами для верности края монитора подрезал, что бы было кросбраузерно. 0

@Lane 32 / 30 / 1 Регистрация: 08.03.2012 Сообщений: 96
	17.03.2012, 08:27 [ТС]	13
	Было бы здорово) А пока, можно использовать абсолютное позиционирование.. 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	17.03.2012, 12:04	14
	и он будет резиновым? Добавлено через 5 минут Сообщение от Lane В целом выглядит неплохо.. Можно использовать для круглых уголков) это же только в эксплорере работает, поэтому в целом плохо, на мой взгляд 0

@Lane 32 / 30 / 1 Регистрация: 08.03.2012 Сообщений: 96
		1
	Окружность в IE8 15.03.2012, 17:46. Показов 2534. Ответов 15 Метки нет (Все метки) Необходимо нарисовать в ИЕ8 круг\окружность.. Используется только HTML\CSS, без графики.. Можно ли что-то сделать? Радиальный градиент браузер не поддерживает, border-radius тоже.. 0

@Mailo 228 / 208 / 27 Регистрация: 18.02.2010 Сообщений: 2,042
	15.03.2012, 19:17	2
	Знаю только способы с js. Ну или сверхгеморойный способ с кучей наложенных др. на др. блоков в местах углов, создающих своими углами подобие пиксельной окружности. 0

@Lane 32 / 30 / 1 Регистрация: 08.03.2012 Сообщений: 96
	15.03.2012, 19:27 [ТС]	3
	Проблема в том, что это дело должно еще иметь ширину в % =) То есть тянуться.. С наложенными блоками такое не выйдет.. 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	15.03.2012, 19:32	4
	и на кой такой изврат, разрешите поинтересоваться? 0

@Lane 32 / 30 / 1 Регистрация: 08.03.2012 Сообщений: 96
	15.03.2012, 19:40 [ТС]	5
	Сколько угодно) Хочу сделать круглый сайт =) 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	15.03.2012, 19:58	6
	а яваскрипт не канает? 0

@Lane 32 / 30 / 1 Регистрация: 08.03.2012 Сообщений: 96
	16.03.2012, 18:35 [ТС]	7
	Нет, на JS есть готовая библиотека.. Тогда бы вопрос снялся.. HTML+CSS.. Добавлено через 22 часа 28 минут Собственно найдено решение в две строчки.. Всем спасибо =) 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	16.03.2012, 20:49	8
	иииииии какое? 0

@vadimgrig 104 / 34 / 10 Регистрация: 15.12.2011 Сообщений: 146
	17.03.2012, 02:40	9
	Действительно, а как же решилась проблемма??? 0

@Mailo 228 / 208 / 27 Регистрация: 18.02.2010 Сообщений: 2,042
	17.03.2012, 08:21	12
	Осталось только придумать тег, который внутри букв блочные элементы поддерживает, аля буквоканвас. 0

	15.05.2012, 21:22

@Lane 32 / 30 / 1 Регистрация: 08.03.2012 Сообщений: 96
	15.05.2012, 18:38 [ТС]	15
	Отнюдь) В человеческих браузерах делаем радиальным градиентом, а для осла - буковой и убираем в комментарий, в css используем хак чтобы убрать градиентный круг из ие) Все замечательно и более-менее кроссбраузерно.. Собственно это использовалось для построения pie-chart графиков. 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	15.05.2012, 21:22	16
	Lane, да, зашибись 0