Is it possible using just HTML and CSS to create a gradient dot in the background?
This should be quite easy to do with the IMG, but is there also a pure CSS variant?
Example
Thanks! :)
Yes you can use something like this:
background: rgb(3,164,153);
background: radial-gradient(circle, rgba(3,164,153,1) 0%, rgba(3,164,153,0.3660057773109243) 35%, rgba(3,164,153,0) 100%);
radial-gradient is used to create circular or elliptical gradients. I am keeping the color constant (rgba(3,164,153,1)) while increasing the transparency.
You can read more about radial-gradient here: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient
Also, I used this tool to create the gradient: https://cssgradient.io/
you can use radial-gradient property.
background: radial-gradient(#cfb37a, transparent);
Related
I am having issues with Gmail in dark mode on mobile clients, namely the color choices it uses.
If I specify green background-color: #00ff00; as a background color, Gmail in dark mode changes the value to a dark green background-color: #1c4211;. It's not my first choice for a dark green. I am looking for ways to customize the color.
I have tried to target Gmail specifically with a class like: u ~ div td background-color: #00ff00;. With some color choices like red, it adheres to the color choice. In many others, it makes a substitution for a darker color that doesn't work for my intended needs.
Has anyone run across a solution to fine-tune the swap process?
For gmail app on iphone I've found that hsl colors with multiple gradients do the trick, like so:
background: #10c893;
background: -moz-linear-gradient(top, hsl(163,85%,42%) 0%, hsl(163,85%,42%) 100%);
background: -webkit-linear-gradient(top, hsl(163,85%,42%) 0%,hsl(163,85%,42%) 100%);
background: linear-gradient(to bottom, hsl(163,85%,42%) 0%,hsl(163,85%,42%) 100%);
Messing with the answer from #Iggy, I found that hsl colors aren't necessary, and with linear-gradient now widely supported, we can specify the background color more simply like this:
background: #fff;
background: linear-gradient(#fff, #fff);
I tested this in both Android and iOS Gmail apps on litmus.com.
An alternative solution we used was to create a 1px gif and use it as the background image for the containers we wanted to force to be a certain color.
<td style="background-image: url('https://path-to-image-here/pixel-ffffff.gif'); background-repeat:repeat;">
<div>
THIS HAS A WHITE BACKGROUND IN DARK MODE NOW!
</div>
</td>
Only thing we haven't figured out yet is how to force the font colors not to invert. Thinking we will alter our design a bit and use grays instead of black with the hope gmail won't invert it.
I am trying to change the default variable, #body-bg, in a variables.less file for Bootstrap 3 so that my background is a gradient, but I haven't had much luck.
Referencing from a previously asked question about adding a gradient mixin, my attempt was to write the gradient as a mixin and then assign it to #body-bg in my mixin file, but the compiler threw an error for an 'Unrecognized input' at the line where I wanted to assign the mixin to #body-bg. My code was roughly as follows:
#import "../variables.less";
#gradient {
.vertical(#start-color: #989ca0; #end-color: #234362; #start-percent: 0%; #end-percent: 100%)
{
background-image: -webkit-gradient(linear, left #start-percent, left #end-percent, from(#start-color), to(#end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, #start-color #start-percent, #end-color #end-percent); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(top, #start-color #start-percent, #end-color #end-percent); // FF 3.6+
background-image: linear-gradient(to bottom, #start-color #start-percent, #end-color #end-percent); // Standard, IE10
}
}
body {
#gradient.vertical(#989ca0; #234362; 0%; 100%);
}
Based on the error I got, is it not possible to assign a mixin to a default variable in Less? I noticed that if I only reference #gradient, the code compiles, although the gradient certainly doesn't show.
I've also tried to find what #body-bg would equate to in the .css file, and I think this would be body.background-color, but the following few lines wouldn't add the gradient either:
.body.background-color {
#gradient.vertical(#989ca0; #234362; 0%; 100%);
}
I would appreciate any help on this issue, thank you!
Well, the important thing to realize is that Less variables usually represent (and used as) a CSS property value(s) (though since recent version it is also possible to assign an arbitrary ruleset to a variable too). Now if you look at the way the #body-bg is actually applied to the body in Bootstrap sources it becomes obvious you simply can't use a mixin there. In other words, the simplest way to assign a gradient background to the body is to use old good CSS cascading directly, i.e. just:
body {
#gradient.vertical(#989ca0, #234362, 0%, 100%);
}
Because I find it challanging creating static image backgrounds, such as example below, that are responsive and covers different resolutions and heights/widths, I was thinking using CSS3 color gradients to reproduce the same background and make it streching dynamically.
I would appriciate any input on tools/tips&tricks/etc on how to recreate such background with CSS. I have looked at online tools for generating CSS rules, such as http://www.css3factory.com/linear-gradients, but these doesn't create sharp line between two colors such as in my example.
try to set 2 linear gradient on top of each others, first with rgba() color with opacity to a few % .(or hsla() )
and the second with 100% opacity. about like this :
background:
linear-gradient(
130deg ,
rgba(171, 17, 51, 1) 30%,
rgba(255, 51, 102, 0.75)
),
linear-gradient(
200deg ,
#AB1133 50%,
#FF3366 50%
)
;
DEMO tune it to your needs
I'm trying to get an elliptical gradient in chrome. I've tried
background-image:
-webkit-gradient(ellipse, center top, 0, center top, 50, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5))),
-webkit-gradient(linear, 50% 100%, 50% 0%, from(#0A6B9A), to(#29ABE2));
No luck. I've tried a few other things I've found on the net and in some books and it all just fails or comes out as circles.
Its easy to do through firefox (cool effect for those interested):
background-image:
-moz-radial-gradient(40% 0%, circle, rgba(0,0,0,0), rgba(0,0,0,.5)),
-moz-linear-gradient(50% 100%, #0A6B9A, #29ABE2);
Is this possible in chrome? It should be possible according to the planned specs for gradients I've seen. Maybe Chrome just hasn't supported it yet.
**Edit
Oh and I've checked, the style is not being overwritten or any such jazz
-moz is a CSS property reserved just for Firefox - that's why it doesn't work in Chrome (and in any other browser).
To be more specific, every CSS property started with - is not standard and will work just for specific browsers. It's used only for compatibility. If browser doesn't understand what the property means, it just skips it, that's why in CSS files there are multiple properties, and it's the same reason -moz and -webkit will not work everywhere (not only for you).
For CSS3-compatible browsers it should be tone in W3c convention, like
background: radial-gradient(ellipse at center, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
(the colours are different, just note background: radial-gradient(ellipse ...)
You may use http://www.colorzilla.com/gradient-editor/ or any onther CSS gradient generator for this, just set orientation to radial.
I am working on a project where the button needs to have a certain style such as the one posted on the blog below:
http://joeygallegos.tumblr.com/
The button is visible only in Chrome, Safari, Android and iPhone/iPod touch. And I would like to make it available in cross-browser format. I am good at hand writing CSS, but I am not quite able to understand cross-browser gradients. If somebody could please help me to better grasp it that would be much appreciated. Bellow is the snippet I used to make the gradient:
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8fc2e8), color-stop(0.5, #54a1d9), color-stop(0.5, #126aa9), color-stop(1, #2ddef2));
If possible I would like it to be like Google's markup with the attributes such as -webkit, -moz, -ms, -o, linear:
background-image: -webkit-gradient(linear,left top,left bottom,from(
#4D90FE),to(#357AE8));
background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);
If it is possible that you could list it in the same colors as the ones listed above it would be a tremendous help. Thank you!!
The first version of gradient support was made available in webkit browsers in the following form:
-webkit-gradient( linear, x y, x y, from( color ), [color-stops...,] to( color ) )
Which is where you use:
background: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#357AE8));
But then the web decided that was too complex and simplified it to this (which is what most browsers use now):
-prefix-linear-gradient( direction|angle, color-stops... )
Which is where you use:
background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);
IE feels it needs to be different, so it uses filters and has not upgraded to this new better way of expressing gradients until IE10. So, what you have is fine. If you want IE7-IE9 support, use this too:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4d90fe",endColorstr="#357ae8");
There are many tools out there too to help you make gradients and generate the cross-browser code for you (Google is yo friend). Colorzilla has a good one.
As well as defining the different background images, you should define a plain background-color for browsers that don't support any kind of gradient.
The only one you appear to be missing is the one for older IE, where you use filter to produce a gradient.