Using CSS or CSS3, how can i make the folowing background ?
If possible, i'd like ie6,7,8 support. I can use a javascript based tool to simulate CSS3 for old browsers (like css3pie).
If possible, i'd like ie6,7,8 support.
Use a background image. Even if you could use pure CSS3 to create such a pattern for a background (I highly doubt that is possible), it's not worth the hassle to use a bunch of JavaScript libraries and such just to get it to work in those versions of IE.
I use this.
Then you just do background-image:url(blahblahblah.gif)
Any reason you're still supporting IE6? It would be easy to do without IE6 support. IE really sucks for gradient support, so you'll need to use an image, but here's the CSS anyway.
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
I know this probably doesn't match your image. I'm sorry, but your image host is blocked by my work, so you'll have to interpret from here. This will work with webkit browsers and FF3.6, and will fall back to the color specified in background-color for non-compliant browsers.
You have to use a repeating texture square. Find a small ping and use a repeating backround.
Related
I'm trying to lighten / darken my button background when :hover on.
I tried different style like
background-color:rgba(0,0,0,0.5);
background-blend-mode:darken;
But it doesn't work like i want.
I want a really really light lighten and same for the darken.
background: linear-gradient(173deg, rgba(255,121,218,1) 0%, rgba(214,108,219,1) 39%, rgba(171,94,220,1) 85%, rgba(155,89,220,1) 100%);
here is my baby :
Thanks for your help community <3
You can use lighten inside linear-gradient like that:
background: linear-gradient(
356deg,
lighten(*your color*, 5%) 0%,
lighten(*your color*, 5%) 33%,
lighten(*your color*, 5%) 100%
);
Exemple here: https://codepen.io/perpel_/pen/LYyJWpp
You can add a linear gradient white with opacity.
background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), *your color of the btn*;
I too encountered this problem and was looking for a solution.
In the end, I decided to use different variables based on perpel's solution
/* gradient colors */
#color1: #8f23a2;
#color2: #c1276a;
#color3: #dc8f41;
#darken :10%;
#lighten :10%;
#my-gradient: linear-gradient(to bottom, #color1, #color2 50%, #color3);
#my-gradient-darken: linear-gradient(
to bottom,
darken(#color1, #darken),
darken(#color2, #darken) 50%,
darken(#color3, #darken)
);
#my-gradient-lighten: linear-gradient(
to bottom,
lighten(#color1, #lighten),
lighten(#color2, #lighten) 50%,
lighten(#color3, #lighten)
);
I need to apply color variable to liner-gradient, which also needs to have opacity. So in that case rgba(red, green, blue, opacity) is mandatory. Is there any way to apply variable color without hard coding rgba() in liner-gradient?
For instance :
let gradient= `linear-gradient(to bottom, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 1) 20%)`
.arraow {
background: ${(p) => p.gradient}
}
The above code is only for one color and taht is #FFFFFF at the moment. But this needs to change depending on color selected for the gradient to use.
I need something like below:
const gradientColor = p.arrowColor;
let gradient= `linear-gradient(to bottom, var(gradientColor) 15%, var(gradientColor) 40%,
var(gradientColor) 20%)` <<<<<------ here I am missing the opacity since they are not rgba()
It doesn't seem a nice way to manually create all rgba() and keep it a file and access it with a conditional statement.
I'm applying a basic linear-gradient like this:
background-image: linear-gradient(to top, red, rgba(0,0,0,0));
this behaves as it's supposed to everywhere except in safari where the transparent is rendered as a blackish/greyish color:
here's chrome (how it is supposed to be):
and here's safari
I've tried prefixing it with -webkit-, changing the rgba to rgba(0,0,0,0.001) but it never goes to solid transparent. is this a bug? is there a way to fix this?
here's a fiddle https://jsfiddle.net/2Lrp3sv1/2/
No browser renders transparent as rgba(255, 255, 255, 0), that's completely wrong. transparent is always rgba(0,0,0,0), as defined in the CSS Color 3 specification. However, a few years ago we changed how color interpolation works in gradients and specified it should happen in a premultiplied RGBA space, exactly to fix this issue and make interpolation with transparent work as expected. Looks like other browsers have implemented this change, but Safari hasn't yet. If you want gradients with Safari to look the same, you need to use color stops that utilize the transparent version of the color you are interpolating to/from (which may sometimes require two color stops at the same position, if these colors are different), in this case linear-gradient(to top, red, rgba(255,0,0,0)). Or just wait for Safari to catch up! :)
This has to do with the way browsers render transparent.
For most browsers,
transparent === rgba(255,255,255,0)
But Safari renders it as
transparent === rgba(0,0,0,0)
So if you have a gradient from transparent to white (or rgba(255,255,255,1)), for most browsers you're only changing the alpha from 0 to 1 along the gradient.
But for Safari, you're changing the alpha from 0 to 1 and the color from 255 to 0, so you get a gradient of greys.
This drove me crazy for a while.
Based on what #AJFarkas wrote, just replace transparent with rgba(255, 255, 255, 0) and it works fine on Safari!
In my case it was a linear gradient from white to transparent to white:
background-image: linear-gradient(to right, #fff 10%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, #fff 90%);
for my case looks like changing from
background-image: linear-gradient(rgba(243, 243, 251, 1), transparent);
to:
background: linear-gradient(rgba(243, 243, 251, 1), rgba(255, 255, 255, 0));
works perfectly on safari.
i am seeing this in Safari, too. For me, it is fading to a light red, even though none of the colors I use is anywhere near red.
I solved it using 'transparent' as the value. Once I stopped using rgba, it looked like expected.
I had a situation where the colours in the gradient were being dynamically applied by a CMS, so here's a Javascript fix for this issue in Safari that takes this into account.
Assuming you're using a pseudoclass to achieve this, you can use js to return the element, create a new style tag and insert it into the head of the document.
<script>
var col = document.querySelector('.my_div').style.color;
var style = document.createElement('style');
// Replace RGB with RGBA (we need the opacity)
col = col.replace(/rgb/i, "rgba");
col = col.replace(/\)/i,', 0)');
//Create our new styles based on the returned colours
style.innerHTML =
'.my_div::before {'
+ 'background-image: linear-gradient(to left, currentColor 0%, '
+ col
+ ' 15%);'
+'}';
var ref = document.querySelector('script');
// Insert our new styles before the first script tag
ref.parentNode.insertBefore(style, ref);
</script>
Here's the source of this great trick
I have made a circle using CSS3, trouble is in older browsers (ie7 etc) the circle appears as a square.
I know I could use a background image as a backup, but doesnt this defeat the point of using code?
If i was to put background-image in, where would it go in the CSS?
.ButtonB:hover, .ButtonB.hover {
background: -moz-linear-gradient(
center top,
rgba(255, 255, 255, .2) 0%,
rgba(255, 255, 255, .1) 100%
);/* FF3.6 */
background: -webkit-gradient(
linear,
center bottom,
center top,
from(rgba(255, 255, 255, .1)),
to(rgba(255, 255, 255, .2))
);/* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}
Using the following will provide better support for a variety of browsers and will fallback to a solid colour when gradients are not supported, you could replace this solid colour with an image.
background: #0A284B; /* for images use #0A284B url(image.jpg)*/
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;
You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.
You're using a whole load of CSS features that aren't supported in older browsers -- gradients, alpha channel transparency, may border radius too.
Short answer is that often the best answer is simply to leave it and let the really old browsers show it differently; it may not look as pretty as you intended, but if it's usable in IE7 then you've probably done enough already.
If you really do need to support these features in IE7 and other old browsers then you might want to look into CSS3Pie, which provides a javascript-based fallback solution in IE for all of the features I can see you using here. Download the script and follow the instructions on the site for setting it up.
Hope that helps.
.ButtonB:hover, .ButtonB.hover {
background: url('yourpathtoimage'); /* for old browsers */
background: -moz-linear-gradient(
center top,
rgba(255, 255, 255, .2) 0%,
rgba(255, 255, 255, .1) 100%
);/* FF3.6 */
...
}
In this case if browser support linear-gradient it will override first line.
I need to create a "sharp" gradient for both the header and navigation text on a site I'm building. I'm trying to make it as pure HTML5/CSS3 as possible, and would like to stick with #font-face and not move over to Cufon. What I mean by sharp gradient is two colors, with no blending in between.
Example: http://dl.dropbox.com/u/12147973/sharp-gradient.png
I found a way to do it in Cufon, but as I said, I want to stick to #font-face. Cufon gives me too much grief in IE, and I really love how #font-face works.
I also found a way to do gradients on text with CSS3, but I can't figure out how to do it with "sharp" gradients. http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/
As you can see from my example, using the PNG image trick won't work, because it's not on a solid background. If all else fails, I'll just use a smooth gradient, but I have trust in the good people of StackOverflow.
Gradient I'm currently working with:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8a8a8), color-stop(50%,#a8a8a8), color-stop(50%,#6d6d6d), color-stop(100%,#6d6d6d))
NOTE: I don't mind if it's only a one-browser solution. If that's all their is, then at least it's better than nothing.
I believe you'll need to use color stops. In this situation, you'll want to colors in your gradient to stop at the exact spot.
Looking at the demo you have on Nettuts, I took the code and modified it to create a two-tone sharp gradient using this code:
-webkit-mask-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, rgba(15,8,188,1)),
color-stop(0.5, rgba(70,62,255,0.5)));
Replace "-webkit-mask-image" piece from the demo with what I have above and it should be what you're looking for. Adjust the RGB values for your preferred colors. Note though in the demo there's some additional things in the CSS that might produce unexpected results, e.x. the color property in the "h1 a" selector and the color & text-shadow property in the "h1:after" selector. You may want to remove those to get a better idea of how the effect looks like in its purest form.
Also, please note that the above code will only work for webkit based browsers (e.g. Chrome & Safari). You'll need to implement the appropriate browser prefix properties for other browsers (e.g. -moz-), but before you do that make sure the browser supports the "mask-image" and "gradient" property.
Cheers! :)
Here is an example I did for buttons in an app
a.primary[type="button"],input.primary[type="button"], input.primary[type="submit"],input.primary[type="reset"]{
background-image: linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%);
background-image: -o-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%);
background-image: -moz-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%);
background-image: -webkit-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%);
background-image: -ms-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%);
a.primary[type="button"] span,a.secondary[type="button"] span{padding: 0 20px;height: 20px;}
Then you can use it with inputs or a tags with a type = button
<a type="button" class="primary" href="/neeto"><span>Button!</span>