Hey i have actualy this background
And i want to change it to
#dark-bg {
width: 45%;
height: 100vh;
background-color: linear-gradient(to right, #330066, #421a9b)!important;
float: left;
}
#wave {
position: relative;
content: "";
bottom: 0;
width: 50%;
height: 100vh;
float: left;
background: url(https://i.imgur.com/IJelEnu.png);
background-size: contain;
background-repeat: no-repeat;
}
body {
background-image: linear-gradient(to right, #380774 60%, #4f30c6 )!important;
}
<div id="dark-bg"></div>
<div id='wave'>
<p></p>
</div>
I don't want to use image (i want to remove wave image if possible)
How i can do that?
Use the image as a mask
#dark-bg {
height: 100vh;
width: 50%;
background: linear-gradient(to right, #330066, #421a9b);
-webkit-mask:
linear-gradient(#000 0 0) left/75% 100% no-repeat,
url(https://i.imgur.com/IJelEnu.png) top right/25% auto repeat-y;
}
body {
margin: 0;
background-image: linear-gradient(to right, #380774 60%, #4f30c6);
}
<div id="dark-bg"></div>
I tried....
Turned out pretty good if I do say so myself :)
* {
margin: 0;
padding: 0;
}
#dark-bg {
width: 50%;
height: 100vh;
background: linear-gradient(90deg, rgba(51,0,102,1) 15%, rgba(67,26,156,1) 90%);
float: left;
}
#wave {
position: absolute;
content: "";
bottom: 0;
width: 50.06%;
height: 100vh;
transform: rotate(180deg);
background: url(https://i.imgur.com/Ds3Raj2.png);
background-size: contain;
background-repeat: no-repeat;
}
body {
background-image: linear-gradient(90deg, rgba(51,0,102,1) 54%, rgba(67,26,156,1) 90%) !important;
}
<div id="dark-bg"></div>
<div id='wave'>
<p></p>
</div>
Related
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 trying to put together a specific design for a website we are building. The header needs a parallelogram shape above it, and a trapezium to the right of the container, as shown below.
I've managed to add the parallelogram above the container, but i'm struggling to get the element to the right of the container. The following shows what i've done.
HTML
<div class="container">
<div class="row">
<div class="col">
Content Here
</div>
</div>
</div>
CSS
.container {
width: 700px;
}
.container:before {
content:'';
width: 100%;
height: 30px;
transform: skew(45deg);
background: #254896;
background: linear-gradient(90deg, #254896, #2c2b5b 100%);
display: block;
}
.row {
background: #f8f9fa;
}
.row:before {
content:'';
width: 100%;
height: 0;
border-image-source: linear-gradient(90deg, #FF0000, #940202);
border-image-slice: 1;
border-top: 30px solid red;
border-left: 30px solid transparent;
position: absolute;
left: 800px;
top: 30px;
}
.col {
background-color: #ddd;
padding: 10px;
}
https://jsfiddle.net/scarrott/vgtpna14/
The issues i'm having are:
Getting the red shape to sit neatly to the right of the container regardless of screen size.
Putting a gradient fill on the trapezium shape. If I use border-image-source it makes the shape a rectangle.
Any help would be greatly appreciated.
Here is an idea using multiple background. I used 400px instead of 700px to better see in the snippet
body {
overflow-x: hidden;
}
.container {
--w:400px;
max-width: var(--w);
position: relative;
margin: 40px auto;
}
.container:before {
content: '';
position: absolute;
top: -20px;
left: 0;
width: calc(50vw + var(--w)/2);
min-width: 100%;
height: 40px;
transform: skew(45deg);
transform-origin: top;
background:
linear-gradient(90deg, #254896, #2c2b5b 100%) top left/var(--w) 50%,
linear-gradient(90deg, #FF0000, #940202) bottom right /calc(100% - var(--w)) 50%;
background-repeat: no-repeat;
}
.row {
background: #f8f9fa;
}
.col {
padding: 10px;
}
<div class="container">
<div class="row">
<div class="col">
Content Here
</div>
</div>
</div>
Another idea with clip-path:
body {
overflow-x: hidden;
}
.container {
--w:400px;
max-width: var(--w);
position: relative;
margin: 40px auto;
}
.container:before {
content: '';
position: absolute;
top: -20px;
left: 0;
width: calc(50vw + var(--w)/2);
min-width: 100%;
height: 40px;
clip-path:polygon(0 0, calc(var(--w) - 20px) 0,var(--w) 50%,100% 50%,100% 100%,calc(var(--w) + 20px) 100%,var(--w) 50%, 20px 50%);
background:
linear-gradient(90deg, #254896, #2c2b5b 100%) top left/var(--w) 50%,
linear-gradient(90deg, #FF0000, #940202) bottom right /calc(100% - var(--w)) 50%;
background-repeat: no-repeat;
}
.row {
background: #f8f9fa;
}
.col {
padding: 10px;
}
<div class="container">
<div class="row">
<div class="col">
Content Here
</div>
</div>
</div>
Including bootstrap
body {
overflow-x: hidden;
}
.container {
--w: 540px;
position: relative;
margin-top: 40px;
}
#media (min-width: 768px) {
.container {
--w: 720px;
}
}
#media (min-width: 992px) {
.container {
--w: 960px;
}
}
#media (min-width: 1200px) {
.container {
--w: 1140px;
}
}
.container:before {
content: '';
position: absolute;
top: -20px;
left: 0;
width: calc(50vw + var(--w)/2);
min-width: 100%;
height: 40px;
clip-path: polygon(0 0, calc(var(--w) - 20px) 0, var(--w) 50%, 100% 50%, 100% 100%, calc(var(--w) + 20px) 100%, var(--w) 50%, 20px 50%);
background:
linear-gradient(90deg, #254896, #2c2b5b 100%) top left/var(--w) 50%,
linear-gradient(90deg, #FF0000, #940202) bottom right /calc(100% - var(--w)) 50%;
background-repeat: no-repeat;
}
.row {
background: #f8f9fa;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col">
Content Here
</div>
</div>
</div>
Another approach would be to to have the 2 parallelogram shapes inside the container div with specified percentages.
.row::before {
content: '';
width: calc(70% - 14px);
height: 30px;
transform: skew(45deg);
background: #254896;
background: linear-gradient(90deg, #254896, #2c2b5b 100%);
}
.row::after {
content: '';
width: calc(30% - 14px);
height: 30px;
position: absolute;
right: 0;
top: 30px;
transform: skew(45deg);
background: red;
background: linear-gradient(90deg, #FF0000, #940202);
}
jsFiddle
I have this design
How can I make the blue curved background on top of the image (I need the transparency as well) ?
I started it with a different backgournd but I don't know where to go from there. Any help will be really appreciated.
.bg {
background-image:url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg");
max-width: 100%;
height: 200px;
background-size: cover;
background-position: center;
position: relative;
}
.bluebg {
background-color: blue;
position: absolute;
}
<div class="bg">
<div class="bluebg">
</div>
</div>
https://jsfiddle.net/0rsLxtw5/7/
I hope the below-given snippet helps!
.bg {
background-image: url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg");
height: 200px;
background-size: cover;
background-position: center;
overflow: hidden;
}
.bluebg {
background: rgba(135, 206, 235, 0.5);
height: 140%;
width: 90%;
-webkit-mask-image: radial-gradient(circle at right, transparent 0, transparent 30%, black 30px);
mask-image: radial-gradient(circle at right, transparent 0, transparent 30%, black 30px);
}
<div class="bg">
<div class="bluebg"></div>
</div>
I changed your HTML like the parent as child and child as parent.
.bg {
background-image: url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg");
max-width: 100%;
height: 200px;
background-size: cover;
background-position: center;
position: relative;
-webkit-clip-path: circle(50% at 98% 50%);
clip-path: circle(50% at 98% 50%);
}
.bluebg {
background-color: blue;
position: absolute;
height: 200px;
width: 100%;
}
<div class="bluebg">
<div class="bg">
</div>
</div>
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%);
}
I am trying to change the background color of a button when it has focus. The background color is correct but the image disappears when focussed. I'm looking for a solution using pure CSS.
This is my code
#templatebtn {
background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
height: 94px;
width: 140px;
position: absolute;
background-repeat: no-repeat;
border: none;
background-position: 50px;
}
#tcolor {
background-color: #d0cece;height: 93px;
width: 140px;
}
#templatebtn:hover, #templatebtn:focus {
background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
height: 94px;
width: 140px;
position: absolute;
background-repeat: no-repeat;
background: -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%); height: 94px;
}
<div id="tcolor"><button id="templatebtn"></button></div>
I believe this is what you were looking for.
#templatebtn {
position: absolute;
border: none;
background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
background-repeat: no-repeat;
background-position: center;
width: 140px;
height: 94px;
}
#tcolor{
background-color: #d0cece;
}
#templatebtn:hover,
#templatebtn:focus {
background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}
<div id="tcolor"><button id="templatebtn"></button></div>
templatebtn {
background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
height: 94px;
width: 140px;
position: relative;
background-repeat: no-repeat;
border: none;
background-position: 50px;
}
#tcolor {
background-color: #d0cece;height: 93px;
width: 140px;
}
#templatebtn:hover, #templatebtn:focus {
background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
height: 94px;
width: 140px;
position: absolute;
background-repeat: no-repeat;
background: -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%); height: 94px;
}