My code - Fiddle
body{
background: url('http://i.imgur.com/RECDV24.jpg');
background-size: cover;
}
div{
width: 150px;
height: 150px;
background-image: radial-gradient(circle at 0 0, transparent 28px, tomato 28px);
}
<div></div>
How to remove jaggies?
Thank you, I will be glad to any help!
Take a different approach with a large box-shadow on a round element:
body {
background: url('https://i.imgur.com/RECDV24.jpg');
background-size: cover;
}
.bitten {
height: 150px;
overflow: hidden;
position: relative;
width: 150px;
}
.bitten::before {
border-bottom-right-radius: 100%;
box-shadow: 0 0 0 1000px tomato;
content: '';
height: 28px;
position: absolute;
width: 28px;
z-index: -1;
}
<div class="bitten"></div>
In some browsers, you can prevent jaggies by not having sharp edges to your gradient. So rather than transparent 28px, tomato 28px, you make the transition between the colors a bit smoother, say by 1px.
body{
background: url('https://i.imgur.com/RECDV24.jpg');
background-size: cover;
}
div{
width: 150px;
height: 150px;
background-image: radial-gradient(circle at 0 0, rgba(255,99,71,0) 28px, rgba(255,99,71,255) 30px);
}
<div></div>
But this doesn't work everywhere. For a more solid approach, see the other answer.
Related
I have this:
.test {
width: 400px;
height: 400px;
background-color: white;
display: inline-block;
background-size: 100px 30px;
background-repeaT: no-repeat;
background-position: center 30px, center center, center 140px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: linear-gradient(25deg, yellow 50%, transparent 50%);
mix-blend-mode: difference;
transition: all 1s;
}
<div class="test one"></div>
I found the pen online, and want to adjust it for my own usage, however, cannot figure out a few things.
I want to move the blue box lower, so it is not as high, but still keep the same shape. So I tried background position, as one would, and it doesn't change anything. I'm relatively an amateur in css so it is probably a silly question, but a question none the less! Appreciate the help
It's because that shape is made with linear gradient as background, so you just need to adjust gradient percentages:
From
background: linear-gradient(25deg, yellow 50%, transparent 50%);
to
background: linear-gradient(25deg, yellow 20%, transparent 20%);
.test {
width: 400px;
height: 400px;
background-color: white;
display: inline-block;
background-size: 100px 30px;
background-repeaT: no-repeat;
background-position: center 30px, center center, center 140px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: linear-gradient(25deg, yellow 20%, transparent 20%);
mix-blend-mode: difference;
transition: all 1s;
}
<div class="test one"></div>
I want to stack two colors one on top of the other. I did it by creating and sovrapposing two divs, having the one on the top with an opacity of 60%.
I wonder if there's a simpler way requiring only one div with two colors or maybe just one color that is a mix of the two.
I post here my code, If you notice any bad practice let me know please. I am eager to improve my skills.
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
/* ~~~~~~~~~~SKY~~~~~~~~~~ */
#sky {
position: relative;
z-index: -100;
width: 100vw;
height: 100vh;
background-image: linear-gradient( to top, midnightblue, black);
}
/* ~~~~~~~~~~MOON~~~~~~~~~~ */
.moon {
position: absolute;
top: 3%;
right: 0%;
width: 200px;
height: 200px;
border-radius: 50%;
}
#dark-moon {
background-color: silver;
}
#light-moon {
background-color: goldenrod;
background-image: radial-gradient(dimgrey 20%, transparent 16%), radial-gradient(dimgrey 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
opacity: 60%;
}
/* ~~~~~~~~~~SEA~~~~~~~~~~ */
#sea {
position: absolute;
bottom: 0%;
width: 100vw;
height: 25vh;
background-color: #48B;
}
<div id="sky">
<div id="dark-moon" class="moon"></div>
<div id="light-moon" class="moon"></div>
</div>
<div id="sea"></div>
As you can see there's a golden moon over a silver one. How can I get the same result having only one moon?
You can do it with 0 elements using pseudo element and multiple backgrounds:
html {
min-height: 100%;
background: linear-gradient( to top, midnightblue, black);
}
html::before {
content:"";
position: absolute;
top: 3%;
right: 0;
width: 200px;
height: 200px;
border-radius: 50%;
background:
linear-gradient(rgba(192,192,192,0.4) 0 0),
radial-gradient(dimgrey 20%, transparent 16%),
radial-gradient(dimgrey 15%, transparent 16%) 30px 30px,
goldenrod;
background-size: 60px 60px;
}
html::after {
content:"";
position: absolute;
bottom: 0;
left:0;
right:0;
height: 25vh;
background: #48B;
}
Another fancy idea to optimize the code more:
html {
min-height: 100%;
background:
linear-gradient(#48B 0 0) bottom/100% 25vh no-repeat fixed,
linear-gradient(black,midnightblue);
}
html::before {
content:"";
position: absolute;
top: 3%;
right: 0;
width: 200px;
height: 200px;
border-radius: 50%;
background:
linear-gradient(#48B 0 0) bottom/100% 25vh no-repeat fixed,
linear-gradient(rgba(192,192,192,0.4) 0 0),
radial-gradient(dimgrey 20%, transparent 16%) 0 0 /60px 60px,
radial-gradient(dimgrey 15%, transparent 16%) 30px 30px/60px 60px,
goldenrod;
}
Another option that only involves setting one background property would be to "stretch and displace" a linear-gradient in such a way that the result is a single color.
--base-col and --blend-col defines the gradient, --blend-amount sets the color mix, and --stretch-factor determines how much stretch is applied to the gradient:
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
/* ~~~~~~~~~~SKY~~~~~~~~~~ */
#sky {
position: relative;
z-index: -100;
width: 100vw;
height: 100vh;
background-image: linear-gradient( to top, midnightblue, black);
}
/* ~~~~~~~~~~MOON~~~~~~~~~~ */
.moon {
position: absolute;
top: 3%;
right: 0%;
width: 200px;
height: 200px;
border-radius: 50%;
}
#dark-moon {
--blend-amount: 60%;
--base-col: silver;
--blend-col: goldenrod;
--stretch-factor: 100;
background: linear-gradient(
var(--base-col) calc(( 0% - var(--blend-amount)) * var(--stretch-factor)),
var(--blend-col) calc((100% - var(--blend-amount)) * var(--stretch-factor))
);
}
#light-moon {
background-image: radial-gradient(dimgrey 20%, transparent 16%), radial-gradient(dimgrey 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
/* ~~~~~~~~~~SEA~~~~~~~~~~ */
#sea {
position: absolute;
bottom: 0%;
width: 100vw;
height: 25vh;
background-color: #48B;
}
<div id="sky">
<div id="dark-moon" class="moon"></div>
<div id="light-moon" class="moon"></div>
</div>
<div id="sea"></div>
You can try to get the hex code for the mixed color first using online color mixer tool such as this one https://colordesigner.io/color-mixer. After that you can use the result color in one div.
I'm stuck with one task and I can't find any solution over the internet.
I have this situation:
Images 1 and 2 has background images.
I need one 1st or 2nd image have that bump.
If it would be 1st image, that bump should extend div bottom and overlay the 2nd background.
If it would be 2nd div then I need like a crater/hole at the top and be under 1st div.
I can't cut my images to .png/.gif and cut with that bump in photoshop. These images are changed by client, so he can't prepare exact images all the time, so I need to extend them by code.
I tried to radial-gradient() background and cut with svg, but those aren't supported by Firefox.
Is it possible to make this with code who adapts to all background images?
Here is a solution that uses background-size: cover, so it is easier to adapt. (It would be easier with known dimension images).
The drawback is a little complex markup, 3 auxiliar divs are needed.
The curves are standard border-radius, so that can be adjusted as needed
.container {
width: 600px;
height: 400px;
border: solid 1px blue;
position: relative;
}
.up {
width: 100%;
height: 50%;
position: relative;
border-bottom: 40px solid transparent;
background-image: url(http://lorempixel.com/600/400);
background-size: cover;
background-position: center bottom;
background-origin: border-box;
background-clip: padding-box;
margin-bottom: -40px;
}
.addon {
width: 25%;
height: calc(100% + 40px);
position: absolute;
left: 37.5%;
border-radius: 0px 0px 50px 50px;
overflow: hidden;
background-image: inherit;
z-index: 2;
}
.addon:before {
content: "";
position: absolute;
width: 400%;
height: 100%;
left: -150%;
background-image: inherit;
background-size: cover;
background-position: center bottom;
background-origin: padding-box;
background-clip: padding-box;
}
.down {
width: 100%;
height: 50%;
position: relative;
bottom: 40px;
border-top: 40px solid transparent;
background-image: url(http://lorempixel.com/400/200);
background-size: cover;
background-position: center top;
background-origin: border-box;
background-clip: padding-box;
margin-top: -40px;
}
.addleft {
width: 37.5%;
height: calc(100% + 40px);
position: absolute;
left: 0px;
bottom: 0px;
border-radius: 0px 50px 0px 0px;
overflow: hidden;
background-color: tomato;
background-image: inherit;
background-size: 0px 0px;
}
.addleft:before {
content: "";
position: absolute;
width: 266.667%;
height: 100%;
left: 0px;
background-image: inherit;
background-size: cover;
background-position: center top;
background-origin: padding-box;
background-clip: padding-box;
}
.addright {
width: 37.5%;
height: calc(100% + 40px);
position: absolute;
right: 0px;
bottom: 0px;
border-radius: 50px 0px 0px 0px;
overflow: hidden;
background-image: inherit;
background-size: 0px 0px;
}
.addright:before {
content: "";
position: absolute;
width: 266.667%;
height: 100%;
right: 0px;
background-image: inherit;
background-size: cover;
background-position: center top;
background-origin: padding-box;
background-clip: padding-box;
}
<div class="container">
<div class="up">
<div class="addon"></div>
</div>
<div class="down">
<div class="addleft"></div>
<div class="addright"></div>
</div>
</div>
You need to use border-color
border-color: transparent transparent #555 transparent;
Basically you need to mark some percentage of left and right of the image border-color as transparent.
And then set border-radius to give the curve
Thanks.
I have the following HTML + CSS:
.item {
position: relative;
width: 400px;
height: 400px;
background: url('http://i.imgur.com/FOmRt87.jpg') no-repeat;
}
.item .gradient {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
}
<div class="item">
<div class="gradient">
</div>
</div>
It's rendered in the browser properly. But on mobile (see the attached screenshot) there's a one thick line across the gradient, I have no idea why is that.
Here's also I js fiddle: https://jsfiddle.net/tcxka242/1/
First I thought that is repeated vertically as well, but the inspector says that the rule I've set: background: url(...) repeat-x center bottom; is expanded to :
background-image: url("http://i.imgur.com/oSpOTeK.png");
background-position-x: 50%;
background-position-y: 100%;
background-size: initial;
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
That's on Android Phone with Google Chrome.
Sorry but i cannot properly verify this , but i have an idea for you .
.item .gradient {
width:100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
outline: 0;
border: none;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
}
As you can see i have set the outline to 0 and the border to none . There's a possibility that there is an outline from the div or a hidden border .
Specifying border-top: 0px; and box-shadow: none; will work for you
.item .gradient {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
box-shadow: none;
left: 0;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
border-top: 0px;
}
I think this is caused on screens with high DPI. Therefore I am providing a CSS-only alternative.
https://jsfiddle.net/tcxka242/6/
.item {
position: relative;
width: 400px;
height: 400px;
background: url('http://i.imgur.com/FOmRt87.jpg') no-repeat;
}
.item:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%);
}
How does one eliminate this effect so that it's just a clean box-shadow glow?
https://jsfiddle.net/stu9qjLp/2/
Code:
#test {
border: 1px solid red;
border-radius: 1px;
width: 1px;
height: 1px;
box-shadow: 0 0 250px 125px red;
}
A radial gradient perhaps?
body {
margin: 0;
height: 100vh;
background: #000;
}
body::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-image: radial-gradient(ellipse at center top, red, black 50%, black);
}