I want an expandable tree in a table cell. I got that to work. While playing around with it, I tried to add a transitioned box shadow. That works only at the root level. (JsFiddle).
The problem may have something to do with transitions not working on display (link). But does a display change foul up all transitions, or am I missing something? (I only put in a webkit transition.)
Thanks.
Edit: This might be a possible workaround, since the transition effect isn't working.
Have you tried using keyframe animations? I did some changes in the code. Here's a demo (jsFiddle).
I changed:
/* This transition seems to have no effect. */
-webkit-transition: box-shadow 0.5s;
}
to:
/* This transition seems to have no effect. */
-webkit-animation: shadow 0.5s ease-in-out;
}
#-webkit-keyframes shadow {
0% { box-shadow: 0px 0px 0px #000; }
100% { box-shadow: 4px 4px 7px #000; }
}
Related
I am trying to create a custom table header style without section separators and with different colors.
I have this in my stylesheet:
QHeaderView::section {
border: 0;
border-bottom: 1px solid #cccccc;
background-color: white;
}
QHeaderView::section:hover {
border-bottom: 2px solid #aaaaaa;
}
QHeaderView::section:selected, QHeaderView::section:checked {
border-bottom: 2px solid rgb(0, 166, 228);
background-color: rgb(255, 170, 0);
}
It works except the style for active (clicked) section. I thought it should be either :checked or :selected pseudo state (which are mentioned in docs http://doc.qt.io/qt-5/stylesheet-reference.html) but I don't see any effect.
Is it a bug or am I doing something wrong?
Looks like it is not supported by QHeaderView, I guess :checked and :selected are either used for some other purposes or simply not implemented.
Found some old bug reports, reopened one of them: https://bugreports.qt.io/browse/QTBUG-23689
I have a QListView to which I added line separators using the following stylesheet:
listView_->setStyleSheet("QListView::item { border-bottom: 1px solid black; padding: 2px; }");
However something unexpected has happened - on single click on any item in the list, the data vanishes from the display. It comes back on a double click. This is quite weird I think. Why is this happening ?
Here is the QListView
This is what happens as soon as I click on any item:
The data that has just vanished, comes back when I double click (instead of a single click - or selection action)
Why is this happening and how can I avoid it ?
Each item in the view has states, for example a selected state represents an item that is currently selected. Now, if you look at the list without any stylesheet attached, you will notice that selected items have dark blue background and white text. However, when you are assigning this stylesheet
QListView::item { border-bottom: 1px solid black; padding: 2px; }
you are in fact modifiing all states at once, including the selected state, which causes it to have the default white background along with the white text. For example, if you add another property:
QListView::item { border-bottom: 1px solid black; padding: 2px; background:red; }
you will notice, that all items (both selected and not selected ones) will have red background. To fix the issue, you should specify that your stylesheet must be applied only to items that are not selected
QListView::item:!selected{ border-bottom: 1px solid black; padding: 2px; }
Is it possible to use :active for animating a change in box-shadow with duration and delay.
I have a change in color on :hover with duration. Apparently the same approach doesn't work for box-shadow.
I tried add class through js. I tried setting duration in the :active class and in the main class. I tried transition: box shadow 1s transition-duration: 1s. And some more stuff.
the full code is at codepen http://cdpn.io/pKJmC
So, any ideas?
thanks
You need to give it a default state to transition from. You already have box-shadow on the circles but no inset box-shadow. Add an inset box-shadow set to zero on your circles:
.ball1,
.ball2,
.ball3 {
box-shadow: inset 0 0 0 #222, 0px 10px 20px -10px #222;
}
First of all, the property name is box-shadow. In your question you written it without the hyphen.
One more thing, you can't transition to or from an auto property. So you'll have to define a box-shadow: none; on your default state if you want this to work
I have a menu, containing several links. I want these links to have a glowing effect in the background when I hover them.
I have almost made it using css transition, box-shadow and a lighter background-color on the links.
The problem is that the transition-effect affects the box-shadow, so that when the transition starts, the links has no box-shadow, which gives them a squared background-color. When the transition has ended, the glowing background looks fine.
Please see my jsFiddle: http://jsfiddle.net/xCJ46/.
I would very much appreciate your help with this.
Here is an extract of my CSS:
<html><style>
div a:hover {
background: #527fa9;
-webkit-box-shadow: inset 0 0 30px 15px #49628a;
-moz-box-shadow: inset 0 0 30px 15px #49628a;
box-shadow: inset 0 0 30px 15px #49628a;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
-o-transition: 500ms linear 0s;
transition: 500ms linear 0s;
}
</style></html>
Add the box-shadow to the link's property (not hover).
div a { box-shadow: inset 0 0 30px 15px #49628a; }
Here's what I need to pull off in CSS (it's terribly ugly, but it shows my problem well as an example):
We've got a gradient over text with a drop shadow on a background that has a slight gradient.
I've tried every method I could find.
This method won't work with a text-shadow.
The PNG overlay method won't work because I don't have a solid color background.
This method won't work because it requires me putting the text string in the CSS and my text will be dynamic.
So, I'm stumped.
It doesn't need to work in every browser (I'm fine with ignoring IE, if necessary). If it only works in Webkit browsers, that'd be fine as well.
That should be the answer:
HTML
<h1><span>Filthy</span></h1>
CSS
h1 {
position: relative;
font-size: 300px;
line-height: 300px;
text-shadow: -3px 0 4px #006;
}
h1 span {
position: absolute;
top: 0;
z-index: 2;
color: #d12;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
h1:after {
content: attr(cssFilthyHack);
color: #000;
text-shadow: 3px 3px 1px #600;
}
JS
$('h1').each(function(i, e){
var el = $(e);
el.attr('cssFilthyHack', el.find('span').html());
});
The important thing is to use content: attr(cssFilthyHack); to extract the text from the h1 text. You could add the text a second time in html like this
<h1 cssFilthyHack="Filthy"><span>Filthy</span></h1>
Or you use the js jQuery method to do this automatically.
UPDATE
Replaced the a tag with span, added js function.
See the example here in action: http://jsfiddle.net/alligator/Gwd3k/