Even though it's black, it shows as a light gray. i don't want the dots bigger.
https://jsfiddle.net/bek17q3t/1/
body,html
{
background-color: #e7e6e6;
height: 100%;
}
div
{
position: relative;
top: 10px;
left: 30px;
width: .25em;
height: 100%;
background-image: radial-gradient(circle closest-side,#000000 calc(100% - .25em),transparent 100%);
background-repeat: repeat-y;
background-size: .25em .75em;
}
body,html
{
background-color: #e7e6e6;
height: 100%;
}
div
{
position: relative;
top: 10px;
left: 30px;
width: .25em;
height: 100%;
background-image: radial-gradient(circle closest-side,#000000 calc(100% - .1em),transparent 100%);
background-repeat: repeat-y;
background-size: .25em .75em;
}
<div>
</div>
Change the calculation.
Related
This question already has answers here:
CSS Cut out circle from a rectangular shape
(3 answers)
Closed 1 year ago.
Can anyone help me with how to get the style like in the image attached below using background colour for a div? I tried adding using pseudo-classes before and after but doesn't seem to be coming through.
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #070B32;
position: absolute;
content: "";
left: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
.card:after {
background: #070B32;
position: absolute;
content: "";
right: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
<div class="card">
</div>
Use width top values too to have semi-circles with a change in color
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: white;
position: absolute;
content: "";
left: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 0 150px 150px 0;
}
.card:after {
background: white;
position: absolute;
content: "";
right: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 150px 0 0 150px;
}
<div class="card">
</div>
Update:
div {
height: 150px;
margin: 5em 2em;
background: radial-gradient(circle at left center, transparent, transparent 30px, #070B32 30px, transparent), radial-gradient(circle at right center, transparent, transparent 30px, #070B32 30px, transparent);
border-radius: 8px;
position: relative;
width: 360px;
margin: auto;
}
body {
background-image: url(http://www.fillmurray.com/1000/1000);
background-size: cover;
}
<div>
</div>
you should use width: 50px, background-color: white;
and responsive vertical alignment:
top: 50%; transform: translateY(-50%);
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #ffffff;
position: absolute;
content: "";
left: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
.card:after {
background: #ffffff;
position: absolute;
content: "";
right: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
<div class="card">
</div>
Or just use a background.
.card {
--circle-color: #fff;
--circle-size: 50px;
background: radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(100% + (var(--circle-size) / 2)) 50% / var(--circle-size) var(--circle-size),
radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(var(--circle-size) / -2) 50% / var(--circle-size) var(--circle-size),
#070B32;
background-repeat: no-repeat;
height: 190px;
width: 360px;
}
<div class="card">
</div>
.image {
background-image: url('task pic 1.jpeg'), url('task pic 2.jpeg'), url('task pic 3.jpeg');
background-position: left bottom, left top, center;
background-repeat: no-repeat, no-repeat, no-repeat;
margin-top: 50px;
margin-right: -200px;
margin-left: 800px;
padding: 300px;
border: 100%;
width: auto;
background-size: auto;
position: relative;
}
You can set a static width/height using background-size:
body {
margin: 0;
}
.image {
background-image: url('https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpeg'), url('https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpeg'), url('https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpeg');
background-position: 0 0, 0 200px, 100px 100px;
background-repeat: no-repeat;
background-size: 300px;
width: 500px;
height: 500px;
position: relative;
}
<div class="image"></div>
body{margin: 0;}
.image{
background-image: url('task pic 1.jpeg'),url('task pic 2.jpeg'),url('task pic 3.jpeg');
padding:20%;
background-position: 80% 0%,80% 90%,100% 50%;
background-repeat:no-repeat;
width:auto;
background-size:20%;
position: relative;
}
Need to align the css generated border vertically...how do i use background-repeat: repeat-y here :
.container::after {
position:absolute;
bottom: -50px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, white 25%, #535353 26%, gray 40%);
background-color: gray;
background-size:50px 100px;
height:50px;
background-repeat: repeat-x;
}
Thanks
You need to convert the vertical values to horizontal values, and vice versa:
.container {
position: relative;
width: 50%;
height: 100vh;
}
.container::after {
position: absolute;
right: -50px; /* bottom: -50px; */
top: 0; /* left: 0 */
width: 50px; /* width: 100% */
height: 100%; /* height: 50px; */
content: "";
background: radial-gradient(circle at 0% 50%, white 45%, #535353 46%, gray 60%);
background-color: gray;
background-size: 50px 50px; /* background-size: 50px 100px; */
background-repeat: repeat-y; /* background-repeat: repeat-x; */
}
<div class="container"></div>
I've coded this div with a gradient background and rounded corners:
#pill {
font-size: 12px;
height: 40px;
width: 100px;
margin: 0 20px 0 20px;
background: transparent;
background-image: linear-gradient(#080, #cf0 45%, #cf0 55%, #080);
z-index: 1;
text-align: center;
}
#pill::before {
display: block;
content: '';
width: 40px;
height: 40px;
position: absolute;
margin-left: -20px;
z-index: -1;
border-radius: 40px;
background-image: radial-gradient(21px #cf0 5%, #080);
}
#pill::after {
display: inline-block;
content: '';
width: 40px;
height: 40px;
position: relative;
top: -14.5px;
right: -50px;
z-index: -1;
border-radius: 40px;
background-image: radial-gradient(21px #cf0 5%, #080);
}
The result with Firefox, at top zoom, is this one:
I'm not satisfied of the way I had to use hardwired values, specially for the ::before element.
Is there a way, without jQuery, to make everything dynamic? I tested the CSS3 border-image-slice, which looked promising, but it seems to refuse a radial-gradient as border image.
More or less your requested result, but created with a shadow
You can play with the shadow parameters to fine adjust it.
#test {
height: 40px;
width: 140px;
border-radius: 20px;
background-color: #cf0;
box-shadow: inset 0px 0px 14px 10px #080;
}
#pill {
font-size: 12px;
height: 40px;
width: 100px;
margin: 0 20px 0 20px;
background: transparent;
background-image: linear-gradient(#080, #cf0 45%, #cf0 55%, #080);
z-index: 1;
text-align: center;
}
#pill::before {
display: block;
content: '';
width: 40px;
height: 40px;
position: absolute;
margin-left: -20px;
z-index: -1;
border-radius: 40px;
background-image: radial-gradient(circle 21px, #cf0 5%, #080);
}
#pill::after {
display: inline-block;
content: '';
width: 40px;
height: 40px;
position: relative;
right: -50px;
z-index: -1;
border-radius: 40px;
background-image: radial-gradient(circle 21px, #cf0 5%, #080);
}
<div id=pill></div>
<div id=test></div>
What am I doing wrong? No picture is showing up at all. :-/ (fyi I cut off the bottom of the code, the tags are all completed I promise)
On all the tutorials I looked at they did this very thing and it showed the whole picture. But when I do it it doesn't show anything. If I type text inside the a href tags it shows part of the picture behind the text, but nothing otherwise.
CSS:
body {
background-color: #ebf4f7;
background-image: url(bg.png);
background-repeat: repeat-x;
}
#mainnav {
position: relative;
top: -9px;
left: -2px;
width: auto;
padding-right: 0%;
padding-left: 0%;
}
.profilebutton {
background-image: url(button%20profile.png);
background-position: 0px 0px;
height: 71px;
width: 113px;
}
.profilebutton:hover {
background-image: url(button%20profile.png);
background-position: 0px 100%;
height: 71px;
width: 113px;
}
HTML:
<nav id="mainnav">
<a> is an inline element, so you have to give the property display: block; to your <a> element if you aren't going to add any text: Fiddle
.profilebutton {
display:block;
background-image: url('http://placekitten.com/300/303');
background-position: 0px 100%;
height: 71px;
width: 113px;
}
body {
background-color: #ebf4f7;
background-image: url('http://placekitten.com/300/301');
background-repeat: repeat-x;
}
#mainnav {
position: relative;
top: -9px;
left: -2px;
width: auto;
padding-right: 0%;
padding-left: 0%;
}
.profilebutton {
display:block;
background-image: url('http://placekitten.com/300/302');
background-position: 0px 0px;
height: 71px;
width: 113px;
}
.profilebutton:hover {
display:block;
background-image: url('http://placekitten.com/300/303');
background-position: 0px 100%;
height: 71px;
width: 113px;
}
<nav id="mainnav">
nbvnbvnchdfg