In this pen, the position of the repeating background gradient is animated. This makes Google Chrome render the background gradient wrong. It works fine in Mozilla Firefox.
How can I fix it?
For my body background gradient I used this:
background-image: repeating-linear-gradient(40deg, #d61e29 0px, #661011 40px);
and the animation is bg:
animation: bg 15s infinite linear;
I believe it's related to this bug - https://code.google.com/p/chromium/issues/detail?id=162538. If you remove your setting the background size to 200% you see the gradient clears up somewhat. If you reduce it to 50% it becomes smooth. I think you're going to have to take another approach to the animated background. Also notice setting the angle to 0 gives smooth gradient.
Try giving a fixed background size, in effect tiling it, so that the tiles seem nicely. background-size: 100px 100px; not sure the exact size to get the seems right. Here is a code pen - http://codepen.io/anon/pen/vuFod;
background-size: 100px 100px
background-image: -webkit-repeating-linear-gradient(45deg, #d61e29 0px, #661011 71px);
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 have an animation that is working beautifully in Chrome but is not registering at all in Firefox. It is an animation that mimics how an old tv might turn on. Starting from the middle of the 'box' spreading into a horizontal line, and then finally spreading upwards and downwards simultaneously to fill the 'box'.
The following is my CSS.
#keyframes tvOn{
0%{
clip-path: inset(49.9% 49%);
}
45%{
clip-path: inset(49.9% 0%);
}
100%{
clip-path: inset(0% 0%);
}
}
#box{
...
animation: 1s ease tvOn;
...
}
Is inset what is not supported? I even tried 'rectangle' and 'polygon' but neither seem to work. If you know of a Firefox polyfill that can solve this problem or an alternative I appreciate it. This clip-path inset is working beautifully, I can't achieve the same result this easily with any other css property I've tried. Even animating the width and height is tricky because those grow from the top left corner, instead of the direct center/middle of a 'box'.
Also I don't want to animate the box growing a bigger size, its more about revealing a completely hidden box in a unique way slowly across both axes to make it seem like a tv turning on.
background: -webkit-linear-gradient(#FFFFFF, #EAEAEA);
background: -o-linear-gradient(#FFFFFF, #EAEAEA);
background: -moz-linear-gradient(#FFFFFF, #EAEAEA);
background: linear-gradient(#FFFFFF, #EAEAEA);
What I basically want to do, is to have some sort of minimum and maximum gradient length (for instance, the gradient can't be smaller than 500px, even if the background is, and neither can it be bigger than 500px, even if the background is). I have tried using this method:
background-size:500px;
(aswell as combining it with background-repeat:y-repeat), but that doesn't work, since the gradient later on repeats itself from top (and what I would like is for it to maintain its ending-color through the rest of the element).
So shortly, I'm wondering if there's a way to stop a gradient after a certain height, only allowing it to cover a part of the element (hence, preventing it from looking different on all pages, with different sized elements), without using images as background. However, I'd also like to know if using this method is worth it, both when it comes to compatibility and effort.
Thanks!
You just need to add color stops to your gradient, like so:
Working Example
body, html {
height:200%;
}
body {
background: -moz-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
background: -webkit-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
}
MDN Documentation for Linear-gradient
So I made the following test fiddle, and it seems that if you specify a background-size then the gradient will be resized to that size regardless of the element dimensions (note that you have to explicitly define a width and a hight for background-size to work properly in Firefox).
http://jsfiddle.net/myajouri/y4b3Z/
I have checked this in latest Chrome, Safari and Firefox and looks the same in all three borwsers.
How can I create a programmatic horizontal gradient that starts at a prescribed location (in pixles on the x-axis)?
Here's the issue- I've got an image set as background-image - ideally, what I'd like to do is declare a CSS gradient that starts close to the edge of the image (~1800 pixels) and fades gracefully to full black.
So far, the best solution I have is to have two div elements- one with the photo background and the other with a 1px tall gradient image repeated along the y-axis with a background-position that starts at 1780px.
This works, but I really want to get away from the 1px image trick. Any ideas?
<div id="photobg">
<div id="gradientbg">
</div>
</div>
#photobg {
background-image:url('photourl.jpg');
}
#gradientbg {
background-image:url('1pxgradient.jpg');
background-repeat: repeat-y;
background-position: 1780px 0;
height: 100%;
}
What I'd like to do, in theory, is use color stops at 1780 px for a CSS gradient but as I understand it, CSS only supports % values as color stops.
Reference:
CSS 3 Gradient n pixels from bottom - Webkit/Safari
No, you can use pixels with linear gradient:
background-image: linear-gradient(transparent 1780px, black 100%);
You can also combine this gradient with multiple background images on one div.
You might want to check out this jsbin, I've made for you:
http://jsbin.com/sonewa/1/edit
This block of css will do what you want
background: -moz-linear-gradient(center top , #00AFF0, #53D4FE); //this is for mozilla
background-image: -webkit-linear-gradient(top, #00AFF0, #53D4FE); //this is for chrome and safari
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00AFF0', endColorstr='#53D4FE', GradientType=0); //this is for IE
while the gradient is from color #00AFF0 to #53D4FE (top to bottom)
I am working on a website which uses multiple css3 gradients as overlay for a background tiled with texture image
site url: --snipped--
currently for header i am using following css:
#header {
background: #DBD6D3;
height: 364px;
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#FFFFFF,#DBD6D3);
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#DBD6D3),to(#FFFFFF));
}
#header .wrp{background:url('img/headerBg.png');height:100%;padding-top:40px;}
here headerBg.png is a semi-transparent texture of size 5x5 pixel, ad for body I need to create this background:
I need to know how to make this kind of radial background in CSS3, initially I had used same code as header but with rgba() for color, setting end of the gradient with 0 opacity but it created too much noise.
tried few online generators as well for CSS3 radial background but none of them were good!
This image i am using is taking up 280kbs and I want to reduce it as it significantly effects the performance! Help would be appreciated.
update:
Upload psd, can be downloaded from
http://ylspeaks.com/stackoverflow_css3.zip
and adding bounty
Edit Jan 2011:
Webkit nightly now supports elliptical gradients http://webkit.org/blog/1424/css3-gradients/, these will eventually find their way into Safari and Chrome. Faking elliptical radial gradients through css transforms will eventually be unnecesary.
Your problem has the most difficult constraints I've ever encountered, but it is an interesting challenge and it illustrates the limitations of each browsers approach for radial backgrounds, so that's why I decided on trying.
First, the rgba approach is stillborn because the opacity is going to hide some of the noise. It's better to apply semitransparent noise on top of the gradient, you can avoid the extra div by applying multiple background on the same image:
background: url(noise.png) repeat top left, -webkit-gradient(radial,50% 0,700,50% 0,100,from(#6f2813),to(#B9513D)) transparent;
You may notice the color property at the end of declaration, it looks weird but this how you declare colors when you apply multiple backgrounds.
Second, webkit doesn't support elliptical backgrounds, so the work around to this is squishing the gradient through -webkit-transform and positioning it a bit further up:
-webkit-transform: scale(1, 0.7) translate(0, -350px);
For sanity, the right thing to do would seem be applying circular backgrounds on both FF and webkit and then transform them. However, Firefox's transform doesn't support scaling gradients! So we apply an elliptical background:
background: url(noise.png) repeat top left, -moz-radial-gradient(50% 0 0deg,ellipse farthest-side,#B9513D,#6f2813) transparent;
But, since Webkit's container is squished, Firefox's gradient is larger! At this point we would think about applying different css rules for the height of the gradient, but since Firefox doesn't scale the gradient, we can apply the same transformation on the elliptical background the get the containers to be of the same height:
-moz-transform: scale(1, 0.7) translate(0, -250px);
And voila! we have an elliptical gradient with noise, that works on both Safari and Firefox!
http://duopixel.com/stackoverflow/gradient/
background: #702914;
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#A94122,#702914);
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#702914),to(#A94122));