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; }
Related
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 am using 2 regions with 1 region display selector to create some tab functionality between regions. See the following as an example: http://apex.oracle.com/pls/apex/f?p=19914:30 I used the following to remove the 'Show All' button http://apexplained.wordpress.com/2012/07/16/hide-the-show-all-tab-in-a-region-selector/
Mine looks the same as the example above however it doesnt have the rounded corners on the region display selector.
I wondered how you can apply the rounded corners to the display selector, increase the font size and height of the region display selector?
I've tried style="" in the 'Region Attributes' of the Region display selector but no luck. When investigating my page in Firefox using Firebug the display selector is held in a DIV / in an UL list but i wouldnt know how to access those in the APEX builder.
The region display selector has rounded corners when using Chrome, but not in Internet Explorer.
Please could i have some help with my problem.
Oracle Version: Oracle version 10.2.0.4.0
Full APEX version: Application Express 4.1.1.00.23
Browser(s) and version(s) used: Internet Explorer 7 & 8
Theme: Simple Red
Template(s): The standard templates with the Simple Red theme.
Region/item type(s): 3 HTML pages each holding text box fields.
Thank you.
See example below of region display selector:
Example of region selector html from Simple Red theme
<div class="apex-rds-container">
<ul class="apex-rds" id="485041125812774413_RDS">
<li class="apex-rds-first">
<span>Show All</span>
</li>
<li class="apex-rds-selected">
<span>datepicker</span>
</li>
<li class="apex-rds-last">
<span>region 2</span>
</li>
</ul>
</div>
inspect style tab for
DIV
.apex-rds-container {
height: 40px;
margin: 0 0 9px;
}
UL
ul.apex-rds {
background: url("../images/bg-anchor-nc.gif") repeat-x scroll 0 0 transparent;
border: 1px solid #999999;
border-radius: 8px 8px 8px 8px;
box-shadow: 1px 2px 2px #AAAAAA;
float: left;
list-style-type: none;
margin: 0;
}
LI
ul.apex-rds li {
float: left;
list-style: none outside none;
}
A
ul.apex-rds li.apex-rds-first a {
border-left: 0 solid #000000;
}
ul.apex-rds li a {
border-left: 1px solid #FFFFFF;
border-right: 1px solid #999999;
display: block;
height: 16px;
padding: 1px 10px 0;
text-decoration: none;
}
a {
color: #660000;
}
SPAN
ul.apex-rds li span {
color: #000000;
font-size: 11px;
}
So, this shows that a background image is used for the UL. This image's dimensions are 1x18px according to firebug. Hovering over an item will set a different background image, as will a current region selection.
So, if you want a larger selection, use a larger image. Increase the div height. Set the correct styles for current/non-current items.
To increase font size, alter the css for the SPAN.
Borders are done with border-radius: 8px 8px 8px 8px; which don't work in IE.
All css can be found in the theme css file in your apex_images folder: /i/themes/theme1/css/theme_4_0.css
Go to line 1316,
/* -------------------- Region Display Selector -------------------- */
You can find everything you need there.
Don't mess in that file though. If you will, make a backup. Work clean and override properly within a css of your own!
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 have seen many answers on the line of
How to change the cell color of a jquery datepicker
But they for some reason do not apply to my example.
http://plungjan.name/test/datepicker_orange.html
I want the WHOLE cell content to be orange, not just what we can see behind the link IN the cell
So what I can see as
.ui-state-default {
background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
border: 1px solid #D3D3D3;
color: #555555;
font-weight: normal;
}
which controls the link inside the cell with a class name set by me to "orange"
<td class=" orange" onclick="DP_jQuery_1327604402271.datepicker._selectDay('#toDate',1,2012, this);return false;" title="Almost sold out">
<a class="ui-state-default" href="#">15</a>
</td>
where the orange class is given by me in this code:
return [true,"orange","Almost sold out"];
It shows
and not
Which I can get if I remove the background image of the above ui-state-default in firebug
What is the correct method of changing the complete cell color of the cells I now change using the beforeShowDay?
I tried helping the situation by overriding the default:
.ui-state-default {
background-color: transparent;
border: 1px solid #D3D3D3;
color: #555555;
font-weight: normal;
}
Did not make any diffence
#mplungjan Change css to this:
td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important; border: 1px #88a276 solid !important;}
If you put your class directly on the tag you have to change it to this:
.ui-state-default {
background: #E6E6E6;
border: 1px solid #D3D3D3;
color: #555555;
font-weight: normal;
}
In CSS if you have a backgorund image and a background color then the browser will show you the image which in this case is that gradient grey that you have in the first example.