Smirnov M. Posted April 26, 2012 Report Share Posted April 26, 2012 Здравствуйте, передо мной стоит задача средствами CSS3 нарисовать круг, который бы изменялся в размерах в зависимости от изменения размера окна.Понятно, что в такой конструкции<div id="wr"> <div id="circle1"> </div></div>у внешнего DIVа я ставлю width и height относительные, а у внутреннегоwidth:100%;height:100%;background-color: red;border-radius: 50%;Как же мне сделать так, чтобы высота внешнего и внутреннего дивов были одинаковые, то есть, чтобы круг не превращался в овал?Использовать канвас, изображения, джаваскрипт нельзя, только html+css. Quote Link to comment Share on other sites More sharing options...
0 alexandr_v-vich Posted April 26, 2012 Report Share Posted April 26, 2012 (edited) наверное вы про этоhtml, body {position: relative; height: 100%;} Edited April 26, 2012 by alexandr_v-vich Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted April 26, 2012 Report Share Posted April 26, 2012 Как-то так? 1 Quote Link to comment Share on other sites More sharing options...
0 alexandr_v-vich Posted April 26, 2012 Report Share Posted April 26, 2012 (edited) SelenIT, а зачем absolute и :before ?Да и на 100%… почему не так? — http://jsfiddle.net/NbYUW/31/ — проще же всё. Edited April 26, 2012 by alexandr_v-vich 1 Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted April 26, 2012 Report Share Posted April 26, 2012 alexandr_v-vich, и верно . Перемудрил я. Спасибо за поправку! Quote Link to comment Share on other sites More sharing options...
0 Smirnov M. Posted April 26, 2012 Author Report Share Posted April 26, 2012 Большое спасибо, как раз то, что нужно! Quote Link to comment Share on other sites More sharing options...
0 Smirnov M. Posted April 27, 2012 Author Report Share Posted April 27, 2012 (edited) А ещё вот такой вопрос: реально ли сделать вот такой сектор круга резиновым? http://jsfiddle.net/APd3m/4/ Edited April 27, 2012 by Smirnov M. Quote Link to comment Share on other sites More sharing options...
0 alexandr_v-vich Posted April 27, 2012 Report Share Posted April 27, 2012 А ещё вот такой вопрос: реально ли сделать вот такой сектор круга резиновым? http://jsfiddle.net/APd3m/4/ Насколько мне известно — нет Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted April 27, 2012 Report Share Posted April 27, 2012 Ну если очень захотеть... Quote Link to comment Share on other sites More sharing options...
0 alexandr_v-vich Posted April 27, 2012 Report Share Posted April 27, 2012 Ну если очень захотеть...Тоже была первой мыслью . Жаль не кроссбраузерно… Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted April 27, 2012 Report Share Posted April 27, 2012 Ах точно, Оперу забыл, нехорошая она капризная северная красавица . Хотя для однородного фона и ее можно "уломать", еще одним слоем без заливки и с толстым скругленным бордером фонового цвета. Для неоднородного фона — видимо, только SVG. Quote Link to comment Share on other sites More sharing options...
0 alexandr_v-vich Posted April 28, 2012 Report Share Posted April 28, 2012 Для неоднородного фона — видимо, только SVG. А, ну раз уж заговорили — http://forum.htmlbook.ru/index.php?showtopic=34527Хотя для однородного фона и ее можно "уломать"У меня так и не вышло… Не сложно пример показать? Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted April 28, 2012 Report Share Posted April 28, 2012 Пример для Оперы с "покрышкой" вот. Насчет SVG я грешным делом имел в виду вставку его прямо в разметку (одна из приятных фич HTML5, работающая во всём новом, включая даже IE9). Для кроссбраузерности при цейтноте, имхо, лучше всего взять библиотеку типа Rapha?l, там вопросы совместимости (включая конвертацию в VML для IE8-), по идее, решены. Сам, честно признаюсь, с SVG пока серьезных дел не имел, поэтому личным опытом, увы, поделиться не могу... 1 Quote Link to comment Share on other sites More sharing options...
0 Smirnov M. Posted April 28, 2012 Author Report Share Posted April 28, 2012 Ещё раз спасибо большое :-) Пример с "покрышкой" как раз мне подходит. Quote Link to comment Share on other sites More sharing options...
0 alexandr_v-vich Posted April 28, 2012 Report Share Posted April 28, 2012 Пример для Оперы с "покрышкой" вот.Спасибо за пример, у меня всё путаница с позиционированием была. Хорош пример, красивый) Засуну в закладки, авось мысль пригодится когда-нибудь)А про svg. Rapha?l уже да, посоветовали, но по-моему это не то, что мне нужно. Да и ладно, сейчас немного по-другому вопрос ставлю. Думаю приду к чему-нибудь. Так-то штука эта очень важная, ох как важная… Quote Link to comment Share on other sites More sharing options...
0 clavin Posted April 28, 2012 Report Share Posted April 28, 2012 Резиновый круг можно сделать ещё проще.Как я понял, резиновость круга создаётся за счёт пайдингов, заданных одним значением в процентах (ширина всех пайдингов в этом случае одинакова и рассчитывается относительно ширины родительского контейнера), и за счёт border-radius, также указанных в процентах (а значения для скругления углов уже рассчитываются относительно соответствующей ширины или высоты самого дива-"круга").Можно и овал, кстати, сделатьДумаю, что position:relative и margin там ни к чему. Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted April 28, 2012 Report Share Posted April 28, 2012 Так alexandr_v-vich выше уже показал. Сложности начались только с появлением сектора. Quote Link to comment Share on other sites More sharing options...
0 clavin Posted April 30, 2012 Report Share Posted April 30, 2012 Резиновый круг можно сделать ещё проще.Сейчас я посмотрел свой пример в браузере Опера 10.62 и увидел странную картину:У дива, который во всех остальных браузерах выглядит как круглый, в Опере выглядит совсем иначе. Его углы скруглились каким-то странным образом.SelenIT, а зачем absolute и :before ?Да и на 100%… почему не так? — http://jsfiddle.net/NbYUW/31/ — проще же всё.В примере от alexandr_v-vich аналогичная ситуация. Если задавать border-radius не в процентах, а в пикселях, то скругление происходит ожидаемо и корректно, но естественно, при изменении размеров шара это скругление работает совсем не так, чтобы шар оставался шаром. Это баг Оперы? Есть этому объяснение? У кого стоят более поздние версии Оперы, не могли бы вы проаерить, всё ли у вас в порядке с данными примерами. Если не в порядке, то решение не кроссбраузерно, что плохо Quote Link to comment Share on other sites More sharing options...
0 alexandr_v-vich Posted April 30, 2012 Report Share Posted April 30, 2012 clavin, В примере от alexandr_v-vich аналогичная ситуацияАналогичная или такая же?Так-то всегда можно задать радиус в 100500px , ну это к вопросу о кроссбраузерности, а так, если не затруднит дайте скрин с моего примера (если он хоть немного отличается).P.S. В 11.62 нормально. Quote Link to comment Share on other sites More sharing options...
0 clavin Posted May 1, 2012 Report Share Posted May 1, 2012 clavin, В примере от alexandr_v-vich аналогичная ситуацияАналогичная или такая же?Так-то всегда можно задать радиус в 100500px , ну это к вопросу о кроссбраузерности, а так, если не затруднит дайте скрин с моего примера (если он хоть немного отличается).В вашем примере ситуация полностью аналогичная. Круга нет, есть такой же полускруглённый квадрат, как и на скриншоте к моему примеру. Quote Link to comment Share on other sites More sharing options...
0 alexandr_v-vich Posted May 1, 2012 Report Share Posted May 1, 2012 clavin, мне как-то лень это разбирать. Но можете посмотреть, там бордер ему поставить, большой бордер поставить, поставить 1000% радиусу ну или чего ещё. Стояла бы ещё старая Опера, может и было б интересно. Quote Link to comment Share on other sites More sharing options...
0 clavin Posted May 1, 2012 Report Share Posted May 1, 2012 alexandr_v-vich, это, вероятно, баг, которых полно у всех браузеров. Навряд ли что-то с этим можно поделать. Quote Link to comment Share on other sites More sharing options...
Question
Smirnov M.
Здравствуйте, передо мной стоит задача средствами CSS3 нарисовать круг, который бы изменялся в размерах в зависимости от изменения размера окна.
Понятно, что в такой конструкции
у внешнего DIVа я ставлю width и height относительные, а у внутреннего
Как же мне сделать так, чтобы высота внешнего и внутреннего дивов были одинаковые, то есть, чтобы круг не превращался в овал?
Использовать канвас, изображения, джаваскрипт нельзя, только html+css.
Link to comment
Share on other sites
21 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.