I want the bottom of my background-color to be another colour. I'm sure it involves a linear-gradient? but unsure on how to implement it
Sample code:
.background{
height:100px;
width:200px;
background-color: #11143b;
background: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);
}
<div class="background">
</div>
How I eventually want the above code to look:
Any help would be appreciated.
Simply like this:
.background{
height:100px;
width:200px;
background:
linear-gradient(to bottom right, transparent 49%,red 52%) bottom / 100% 20px no-repeat,
#11143b;
}
<div class="background">
</div>
Solution 1: After pseudo element
You can make a triangle an position it in the desired loscation. This element wont affect the content inside your element as it has a position of absolute
.background{
height:100px;
width:200px;
background-color: #11143b;
position: relative;
}
.background:after{
content: '';
position: absolute;
width: 0;
right: 0;
bottom: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 200px;
border-color: transparent transparent #ff0000 transparent;
}
<div class="background">
</div>
Solution 2: Gradient
This linear gradient can be a solution but might have some resolution problems
.background{
height:100px;
width:200px;
background-color: #11143b;
background: linear-gradient(0.48turn, #11143b 85%, red 75%);
}
<div class="background">
</div>
Hope this helps:>
Related
How can I apply different angles to the segments of a gradient, e.g. have the red and blue gradients at 45 degrees and green at 90 just like the image below?
.gradient1 {
height: 200px;
width: 200px;
background-image: linear-gradient(90deg, red 0%, blue 50%, green 50%);
margin-bottom: 10px;
}
.gradient2 {
height: 200px;
width: 200px;
background-image: linear-gradient(45deg, red 0%, blue 50%, green 50%);
}
<div class="gradient1"></div>
<div class="gradient2"></div>
sounds a conic-gradient to me:
.box {
width:200px;
height:200px;
background:conic-gradient(from -90deg at bottom,red,blue , green 90deg);
}
<div class="box"></div>
Or
.box {
width:200px;
height:200px;
background:conic-gradient(from -90deg at bottom,red,blue 90deg, green 0);
}
<div class="box"></div>
Or maybe multiple layers with a linear-gradient
.box {
width:200px;
height:200px;
background:
linear-gradient(45deg,red,blue) left/50% 100% no-repeat
green;
}
<div class="box"></div>
Happy new year!
Im trying to substitute this background picture with a css for scaling purposes.
Im having a problem with gradients logic.
the div properties:
.bg {
border: 1px solid white;
border-radius:10px;
padding:10px;
width:100%;
}
then im trying to color it
the background color is #065BDB
the 'bubble reflection' color is a gradient from rgba(87,144,231,1) to rgba(87,144,231,0) - same color with fading opacity.
to make the right shape of the 'bubble' i need to draw circle-square-circle with gradients, the circles draw ok, but the rectangle is problemetic
background:
radial-gradient(2em 2em at 3% 25%, rgba(87,144,231,1) 50%, transparent 50%),
linear-gradient(to bottom, transparent 3%, rgba(87,144,231,1) , transparent 97%),
radial-gradient(2em 2em at 97% 25%, rgba(87,144,231,1) 50%, transparent 50%);
im having multiple issues with this, cannot figure out how to draw a square from top to bottom with a margin on left and right, and how to add transparency from top to bottom to it, + adding a seconds background, maybe its better to make 2 divs instead of 1.
You can rely on a pseudo element and easily obtain the result:
.bg {
border: 1px solid white;
border-radius: 50px;
height:60px;
background: #065BDB;
position:relative;
z-index:0;
}
.bg::before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:15px;
right:15px;
height:30px;
border-radius:inherit;
background:linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0));
}
<div class="bg">
</div>
With multiple background you can try this:
.bg {
border: 1px solid white;
border-radius: 50px;
height:60px;
background:
radial-gradient(30px 30px at right,transparent 50%, #065BDB 52%) 0% 10px/35px 30px,
radial-gradient(30px 30px at left,transparent 50%, #065BDB 52%) 100% 10px/35px 30px,
linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0)) 0 10px/100% 30px,
#065BDB;
background-repeat:no-repeat;
box-sizing:border-box;
}
<div class="bg"></div>
We can add some CSS variable to control the shape:
.bg {
--h:30px; /*the height of the bubble*/
--d:35px; /*the distance from the sides*/
--t:10px; /*the distance from the top*/
margin:5px;
border-radius: 50px;
height:60px;
background:
radial-gradient(var(--h) var(--h) at right,transparent 50%, #065BDB 52%) 0% var(--t)/var(--d) var(--h),
radial-gradient(var(--h) var(--h) at left,transparent 50%, #065BDB 52%) 100% var(--t)/var(--d) var(--h),
linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0)) 0 var(--t)/100% var(--h),
#065BDB;
background-repeat:no-repeat;
box-sizing:border-box;
}
<div class="bg"></div>
<div class="bg" style="--h:20px;--d:50px;--t:20px"></div>
<div class="bg" style="--h:40px;--d:100px;--t:5px"></div>
try with ::before
.bg {
width:100%;
height:50px;
position:relative;
background:royalblue;
border-radius:20px;
}
.bg::before {
content:'';
width:97%;
height:25px;
background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.07));
position:absolute;
top:7px;
left:50%;
transform:translateX(-50%);
border-radius:20px;
}
<div class="bg"></div>
How can make a simple border bottom color with gradient color?
div{
border-bottom:10px solid linear-gradient(#FF4000, transparent);
height:20px;
width:auto;
background:#ccc;
}
<div></div>
To set a border gradient on a single border (or multiple borders), you simply need to declare style rules in your CSS for:
border-image
border-image-slice
border-image-width
.box {
width: auto;
height: 20px;
background: #ccc;
border-image: linear-gradient(to right, rgba(255, 64, 0, 1), rgba(255, 64, 0, 0));
border-image-slice: 1;
border-image-width: 0 0 10px 0;
}
<div class="box">
</div>
N.B. The fade-to-transparent gradient is achieved using rgba colors (in place of hex colors).
rgba(255, 64, 0, 0) (with an alpha channel of 0) is the completely transparent equivalent of rgba(255, 64, 0, 1) (which, with an alpha channel of 1, is completely opaque).
Using :after pseudo element and linear-gradient you can get desire results. Here in this code I am using background:liner-gradient on :after pseudo element with just using a one single element.
You may have to use browser prefix as well if you targeting older browsers.
Check Demo as well.
div {
height: 100px;
border: 1px solid red;
position: relative;
}
div:after {
height: 2px;
width: 100%;
position: absolute;
content: "";
left: 0;
bottom: 0;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
<div>Hi</div>
Try like this:
.myClass {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,172)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,172) 50%, rgb(0,255,255) 67% );
padding: 10px;
}
.myClass > div { background: #fff; }
JSFIDDLE DEMO
You can set gradient as border color. But you can do it using another element.
<style>
div {height:20px; background: linear-gradient(#FF4000, transparent); padding-bottom: 10px;}
div div {background: yellow; padding-bottom: 0;}
</style>
<div>
<div></div>
</div>
http://jsfiddle.net/7et1w393/
-webkit-linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%)
div {
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
height: 20px;
width: auto;
background: #ccc;
}
<div></div>
I am trying to achieve a typical style in a div by splitting it into 2 halves and then creating a diagonal in between so it looks good. Screenshot below:
<div class="contact hidden-xs">
<div class="diagonal"></div>
</div>
.contact{
width: 100%;
height: 500px;
background: linear-gradient(to right, #f87f73 50%, #292423 50%)
}
.diagonal{
margin-left: 50%;
width: 0px;
border-width: 500px 200px 0px 0px;
border-style: solid;
border-color: #f87f73 transparent transparent transparent;
}
This is how I have done this. Now my problem is that since I have that diagonal there, it is making the red part bigger by that much. And it does not look good in smaller screens. How do use the linear gradient property so that it is not 50% 50%, instead it is something like 40% 60%, so that the diagonal doesn't make much difference. When I try 40% 60% in the gradient property it is mixing up the gradients which is only logical. How to make this work?
i think this code will make effect like your screen shot.
put this code in selector you want too look like the screen shot.
background-color: #f87f73;
background-image: -webkit-linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
background-image: linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
You can do that using border and flexbox
Snippet
.content {
width: 100%;
background-color: grey;
display: flex;
justify-content: flex-end
}
.diagonal {
border-bottom: 100px solid red;
border-left: 75px solid rgba(0, 0, 0, 0);
height: 0;
width: 30%;
}
<div class="content">
<div class="diagonal"></div>
</div>
Please notice you can change the width as you need.
I want a design like this:
So in fact a left side with background-color, a right side with background-color (divs of course, easy).
But can I do a diagonal line with CSS?
You can achieve this shape with a skewed pseudo element :
DEMO
HTML :
<div>
<h1>Your title here</h1>
</div>
CSS :
div{
padding:0 10px 10px;
background:#E7E5DD;
}
h1{
margin:0;
display:inline-block;
position:relative;
z-index:1;
padding:10px 50px 10px;
overflow:hidden;
}
h1:before{
content:'';
width:100%; height:100%;
position:absolute;
top:0; left:0;
background:#fff;
z-index:-1;
-webkit-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
transform: skewX(-20deg);
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
}
If you want to have with with pure CSS - see
http://css-tricks.com/snippets/css/css-triangle/ and
http://apps.eky.hk/css-triangle-generator/
(You would need a white top-left triangle on the gray area)
width: 0;
height: 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #fff transparent transparent transparent;
Please note that some browsers will not use anti-aliasing when drawing the borders.
A simpler approach in this case would be to have images for background - one for the text with the diagonal line, another one for the grey area.
http://jsfiddle.net/nuxcbqqq/1/
<div class="crossed"></div>
.crossed {
width: 100px;
height: 100px;
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%);
}
Code from here draw diagonal lines in div background with CSS