I have a gradient that I am currently using that I would like converted from -webkit to the default linear-gradient. I have tried using all of the CSS generating tools online to import the code in order to see the other browser specific variants, but for some reason when I import the code the gradient in the results section just becomes white.
background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black));
JSFiddle Sample
Use
.sexy_line {
background: linear-gradient(to right, white, black, white);
}
See this MDN article for more info on linear gradients.
DEMO
.sexy_line {
margin: 25px 0;
height: 1px;
background: black;
background: linear-gradient(to right, white, black, white);
}
<div class="sexy_line"></div>
I use ColorZilla's Gradient Editor all the time since it spits out cross browser code and is super easy to use.
Related
I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of noise, which helps a little. Is there any other way to fix this banding issue?
You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-color underneath for your second colour. I'd also recommend playing around with background-size for large gradients that stretch across the screen, so the gradient doesn't actually fill the whole screen.
I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.
If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.
If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.
In Adobe Fireworks, I would export this as a PNG-24.
Good luck.
http://codepen.io/anon/pen/JdEjWm
#gradient {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
background: -webkit-linear-gradient(top, black, white);
background: -moz-linear-gradient(top, black, white);
background: -ms-linear-gradient(top, black, white);
background: -o-linear-gradient(top, black, white);
background: linear-gradient(top, black, white);
}
I made a "scatter.png" to put with my gradient. Like this:
Open gimp
100x100 image
Add alpha channel
Filters -> Noise -> Hurl... Accept defaults
Set opactity to 5%
Save and then add to gradient.
background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
It's a subtle effect on a subtle effect.
For a pure CSS answer you can use a blur filter to add blur to the css gradient and alleviate the banding. It can mean some rebuilding of the hierarchy to not blur the content and you need to hide the overflow to get crisp edges. Works really good on an animating background where the banding issue can be especially dire.
.blur{
overflow:hidden;
filter: blur(8px);
}
I know this issue is long solved, but for others experiencing banding and looking for a solution, a very easy fix for me was just simplifying the colours I included in my gradient. For example:
This gradient produces banding:
background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);
This gradient does not, and looks much the same:
background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
I know this is a bit very late, but I discovered a trick that works. For anyone having that rough edge at meet point of the colors. This removes it.
.gradient {
background: linear-gradient(
173deg,
rgba(0, 132, 255, 1) 50%,
rgba(255, 255, 255, 1) 50.5%
);
}
There's not really any method to remove the banding. CSS gradients are at the mercy of the various rendering engines of the browsers. Some browsers simply render better than others. The best you can do is short areas to cover and larger color ranges to increase the gradient steps.... Then wait for browser rending to improve.
Add a min-height.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
}
you can also set background-repeat to no-repeat but shouldn't be necessary.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
background-repeat: no-repeat;
}
this property seems to fix things
background-attachment: fixed;
got from this thread
I have tried this but it does not give the effect I want.
background: repeating-linear-gradient( 0, #222, #111 5px, #333 1px);
What I would like is to have the background be #222 and then every 5px going down the page I would like to have a 1px height horizontal line that is #333 color. I keep trying different combinations but I can't get it to work. Note this is just needed
for modern IE9+ browsers.
Something like this might be the simplest method.
body {
height: 100%;
width: 100%;
background-color: #fff;
background-image: repeating-linear-gradient(to bottom, transparent, transparent 4px, #f00 5px, transparent 5px);
}
Did you read the doc about repeating-linear-gradient?
If you try the example they give, you get something that works fine... Just go to this link and read :
https://developer.mozilla.org/fr/docs/Web/CSS/repeating-linear-gradient
Here is their example :
background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);
Go to this fiddle, seems like it's working fine...
http://jsfiddle.net/2o3ehav1/4/
Edit : vertical with your colors : http://jsfiddle.net/2o3ehav1/19/
(just try to edit your "pixel sizes")
Hope it helps! ;)
Something similar to this?
background: repeating-linear-gradient(0, transparent, transparent 4px, #333 5px, transparent 5px);
background-color: #222;
I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page.
Here is my CSS code:
.horizontalLines {
border-bottom: 2px solid #CCCCCC;
padding-top: 25px;
width: 100%;
}
This code only allows me to make only one line, how can i make multiple lines?
As an alternate solution, there's a beautiful lined paper effect written using CSS available here.
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
Browser Support: The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be
displayed correctly even on those browsers (for example at the time of
writing, Gecko is quite buggy with radial gradients).
Using your way you have to insert multiple of these elements. You can't simply repeat them.
Another - and I guess more suitable way - would be using a background image that you repeat horizontally and vertically to achieve this effect.
body {
background: transparent url(path/filename) repeat 0 0;
}
Or, if you can use gradients, nikhita dkslfslg's answer (+1 for that) might help.
Here you go.
.paper {
background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs=");
}
Just Encode an image in base64 and it works fine.
You can try encoding HERE.
You can do it with box shadows:
.lines{
width:500px;
height:400px;
background: red;
box-shadow: 0px 10px 0px 0px black, 0px 20px 0px 0px green, 0px 30px 0px 0px blue;
}
http://jsfiddle.net/7DkKc/
Or simply with images:
.lines{
background: transparent url(url) 0 0 repeat-x;
}
Or with gradients.
http://www.colorzilla.com/gradient-editor/
When I hover unto my button, it gives a white flash first when starting the transition. Why does it sort of flickers when I apply a css3 transition to my button? My browser is Google Chrome
See here
<button>Log In</button>
CSS:
button {
background: #ff3019;
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
border:1px solid #890000;
display:block;
margin:0 auto;
width:200px;
padding:5px 0;
border-radius:8px;
color:#fff;
font-weight:700;
text-shadow:0 1px 1px #000+50;
box-shadow:0 2px 3px #000+150;
-webkit-transition:background linear .5s;
}
button:hover {
background:#ff3019;
}
button:active {
background:#cf0404;
}
I got rid of the flickering. Add «-webkit-backface-visibility: hidden;» to the elements you are transitioning. Voilà!
Miguel is right about backface-visiblity fixing the annoying flash. However, I'm using transform scale and the SVG animated will not be sharp after scaling. It is sharp if you don't use the backface-visiblity property.
So either you got a nice animation with a blurry graphic, or a nice looking graphic with screen flashes.
You can however add the following line to the parent of the object to be transitioned, which will fix the flashing of the screen and still renders your graphic sharp after scaling.
-webkit-transform: translate3D(0, 0, 0);
I believe it is currently an issue without a fix. I too have run into this before playing around and could not get it to work. Using a solid color seems to be fine, or faking it with a background image.
Similar Question here: Webkit support for gradient transitions
More detail: http://screenflicker.com/mike/code/transition-gradient/
The flicker you're noticing is actually the button's background color being changed to transparent (so, the button "flashes" or turns white in your Fiddle because the body's background-color is white).
If you overlay your button on top of another element with the exact same size/height/background-color (including gradients), the "flicker" won't be noticeable.
Check here for an example using your fiddle: http://jsfiddle.net/hrDff/12/
Still definitely a bug tho...
I think the issue is that you are switching from a linear-gradient background to a solid background color for Google Chrome and Microsoft Edge web browsers. To fix this issue you would add a similar linear-gradient background to your pseudo classes, in this case the :hover and the :active. I tried it myself on your jsfiddle and I had no flashing in the rendering while hovering over the button.
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
I changed the top color of the linear-gradient to give a noticeable change to the hover effect.
button:hover {
background: -webkit-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
}
There are no more issues with flashing when I hover over the button in Chrome or Microsoft Edge. I hope this helps.
With a similar issue, Jan's suggestions helped improve for all background images but one. I got rid of the flickering of the last one by noticing two conflicting positioning rules. I had for a position:static one rule margin-top:-3em (minus) and the other one margin-top:5em (plus). Thus, I suggest you carefully check the consistency of the positioning when you experience such an issue.
In your case Michelle, I've been testing with a longer delay 1s to 3s, which helped me understand what is that clearer stage, a flash with a very short delay. Your gradient starts with no background in fact and what you see is the background of the page. I got this information by changing the background of the body of my test page from ivory to black.
When I tried your gradient on a black background I got a black stage/flash (easier to see at 3s).
Perhaps it should be wise to test the order of your rules, and also try to understand why the gradient starts from the background of the body or parent and not from your background.
A workaround could be to set your button in a div with your button red background at the exact size and shape of your button.
I solved the blinking like this:
Html as follows:
<div class="pswp__item" style="display: block; transform: translate3d(464px, 0px, 0px);"><div class="pswp__zoom-wrap" style="transform: translate3d(87px, 248px, 0px) scale(0.57971);"><img class="pswp__img" src="/platform/advice/feedback/downloads?attachmentIds=1304495004557536" style="opacity: 1; width: 414px; height: 414px;"></div></div>
css as follows:
.pswp__zoom-wrap{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.pswp__zoom-wrap *{
-webkit-backface-visibility: hidden!important;
backface-visibility: hidden!important;
}
.pswp__item{
transform: translate3D(0, 0, 0);
-webkit-transform: translate3D(0, 0, 0);
}
This link fixed it for me. You just have to add a line to the css of the element that's flickering:
http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit
My Boss give me an image (please see below) and told him I would make his site look the same. Here is my code, but it doesn't look like the image:
HTML
<div class="clearfix" id="footer">
<ul>
<li>Become a Virtual Active Facility</li>
<li>About Us</li>
<li class="last">Contact</li>
</ul>
</div>
CSS
#footer {
background: -moz-linear-gradient(left center, white, white) repeat scroll 0 0 transparent;
margin-bottom: 25px;
margin-top: 25px;
opacity: 0.6;
padding: 10px 25px;
width: 914px;
}
How can I get the result to look the same?
Your gradient is defined as going from 'white' to 'white'. In other words, there is no gradient.
In the final 2014 syntax:
background-image: linear-gradient(to right, transparent, white);
Note that prefixed versions (moz-, webkit-, o-, etc) use a different syntax, for backwards compatibility.
try it:
background: -moz-linear-gradient(left center, transparent, white) repeat scroll 0 0 transparent;
You need to use alpha (rgba) look at that, may help you: CSS3 Transparency + Gradient
This one works for me
background: -moz-linear-gradient(
left,
rgba(0,0,0,0.001) 0%,
rgba(201,201,201,1) 50%,
rgba(0,0,0,0.001) 100%
);
I use it to add some fade effect on both side of my hr