I'm trying to get a white circle that should be razor sharp on the inner edge. I think I have managed at least that. I want the black inner surface to contain the content (preferably almost seamlessly and responsive - if possible). And imagine my template had 10-20 more checkboxes.
But now, the white circle on the outer edge should also look quite sharp (not 100% but much sharper than in my example). So a minimal transition should remain visible on the outer edge (but not on the inner edge). I'll have to experiment with the thickness of the white circle when I get the CSS right, but I don't want the white circle to be too thick.
But I can't manage that somehow...
Which CSS values do I have to specify so that the white circle is sharper on its outer edge and that the black inner surface encloses the content?
Thanks for any effort in advance. :)
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-image: radial-gradient(circle, black 54%, white 50%, white 10%, black, black);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
html {
scroll-behavior: smooth;
}
h1 {
font-size: 30px;
color: white;
text-align: center;
margin: 40px 0 20px 0;
}
input {
position: absolute;
left: -100vw;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color: black;
}
label::after {
content: ' ';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input label .content {
display: none;
}
input:checked label .content {
display: block;
}
<body>
<h1>My Testwebsite</h1>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div >
My Content 1
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div >
My Content 2
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div >
My Content 3
</div>
</body>
CodePudding user response:
Your gradient rules were a bit odd as you went down to 10% from 55%. Really they should be progressively larger. I adjusted to transition from white to black over 2%. Keep fiddling with the values to get it just right.
Have a look at the MDN docs to understand better.
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-image: radial-gradient(circle,
black 54%,
white 55%,
white 70%,
black 72%,
black
);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
html {
scroll-behavior: smooth;
}
h1 {
font-size: 30px;
color: white;
text-align: center;
margin: 40px 0 20px 0;
}
input {
position: absolute;
left: -100vw;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color: black;
}
label::after {
content: ' ';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input label .content {
display: none;
}
input:checked label .content {
display: block;
}
<body>
<h1>My Testwebsite</h1>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div >
My Content 1
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div >
My Content 2
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div >
My Content 3
</div>
<div >
My Content 9
</div>
</body>
CodePudding user response:
To get some kind of anti-aliassing between bands in a gradient circle, you can use double units/percentages with the slightest of variations in values.
As circles don't have straight lines you will get jagged edges when repeating end values as start values on a next colors. Therefore you need to 'fool' the browser graphics routines a bit and force some rounding differences by slight differences in the from/to distance values of no more that 0.5% or 1px, or whatever unit you use.
Like:
color 1: 10%
color 2: 10.5% 20%
color 3: 20.5% 30%
etc...
I copied your snippet and used green for white and red for black to show the anti-aliassing at work:
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-image: radial-gradient( circle,
black 54%,
white 54.5% 55%,
green 55.5% 65%,
black 65.5%,
red );
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
html {
scroll-behavior: smooth;
}
h1 {
font-size: 30px;
color: white;
text-align: center;
margin: 40px 0 20px 0;
}
input {
position: absolute;
left: -100vw;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color: black;
}
label::after {
content: ' ';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input label .content {
display: none;
}
input:checked label .content {
display: block;
}
<h1>My Testwebsite</h1>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div >
My Content 1
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div >
My Content 2
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div >
My Content 3
</div>