Re: [css-d] Simple display of concentric circles
Sent from my iPhone
> On Jan 25, 2014, at 5:15 PM, bruce.som...@web.de wrote:
>
>
>
> Thanks a million for the assistance, Tom. I doubt that I would ever have
> figured that out. It's not exactly intuitive that
> specifying a 'border radius' for a square object is the way to specify a
> circle.
>
> I must confess that I haven't yet figured out why a margin of 26px is called
> for. It obviously is, of course.
>
> Thanks againBruce
26px + 4px (border width) = 30px which is half the height of the 60px circle.
>
>
>
> Gesendet: Dienstag, 21. Januar 2014 um 18:22 Uhr
> Von: "Tom Livingston"
> An: bruce.som...@web.de
> Cc: "CSS Discussion Group"
> Betreff: Re: [css-d] Simple display of concentric circles
>> On Tue, Jan 21, 2014 at 12:13 PM, wrote:
>> I've got some sort of mental block. I would like to display a series of
>> concentric circles with diameter 2 cm, 4 cm, 6 cm, 8 cm ...
>>
>> At the moment, I have
>> .circle1 { border: 4px solid #99;
>> height: 60px; width: 60px; border-radius: 60px; }
>>
>> .circle2 { border: 4px solid #99;
>> height: 120px; width: 120px; border-radius: 120px; }
>>
>>
>>
>>
>>
>> You're right - it IS quite primitive. I would like to be able to write
>>
>>
>> and have all the circles drawn with a common center.
>>
>> Can it be done with CSS?
>
>
>
> In keeping with "primitive":
>
>
> .wrap{position: relative;width: 500px;}
> .circle1 { border: 4px solid #99;
> height: 60px; width: 60px; border-radius: 60px; margin: 26px
> auto 0 auto; }
>
> .circle2 { border: 4px solid #99;
> height: 120px; width: 120px; border-radius: 120px; margin: 0
> auto 0 auto; }
>
>
>
>
>
>
> I would guess SVG might be better, but I am not familiar with it.
>
>
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ --
> http://css-discuss.incutio.com/[http://css-discuss.incutio.com/]
> List policies --
> http://css-discuss.org/policies.html[http://css-discuss.org/policies.html]
> Supported by evolt.org --
> http://www.evolt.org/help_support_evolt/[http://www.evolt.org/help_support_evolt/]
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Simple display of concentric circles
Thanks a million for the assistance, Tom. I doubt that I would ever have
figured that out. It's not exactly intuitive that
specifying a 'border radius' for a square object is the way to specify a circle.
I must confess that I haven't yet figured out why a margin of 26px is called
for. It obviously is, of course.
Thanks again Bruce
Gesendet: Dienstag, 21. Januar 2014 um 18:22 Uhr
Von: "Tom Livingston"
An: bruce.som...@web.de
Cc: "CSS Discussion Group"
Betreff: Re: [css-d] Simple display of concentric circles
On Tue, Jan 21, 2014 at 12:13 PM, wrote:
> I've got some sort of mental block. I would like to display a series of
> concentric circles with diameter 2 cm, 4 cm, 6 cm, 8 cm ...
>
> At the moment, I have
> .circle1 { border: 4px solid #99;
> height: 60px; width: 60px; border-radius: 60px; }
>
> .circle2 { border: 4px solid #99;
> height: 120px; width: 120px; border-radius: 120px; }
>
>
>
>
>
> You're right - it IS quite primitive. I would like to be able to write
>
>
> and have all the circles drawn with a common center.
>
> Can it be done with CSS?
In keeping with "primitive":
.wrap{position: relative;width: 500px;}
.circle1 { border: 4px solid #99;
height: 60px; width: 60px; border-radius: 60px; margin: 26px
auto 0 auto; }
.circle2 { border: 4px solid #99;
height: 120px; width: 120px; border-radius: 120px; margin: 0
auto 0 auto; }
I would guess SVG might be better, but I am not familiar with it.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ --
http://css-discuss.incutio.com/[http://css-discuss.incutio.com/]
List policies --
http://css-discuss.org/policies.html[http://css-discuss.org/policies.html]
Supported by evolt.org --
http://www.evolt.org/help_support_evolt/[http://www.evolt.org/help_support_evolt/]
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Simple display of concentric circles
After a quick test, it's not as smooth as borders (in FF). Though that
may be fixable with different settings. Like I said, it was a quick
test:
.grad{
background: rgb(0,52,120);
background: -moz-radial-gradient(center, ellipse cover,
rgba(0,52,120,1) 0%, rgba(0,52,120,1) 15%, rgba(255,255,255,1) 15%,
rgba(255,255,255,1) 25%, rgba(0,52,120,1) 25%, rgba(0,52,120,1) 38%,
rgba(255,255,255,1) 38%);
background: -webkit-gradient(radial, center center, 0px, center
center, 100%, color-stop(0%,rgba(0,52,120,1)),
color-stop(15%,rgba(0,52,120,1)), color-stop(15%,rgba(255,255,255,1)),
color-stop(25%,rgba(255,255,255,1)), color-stop(25%,rgba(0,52,120,1)),
color-stop(38%,rgba(0,52,120,1)),
color-stop(38%,rgba(255,255,255,1)));
background: -webkit-radial-gradient(center, ellipse cover,
rgba(0,52,120,1) 0%,rgba(0,52,120,1) 15%,rgba(255,255,255,1)
15%,rgba(255,255,255,1) 25%,rgba(0,52,120,1) 25%,rgba(0,52,120,1)
38%,rgba(255,255,255,1) 38%);
background: -o-radial-gradient(center, ellipse cover,
rgba(0,52,120,1) 0%,rgba(0,52,120,1) 15%,rgba(255,255,255,1)
15%,rgba(255,255,255,1) 25%,rgba(0,52,120,1) 25%,rgba(0,52,120,1)
38%,rgba(255,255,255,1) 38%);
background: -ms-radial-gradient(center, ellipse cover,
rgba(0,52,120,1) 0%,rgba(0,52,120,1) 15%,rgba(255,255,255,1)
15%,rgba(255,255,255,1) 25%,rgba(0,52,120,1) 25%,rgba(0,52,120,1)
38%,rgba(255,255,255,1) 38%);
background: radial-gradient(ellipse at center, rgba(0,52,120,1)
0%,rgba(0,52,120,1) 15%,rgba(255,255,255,1) 15%,rgba(255,255,255,1)
25%,rgba(0,52,120,1) 25%,rgba(0,52,120,1) 38%,rgba(255,255,255,1)
38%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#003478', endColorstr='#ff',GradientType=1 );
width: 120px;
height: 120px;
}
HTH
On Tue, Jan 21, 2014 at 12:57 PM, Tom Livingston wrote:
> Also, may be able to do it with a radial gradient and some
> well-planned color stops, but you may be then excluding some browsers
> you need to support.
>
> You can play here:
>
> http://www.colorzilla.com/gradient-editor/
>
> HTH
>
> On Tue, Jan 21, 2014 at 12:22 PM, Tom Livingston wrote:
>> On Tue, Jan 21, 2014 at 12:13 PM, wrote:
>>> I've got some sort of mental block. I would like to display a series of
>>> concentric circles with diameter 2 cm, 4 cm, 6 cm, 8 cm ...
>>>
>>> At the moment, I have
>>> .circle1 { border: 4px solid #99;
>>> height: 60px; width: 60px; border-radius: 60px; }
>>>
>>> .circle2 { border: 4px solid #99;
>>> height: 120px; width: 120px; border-radius: 120px; }
>>>
>>>
>>>
>>>
>>>
>>> You're right - it IS quite primitive. I would like to be able to write
>>>
>>>
>>> and have all the circles drawn with a common center.
>>>
>>> Can it be done with CSS?
>>
>>
>>
>> In keeping with "primitive":
>>
>>
>> .wrap{position: relative;width: 500px;}
>> .circle1 { border: 4px solid #99;
>> height: 60px; width: 60px; border-radius: 60px; margin: 26px
>> auto 0 auto; }
>>
>> .circle2 { border: 4px solid #99;
>> height: 120px; width: 120px; border-radius: 120px; margin: 0
>> auto 0 auto; }
>>
>>
>>
>>
>>
>>
>> I would guess SVG might be better, but I am not familiar with it.
>>
>>
>>
>> --
>>
>> Tom Livingston | Senior Front-End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>
>
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Simple display of concentric circles
Also, may be able to do it with a radial gradient and some
well-planned color stops, but you may be then excluding some browsers
you need to support.
You can play here:
http://www.colorzilla.com/gradient-editor/
HTH
On Tue, Jan 21, 2014 at 12:22 PM, Tom Livingston wrote:
> On Tue, Jan 21, 2014 at 12:13 PM, wrote:
>> I've got some sort of mental block. I would like to display a series of
>> concentric circles with diameter 2 cm, 4 cm, 6 cm, 8 cm ...
>>
>> At the moment, I have
>> .circle1 { border: 4px solid #99;
>> height: 60px; width: 60px; border-radius: 60px; }
>>
>> .circle2 { border: 4px solid #99;
>> height: 120px; width: 120px; border-radius: 120px; }
>>
>>
>>
>>
>>
>> You're right - it IS quite primitive. I would like to be able to write
>>
>>
>> and have all the circles drawn with a common center.
>>
>> Can it be done with CSS?
>
>
>
> In keeping with "primitive":
>
>
> .wrap{position: relative;width: 500px;}
> .circle1 { border: 4px solid #99;
> height: 60px; width: 60px; border-radius: 60px; margin: 26px
> auto 0 auto; }
>
> .circle2 { border: 4px solid #99;
> height: 120px; width: 120px; border-radius: 120px; margin: 0
> auto 0 auto; }
>
>
>
>
>
>
> I would guess SVG might be better, but I am not familiar with it.
>
>
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Simple display of concentric circles
On Tue, Jan 21, 2014 at 12:13 PM, wrote:
> I've got some sort of mental block. I would like to display a series of
> concentric circles with diameter 2 cm, 4 cm, 6 cm, 8 cm ...
>
> At the moment, I have
> .circle1 { border: 4px solid #99;
> height: 60px; width: 60px; border-radius: 60px; }
>
> .circle2 { border: 4px solid #99;
> height: 120px; width: 120px; border-radius: 120px; }
>
>
>
>
>
> You're right - it IS quite primitive. I would like to be able to write
>
>
> and have all the circles drawn with a common center.
>
> Can it be done with CSS?
In keeping with "primitive":
.wrap{position: relative;width: 500px;}
.circle1 { border: 4px solid #99;
height: 60px; width: 60px; border-radius: 60px; margin: 26px
auto 0 auto; }
.circle2 { border: 4px solid #99;
height: 120px; width: 120px; border-radius: 120px; margin: 0
auto 0 auto; }
I would guess SVG might be better, but I am not familiar with it.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Simple display of concentric circles
I've got some sort of mental block. I would like to display a series of
concentric circles with diameter 2 cm, 4 cm, 6 cm, 8 cm ...
At the moment, I have
.circle1 { border: 4px solid #99;
height: 60px; width: 60px; border-radius: 60px; }
.circle2 { border: 4px solid #99;
height: 120px; width: 120px; border-radius: 120px; }
You're right - it IS quite primitive. I would like to be able to write
and have all the circles drawn with a common center.
Can it be done with CSS?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
