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
Related
I wanted to give only vertical and horizontal space between grid cell. Is there any attribute to set space between grid cell?
I think something like this should work:
<ion-grid class="grid"></ion-grid>
and the the css:
.grid{
margin: 5px;
}
And I'm pretty sure that styles are going to be applied too by only using a selector in css file:
ion-grid ion-row, ion-col{
margin: 5px;
}
Alternatively you can use padding instead of margin
you can use the padding that ionic provide or what i will do to have more control is the following:
on the page.scss file
my-page ion-col{
margin: 5px;
}
Say I have a button like this:
<button>Some Text</button>
And by default the stylesheet has the text as black.
I then have this css:
button {
transition: color 0.15s ease-out;
color: rgba(255,255,255,0.75);
}
button:hover {
transition: color 0.15s ease-out;
color: #fff;
}
The goal is to subtly fade from a grayish off-white, to white, on hover, and then back again to normal button appearance on hover off.
The problem is when i firstly load the page, the black initial color of button is overwritten by the transition that i applied on button, and one can briefly see black text fading to off-white.
How do I make it so that the initial state just loads without animation? Or more precisely, is there a way to achieve something like :hover-off to control the animation only when the hover state turns off?
Sorry i have less reputation to comment. Your animation does not work, please explain clearly what you want to do?
are you trying to achieve this.
button:hover {
transition: 0.5s ease-out;
color : white;
}
If you have to load some JavaScript, you can put it in the <head> after your CSS. Kind of a hack, but it works.
HTML parsing is blocked by <script> tags that initiate requests for external resources. I guess CSS animations won't start until the <body> has been fully parsed and that's the reason this works.
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; }
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; }
}
i need to get this little gray rectangle (red circle) to be displayed both on top n bottom of a div that coitains thumbnails (btw this div might aswell cointain 2 or 3 rows of thumbnails)
Picture:
here is my code for how it looks atm:
.jq_thumbnails {
background: url("/site_media/static/coffee_small_top.png") top left no-repeat;
overflow: auto;
height: 100%;
}
Is it possible to achieve this effect easily? I thought of making ifequal tag that would check the length of thumbnails list and use a certain background picture accordingly, but maybe it is possible to achieve this using html/css only?
You can leverage CSS3 Multiple Background Images:
.jq_thumbnails {
background-image: url(../images/bg-top.png), url(../images/bg-bottom.png);
background-position: 0 0, 0 bottom;
}
Set the background-repeat property to suit your particular scenario:
background-repeat: repeat-x, repeat-x;
This is supported in all current versions of the major browsers:
Of course you can make an outer div and an inner one that covers the background, so you can repeat-y the background ;)