I need to create a linear gradient like this Gradient requirement
I am trying to achieve it with css like this:
background: linear-gradient(-60deg,
rgba(255,183,107,1) 0%,
rgba(255,167,61,1) 15%,
rgba(255,124,0,1) 15%,
rgba(255,127,4,1) 100%);
This works for a specific height, but as the height of the div changes the shape of gradient changes as shown here Issue when height of div increases or decreases.
I want that the gradient should always touch the top right corner of div.
Any help is highly appreciated
You can code it like below:
.box {
height:100px;
background:
linear-gradient(to bottom right,#0000 50%,rgba(255,183,107,1) 50.1%)
top right /1000px 1730px no-repeat /* 1.73 = tan(60deg) */
rgba(255,127,4,1);
/* resize and see the result*/
resize:both;
overflow:hidden;
}
<div class="box"></div>
Related
I am sorry if it is dumb question, but this code is driving me crazy, i strip it down, was thinking i will be able to understand, but after doing that and investing 2-4 hours now i am confused about the things which i thought i knew.
This below code adding this cool effect when i over, it seems like background is appear from the bottom and goes to the top,
Only think i knew it has to some thing with background image, linear gradient, background size, and background-position
Please have look and try to take me out of my misery.
HTML CODE
<ul><li>Home</li> </ul>
css code
li {
background-image:
linear-gradient(to bottom,
transparent 50%,
#a2d39c 50%, #a2d39c 95%, #7cc576 95%);
background-size: 100% 200%;
transition: all .25s ease;
}
li:hover {
background-position: bottom center;}
li a {display: block;
padding: 1rem 0;}
If any body want to have link here is link as well.
https://codepen.io/arif_suhail_123/pen/jLPYOB
I've annotated your styles below to hopefully explain what is happening.
li {
// You're creating a background gradient, where the first 50% is transparent, the next 45% is #a2d39c and the last 5% is #7cc576
background-image:
linear-gradient(to bottom,
transparent 50%,
#a2d39c 50%, #a2d39c 95%, #7cc576 95%);
// The background size is twice the height of your element. Therefore with the 50% transparency and initial position, you're not going to see anything
background-size: 100% 200%;
// This will nicely transition between CSS property values when they change
transition: all .25s ease;
}
li:hover {
// When you hover over your list item, you're changing the position so that the bottom of the background is visible. This causes the 50% transparent portion of the background to disappear, and the coloured portion to slide into view
background-position: bottom center;}
}
Background Position
If you check out the CSS specs for background-position, you'll see that the default value is 0% 0%, which is basically top left.
Your CSS code does not specify an initial background position and so it will default to top left. Keep this in mind.
Your background gradient is defined to bottom, so from top -> bottom. The first 50% is transparent (invisible). The second 50% is comprised of two different colours.
Then consider that your background gradient is twice the height of your element. This is specified by the background-size: 100% 200% (100% width, 200% height). The background can be larger than the element to which it is applied, and any overflow will be hidden.
So initially when you're showing only the top half of your background gradient, what are you going to see? Only the transparent portion.
When you then override the background-position on hover, you're saying to now show the bottom center portion. Seeing as how your background matches the full width of your element, the center horizontal value doesn't change anything. But the bottom vertical setting does. It now means that the second 50% is displayed.
Does that help?
I want to create some flat-UI-like blocks but I need a little help. I got through some guides with linear-gradient(to left, rgba(255,255,255,0) ,rgba(255,255,255,1)); and so on, but I have't found what I actually need.
Is there any way, how to do any layer with linear opacity? I have quite huge database of images, (so I definitely can't photoshop them to have opacity by itself), and I am loading it into many "div" as a background-image. But I need to make the divs to start beeing transparent in about 75% of its width.
Is it somehow possible in CSS?
There is what I need to achieve:
You can set a linear gradient background with an extra stop to make an element transparent for 75% of its width, then linearly increase opacity.
For example:
background: linear-gradient(
to right,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 75%,
rgba(0,0,0,0) 100%
);
This makes an element have an opaque black (the three first rbga values) background for 75% of its width, then linearly transition to transparent in its rightmost 25%.
I'm afraid something like that is not possible using CSS. Since you have many images, and provided you don't show too many of them at once, you can consider using canvas to render the opacity to each image:
http://jsfiddle.net/u256zkha/
Using linear-gradient, partly from Jon's answer.
#parent{
position:relative;
width:fit-content;
}
#layer{
position:absolute;
width:100%;
height:100%;
background: linear-gradient(
to right,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0) 100%
);
}
<div id="parent">
<div id="layer"></div>
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=356&d=identicon&r=PG&f=1"/>
</div>
I have a java plugin that sets a menu on my left and then the resulting dynamic data on the right. When you click a menu item the corresponding data on the right scrolls to the top. The data on the right is a long list, when you click on a menu item you dont just see that one (single) result alone it just brings that one to the top of the page and the rest are below it.
So what I would like to do is set a color to the top part to draw attention that it's the result you asked for; the best thing for me would be to have it recognize what you clicked and set a background color but I don't know how to do that, or write java so if I could get any help would be nice.
The div is what moves, so I set a color to a top percentage of the page with the linear-gradient in CSS3 but it moves away when you click another menu item, since the div shifts up. I have a CSS3 animation but, because IE unfortunately still exists, I need something for browser-compatibility and for older browsers. The only things I've found are CSS3 gradients which I dont want: I do not need a gradient, I need a block of color without making another div because, like I said, the data is dynamic and it's not always the same thing in that div.
The gradient is nice, because I can set a percentage which is what im looking for but it has a fade, which I don't want, and if there is a solution that isn't CSS3 I would like that. Even if there's a way to do this in CSS3 please let me know as long as it's not going to do a gradient fade. Otherwise if anyone has any nifty ideas on how else to call attention to that one section I'm open to all ideas.
Gradients DO NOT necessarily have a fade, that is a misconception, let's say that you want your div to be 70% red (solid) starting from the top, your CSS will be.
background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)
Two Methods:
With Gradients:
div{
width:200px;
height:200px;
margin:50px auto;
border:4px solid rgb(50,50,50);
background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);
background-image: -webkit-linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)
}
Fiddle -> http://jsfiddle.net/QjqYt/
Without Gradients
div{
position:relative;
z-index:1;
width:200px;
height:200px;
margin:50px auto;
border:4px solid rgb(50,50,50);
}
div:before{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:70%;
content:"";
background-color:red;
}
Fiddle -> http://jsfiddle.net/6cKZL/1/
As an update to the accepted answer:
.only-start{
background: linear-gradient(
to right,
red,
red 1rem,
transparent 1rem,
transparent 100%
);
}
Rodney - You can use Colorzilla to make your own custom gradient. You can make any kind of gradient with the online tool and it gives you the CSS code. It also has an option to make it IE compatible.
Note: If someone deems this 'comment-ish' - I can move it.
You can use gradient with color percentage.
#gradbox {
height: 200px;
background-color: green; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, rgba(0,0,0,0) 20%, orange 20%); /* Standard syntax (must be last) */
}
<div id="gradbox"></div>
I have a gradient background in my website, which basically divides it into two colors horizontally:
Here's the CSS:
html {
height: 100%;
}
body {
background: -webkit-linear-gradient(top, #f57171 0px, #f57171 600px, #FFFFFF 600px, #FFFFFF 100%);
}
This works fine, but if the contents of my website increases and I have to scroll down, the white color of the background won't go all the way to the end of the website. It should go from 600px to 100%, but it just stops.
Any ideas?
Thanks.
You are setting the html to 100% height, which is just the screen height. Try setting both html and body to min-height:100%;.
jsFiddle example.
Also, 600px is an arbitrary point, I would do 50% or something.
When I use gradients, with little content, the gradient repeats, how can I prevent that?
http://jsfiddle.net/mcqpP/1/
I can try using html { height: 100%; }, but when my content requires scrolling ... the gradient repeats
http://jsfiddle.net/mcqpP/3/
How can I fix this
You need to set percentages on the CSS gradients, not absolute pixels. And as long as you only care about modern browsers (i.e. you don't care about IE6) then I suggest you stay away from images, the CSS works fine.
I'm pulling my answer from the answer to this question that I wish I could upvote 100 times:
How to get a vertical gradient background to work in all browsers? That accepted answer has everything you need with full cross browser compatibility.
Here's where I took your example and made it work: http://jsfiddle.net/HJvpf/1/
body {
background: -moz-linear-gradient(top, red 0%, blue 100%);
background: -webkit-gradient(linear, left top, left 100%, from(red), to(blue));
}
Oh and in your 2nd jsFiddle link, the reason it was repeating the gradient is because you set height 100% on html but the gradient was on body. You move that height: 100%; to the body and it works fairly well, but as you can see in my solution you don't need to specify height at all.
Edit: So you don't want it to repeat, but you also don't want it to take up the entire height. Just set repeat-x. http://www.w3schools.com/css/pr_background-repeat.asp
body {
background: -moz-linear-gradient(top, red, blue) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
To have the bottom gradient color fill the rest of the space:
body {
background: blue -moz-linear-gradient(top, red, blue) repeat-x;
background: blue -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
Why not render your gradient out as an 1px-wide image and use something like the following:
body {
background-color: #fff;
background-image: url("images/background.jpg");
background-position: center top;
background-repeat: repeat-x;
}
Setting the background-repeat value will help you control how the background... repeats. In this case it would be rendered as a solid band across the top.
http://www.w3schools.com/css/pr_background-repeat.asp
Also, using an image should work across all browsers, whereas the moz-gradients could be problematic. The image method above should render very predictable results across all browsers.
I had the same problem but realised that it made sense and so just accepted the scrolling / repeating gradient. You could set a fixed height, not %, but to ensure that the gradient didn't repeat you would need to set the height as bigger than anybody's screen who wants to view it. And you don't know what resolutions people have. My advice is to just leave it.