i use http://www.colorzilla.com/gradient-editor to generate css codes for a linear gradient background
i got what i needed from the website and here's my code
div{
width:450px;;
height:250px;
background: -moz-linear-gradient(top, #eeeeee 50%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 50%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 50%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 50%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 50%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
the problem is it works for Chrome and i guess it will work for FF and most other browsers like Opera and Safari ..
the problem as always is, with IE (god cursed that bastard who invented IE and sent hem to hell)
even if i used filter: progid:DXImageTransform.Microsoft.gradient(My color rules) its not working
any suggestions folks ?
/* IE 7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0);
/* IE 8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0)";
/* IE 10+ */ background-image: -ms-linear-gradient(top, #000000, #FFFFFF);
Related
I am trying to give the tabs in a ionic 4 app a gradient background.
I am also trying to set a different color (Gradient) background for each page.
Controlling the style for the tabs in the scss for each page.
The desired affect is as below.
For <shadow-root> which indicates that the browser you're using supports Shadow DOM technique so you can access its elements by only their variables,So try the following
ion-toolbar {
--ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}
ion-tab-bar {
--ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}
If it doesn't work just please detect father -i call it- or its wrapper and put it in advance of it,In another word
wrapper ion-tab-bar {
--ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}
wrapper refers to the element that wrapping ion-tab-bar
You can set a CSS gradient to the toolbar (top) and tabbar (bottom):
ion-toolbar{
--background: linear-gradient(to right, #color1 0%, #color2 100%);
}
ion-tab-bar{
--background: linear-gradient(to right, #color1 0%, #color2 100%);
}
In case you want to set the gradient for the whole app, place the CSS inside theme > variable.scss
Docs
https://ionicframework.com/docs/api/toolbar
https://ionicframework.com/docs/api/tab-bar
I have the following code:
#red_SOPRA: orange;
#red: red;
.gradient(#color) when (#color = red)
{
background: linear-gradient( 180deg, #color 0%,yellow 100%);
}
div
{
.gradient(red);
}
Compiled into:
div {
background: linear-gradient(180deg, #ff0000 0%, #ffff00 100%);
}
I would like to add "_SOPRA" to the end of variable "#color" present in background definition, in order to obtain an interpolated and dynamic name of variable used in mixin.
I tried with ## and #{color} definitions but without success.
How to obtain a generated background like this (with value "#ffa500" - #red_SOPRA value - instead of "#ff0000")?
div {
background: linear-gradient(180deg, #ffa500 0%, #ffff00 100%);
}
Option #1
Unless I'm missing something from what you are trying to achieve, then simply removing the guard expression when (#color = red) will get a "dynamic" value output for #color, allowing it to be called directly by #red_SOPRA or #blu_SOPRA (whatever you pass).
LESS
#red_SOPRA: orange;
#red: red;
.gradient(#color)
{
background: linear-gradient( 180deg, #color 0%, yellow 100%);
}
div {
.gradient(#red_SOPRA);
}
CSS Output
As you wanted...
div {
background: linear-gradient(180deg, #ffa500 0%, #ffff00 100%);
}
Option 2
You can set up the mixin to perform a "'merging' between string passed" and the "_SOPRA" suffix, something like this:
LESS
#red_SOPRA: orange;
#blu_SOPRA: blue;
.gradient(#pre; #SOPRA: ~'#{pre}_SOPRA'; #color: ##SOPRA)
{
background: linear-gradient( 180deg, #color 0%,yellow 100%);
}
div
{
.gradient('red');
}
.test {
.gradient('blu');
}
CSS Output
div {
background: linear-gradient(180deg, #ffa500 0%, #ffff00 100%);
}
.test {
background: linear-gradient(180deg, #0000ff 0%, #ffff00 100%);
}
This will not fail gracefully if #color does not resolve to a valid ##SOPRA value.
First of all, I would like to thank ScottS for his answer, especially second option that is what I needed.
Secondly, I add solution that finally yesterday I found by myself, very similar in philosophy but little different and (maybe) easier to understand by newby, due to a temp variable.
#red_SOPRA: orange;
#red: red;
.gradient(#color) when (#color = 'red')
{
#stop-1:~"#{color}_SOPRA";
background: linear-gradient( 180deg, ##stop-1 0%,yellow 100%);
}
div
{
.gradient('red');
}
Philosophy is the same, but with this "double passage" I think that could be more "talking"... :-)
UPDATE:
After correct comment of seven-phases-max, I updaded my solution. Please note that parameter must be passed as string with 'red'
This question already has answers here:
Reduce the gutter (default 30px) on smaller devices in Bootstrap3?
(5 answers)
Closed 8 years ago.
I'd like to have thinner gutters when rendered on mobile devices. I found this in mixins.less to let me set #grid-gutter-width globally. But what's the best way to set a different gutter width for ONLY col-xs- (mobile devices) when the columns are all collapsed without breaking everything else?
// Grid System
// -----------
// Centered container element
.container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: (#grid-gutter-width / 2);
padding-right: (#grid-gutter-width / 2);
.clearfix();
}
// Creates a wrapper for a series of columns
.make-row(#gutter: #grid-gutter-width) {
margin-left: (#gutter / -2);
margin-right: (#gutter / -2);
.clearfix();
}
// Generate the extra small columns
.make-xs-column(#columns; #gutter: #grid-gutter-width) {
position: relative;
float: left;
width: percentage((#columns / #grid-columns));
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (#gutter / 2);
padding-right: (#gutter / 2);
}
There is a good answer here that will solve this problem: Reduce the gutter (default 30px) on smaller devices in Bootstrap3?
i.e.:
/* Extra-small devices (767px and below) */
#media (max-width: 767px)
{
div[class^="col-xs-"] {
padding-left: 5px;
padding-right: 5px;
}
}
Of course, you might to wrap that up in LESS.
If you want to change gutter size you must open the variable.less, and look for
#grid-gutter-width:
and change it to your desired value.
Tips:
you can also change/edit number of columns, container width inside the variable.less.
V: lessphp v0.3.4-2
Using this:
#topDarkGrey: #6e6c74;
#bottomDarkGrey: #5d5b64;
.gradient (#startColor: #eee, #endColor: white) {
background-color: #startColor;
background: -webkit-gradient(linear, left top, left bottom, from(#startColor), to(#endColor));
background: -webkit-linear-gradient(top, #startColor, #endColor);
background: -moz-linear-gradient(top, #startColor, #endColor);
background: -ms-linear-gradient(top, #startColor, #endColor);
background: -o-linear-gradient(top, #startColor, #endColor);
}
background: .gradient(#topDarkGrey, #bottomDarkGrey);
I receive:
lessphp fatal error: parse error: failed at `background: .gradient(#topDarkGrey, #bottomDarkGrey);
Anyone see any problems with this?
Yes, this:
background: .gradient(#topDarkGrey, #bottomDarkGrey);
Should be this:
.gradient(#topDarkGrey, #bottomDarkGrey);
Dear folks.
Imagine a sprite image called icons.png assigned to css class .icons with various 10x10px graphs. Now you want another class which scales up the sprite graphics exactly twice 200% (making them 20x20 pixels on the screen)
How do I achieve this enlargement purely in CSS?
Much appreciated!
.icons, .iconsbig{ /* WORKS FINE */
background-image:url(http://site.org/icons.png);
background-repeat:no-repeat;
vertical-align: middle;
display: block;
height:10px;
}
.iconsbig{ /* make this one twice as big as the original sprite */
background-repeat:no-repeat;
height:20px;
background-size: 20px auto;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
update:
problems with the above code:
It works in IE9, but not in FireFox, by most used browser doesnt know how to resize????
in IE9, the enlargement is smudgy and not neithrest neighbour pixel perfect at all??
It is supported in pretty much everything except for < IE9...
.iconsbig {
-moz-background-size: 20px;
background-size: 20px;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
W3C spec.
Update
Looks like Firefox wants its vendor prefix (-moz) on the property.
You can use the css3 background-size property:
.iconsbig {
background-image:url(http://site.org/icons.png);
background-size: 20px 20px;
}