Following is the linear gradient I have for a div :
div{
background: linear-gradient(112deg,#A0148C , #FF2896 37.1%, #F05A00 81.3%);
}
Can we place another CSS gradient over this one(like another layer over this gradient)?
Yes, you can just list backgrounds in the property, separated by commas. Remember there will need to be some transparency in the 'upper' gradient for the 'lower' gradient to be visible underneath:
div{
background: linear-gradient(rgba(255,0,0,0.2), rgba(0,0,255, 0.5)), linear-gradient(112deg,#A0148C , #FF2896 37.1%, #F05A00 81.3%);
}
Related
I am using Vaadin version 14.6.3.
Hover and selection effect
In the image above you can see that my app has a greenish color scheme, but the context menu I implemented will always have a blue hover effect and also some blue frame for the active item.
I tried to play around with stlyes.css and shared-styles.js, but I could not manage to find the correct place where to add/overwrite the standard blue "lumo" behavior.
What can I do to customize this behavior to a color of my choice?
#Route(Pages.CUSTOMER_ROUTE)
#StyleSheet("styles.css")
#PageTitle(Pages.CUSTOMER_PAGE_TITLE)
#JsModule("./shared-styles.js")
public class CustomerUI extends VerticalLayout implements RouterLayout, PageConfigurator, RoleSecured, AfterNavigationObserver {...}
Thank you for your help.
You have very likely only set the primary color and not also the 50% and 10% shade colors. See https://vaadin.com/docs/latest/styling/lumo/design-tokens/color/#primary
E.g. try:
html, :host {
--lumo-primary-color: hsl(122, 96%, 47%);
--lumo-primary-color-50pct: hsl(122, 96%, 47%, 0.5);
--lumo-primary-color-10pct: hsl(122, 96%, 47%, 0.1);
}
I have a Vis.js timeline in an Angular5 project with three groups and multiple items/events in each. I figured out how to style each group background individually to make the alternating swim lanes more distinct, by doing:
.vis-background>.vis-group:nth-of-type(even) {
// there is an auto-generated empty group as the first .vis-group, so starting with the 2nd group
background-color: $gray-lighter;
}
.vis-labelset>.vis-label:nth-of-type(odd) {
background-color: $gray-lighter;
}
However, the vertical background grid lines are no longer visible in the groups that are colored gray. It's as if the group background color is layered on top of the grid lines. If I add a z-index: 1; to .vis-vertical or .vis-grid the lines and group color appear correctly, but I lose timeline zooming and movement functionality. How can I apply styling to groups, keep the vertical grid lines visible and also keep all timeline functionality?
A workaround I used that not resolves the problem, but made it less notorious, was define the group like this:
group=
{
id : 0,
content : 'My Group',
style : "background: rgba(82, 226, 233, 0.2);"
};
and define a background item like this
background_item=
{
group : 0,
start : '2018-10-29 00:00',
end : '2018-10-30 02:00',
type : 'background',
className : 'myClassName'
};
where the className come from this style:
.vis-item.vis-background.myClassName {
background-color: rgba(82, 226, 233, 0.2);
}
It uses transparency to prevent hide the vertical lines.
The result was something like this:
Hope it helps while someone found a definitive solution.
I have this style in my controller:
vm.backgroundColor = {
'background': '#' + vm.colorHex,
'filter': 'alpha(opacity = 10)',
'-moz-opacity': '0.1', 'opacity': '0.1'
};
How can I use this without affecting the font color? Thanks
By changing the opacity of the whole element, you're by definition fading the whole element.
If you want the background to be semi-transparent, you can achieve this very easily using rgba colours.
The first three numbers represent red, green and blue, and are rated 0-255, and the fourth is the alpha (transparency), which is rated from 0 (transparent) to 1 (no transparency).
The code below would give a transparent red background.
vm.backgroundColor = {
'background' : rgba(255,0,0,0.5)
};
This question already has answers here:
Using percentage values with background-position on a linear-gradient
(2 answers)
Closed 3 years ago.
I don't know if it's the late hour or if I'm just being stupid, but I can't figure this out.
What I'm trying to do is position a background image just outside the element it belongs to using %. The reason I want to do is is so that I can later animate the background-position from this % to 50% having it "slide in".
If I could use pixels it's easy enough to set the background-position to [width-of-element]px 0 but as I want the element's final position to be 50% 0 I can't start with a pixel value. (I'm using the jQuery Background Position plugin btw http://keith-wood.name/backgroundPos.html).
So, my question is, knowing the width of the element and the width of the background image - how can I calculate which %:age is needed to position the image just outside the edge of the element?
Obviously setting the background position to "0 0" makes it render at the top left, "50% 0" makes it centered and "100% 0" positions it from the right edge. If I go above 100% it starts to move away from the right edge, and depending on the width of the image (and I guess, the element) any value from roughly 200 and up is needed to completely shove the background image outside the edge of the element.
If I go the other way around, from 0 and downward the image moves off to the right, again the % needed to hide it varies but is not the same as the positive % needed to push it off the other edge.
Again, maybe I'm just tired but I'm stuck here.
http://jsfiddle.net/cTeEA/
Edit: Another curious thing I noticed is that if the image is smaller than the containing element, increasing its background-position-x above 100% doesn't make it move away from the right instead it makes it move to the right. Adjust the 101% on this updated fiddle and compare with the old fiddle to see what I mean: http://jsfiddle.net/cTeEA/1/
Edit: Ok percentages seemed out of the question, or at least ten times harder than simply using pixels. Here's how I solved it (more or less):
var dir = 'left'; // || 'right' (where to slide in the image from)
var winWidth = $(document).width();
var imgWidth = $('img[src="src-of-already-added-and-loaded-img.png"]').width();
var posOutside = dir == 'right' ? '-' + imgWidth + 'px' : winWidth + 'px';
var posCenter = (imgWidth > winWidth) ? -((imgWidth - winWidth) / 2) : ((winWidth - imgWidth) / 2);
Then I just animated the background-position from posOutside to posCenter.
Thanks to those who helped in the comments as well.
Background position with percentage values is not easy.
You can see an explanation of the math involved here
In your case, the short answer is:
The background size is greater or smaller than the div by a factor of f. Then your percentage is 100 / (1 - f).
That means that:
The backgound size is the same than the div. You are out of luck, it's not posible.
The background is bigger. Say div=100 background=400, then f = 4 and the formula gives -33%. (first example in demo)
The background is narrower. Say div=400 background=100, f=0.25 and the formula gives 133% (second example in the demo)
demo
Notice that in the demo the percentages are a little bit offset to show that the background is really there
css:
div.foo {
width: 100px;
background-size: 400px 100px;
background: red url(http://placekitten.com/400/100) no-repeat 50% 0;
height: 100px;
background-position: -32% 0; /* Disappear to the left */
}
div.foo2 {
width: 400px;
background-size: 100px 100px;
background: red url(http://placekitten.com/100/100) no-repeat 50% 0;
height: 100px;
background-position: 132% 0; /* Disappear to the left */
}
The default is for the selected row to be colored gray if the QTableWidget does not have focus, and orange if it does have focus. I would like to, instead, make the selected row be red whether or not the widget has focus. I tried adding this to the style sheet:
QTableWidget{ selection-background-color: red}
I also tried
QTableWidget:edit-focus{ selection-background-color: red}
and
QTableWidget:focus{ selection-background-color: red}
but none of them seem to turn anything red, it still seems to remain orange if focused and gray if not. What properties do I have to set to make the selected row always the same color, whether or not it has focus?
Thanks,
David
You almost had it. Technically speaking, you're adjusting the selection color of the items within your table widget, so:
QTableWidget::item{ selection-background-color: red}
should do the trick.
Alternatively:
QTableWidget::item{ background-color: blue }
QTableWidget::item:selected{ background-color: red }
background-color will set background color of the items in row and selection-color will set the text color because when the row is selected then if text are present in the row then it might become unreadable due to color so setting proper text color is important.
#d9fffb : light blue
#000000 : black
self.table.setStyleSheet(
"QTableView::item:selected"
"{"
"background-color : #d9fffb;"
"selection-color : #000000;"
"}"
)