I have a list of icons that are faded out a little and when you hover them its supposed to make the opacity 100% and change the border and the background color. The problem is when I hover it it just completely removes the border but the other things work fine. Here is the CSS:
.homeAppIcon{
border: 1px solid #CCCCCC;
border-radius: 20px;
padding: 5px;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
background:-moz-linear-gradient(center top , #FFFFFF, #EDEDED) repeat scroll 0 0 transparent;
}
.homeAppIcon:hover{
border: 1px solid #000000;
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
background:#FFFFFF;
}
When i take the -ms-filter out the border appears correct but it no longermakes the opacity 100%. I am testing this in IE8.
Does anyone have any ideas?
Thanks,
Craig
Related
Please see the following jsBin:
http://jsbin.com/uyonux/1
It is working as desired on the hover state. However the focus state does not work as desired on focus i would like the blue color to not inherit the opacity of .4 i want it the solid #13A3F7 color. Is there any way to append the border without having it use the element opacity?
I tried pseudo elements but they also inherit opacity.
The other solution could be to take 60% plus of #13A3F7 but i don't think that works due to saturation.
I know i could change the image but the point is we are trying to use one black icon and then adjust it with opacity on the various states.
Thanks
button {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAALElEQVR42mNgwA/+QzHZYGAM2E8ADwED6B+I+ynEpPsLzfJBYgBFYTDEMxMA8SA+M9tIcT0AAAAASUVORK5CYII=") ;
border: none;
height: 23px;
width: 26px;
background-repeat: no-repeat;
opacity: 0.4;
filter: alpha(opacity=40);
background-position: center center;
}
button:focus {
border: 1px solid #13A3F7;
}
button:hover {
background-color: #CFCFCF;
box-shadow: 0 1px #696969;
opacity: 0.65;
filter: alpha(opacity=65);
cursor:pointer;
}
Also I'll need to support IE8 for now :(
You could use RGBa colors.
Like this:
border: 10px solid #ff0000;
border-color: rgba( 255,0,0,0.5);
Use outline: instead of border, like this:
button:focus, button:active {
outline: 1px solid #13A3F7 !important;
}
Edit: You could achieve this by using a link instead of button. Check out this Plunker: http://plnkr.co/edit/NZ3lOyFBSxOFwSExyBpA?p=preview
i am using enyo buttons in iphone....the problem is , when i click on button for a navigation , black color appears over the button....i dont know whether it is shadow or border-color or background-color.... i want to remove this...plz help me....
my code goes here
.onyx-Button2 {
outline: 0;
color: #FFFFFF;
font-size: 16px;
text-align: center;
white-space: nowrap;
margin: 0;
padding: 1px 1px;
overflow: hidden;
border-radius: 3px;
/* for IE8 */
border: 1px solid #777;
border: 1px solid rgba(15, 15, 15, 0.2);
/*
The border and the gradient interact in a strange way that
causes the bottom-border (top if the gradient is aligned top)
to be lighter than other borders.
We can fix it by using the darker bottom border below, but
then there are a few rogue pixels that end up very dark.
*/
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2);
background: #E1E1E1 url(../../images/gradient.png) repeat-x bottom;
background-size: contain;
text-overflow: ellipsis;
}
It is possibly down to defaults set within the browser on iOS - I would set all the appropriate properties to cover all bases.
So add
background-color:#ffffff; // Change this to your color you want
I suspect it is just the way iOS defaults some CSS, it may also have something to do with the manner in which it deals with image's as backgrounds. Unfortunately while iOS goes with most standards, it has odd ways of implementing certain CSS.
I want very simple markup (<a class="next">Next</a>) to show a button with rounded corners, but with an arrow pointing right (like the "back" navigation button at the top of some iPhone apps). This is what I have so far (jsfiddle link here):
a.next {
padding: 6px 12px;
border-width: 1px !important;
border-color: #333 !important;
background: #5BFF2D; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5BFF2D', endColorstr='#20CA00'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#5BFF2D), to(#20CA00)); /* for webkit browsers */
background: -moz-linear-gradient(top, #5BFF2D, #20CA00); /* for firefox 3.6+ */
border-radius: 6px 0 0 6px !important;
border-style: solid none solid solid !important;
}
a.next:after {
content: '';
display: block;
width: 0px;
height: 0px;
border-top: 12px solid transparent;
border-left: 16px solid green;
border-bottom: 12px solid transparent;
background: white;
}
..which looks like this:
As you can see, it doesn't work at all. My thoughts at this point are: even if I do get the arrow correctly positioned, it'll never show the background gradient, much less the 1px border, correctly.
Is there a clean way of doing this?
Original Answer
This gets very close, but without a border. If you want to add a span inside, then the border becomes possible also, as well as some smoothing on the 'faked' gradient.
Updated Answer
This achieves the gradient and overall looks better. The main issue is that it requires you to have a solid background color behind it (white, in this case).
Final Answer
This actually does support the gradient leaving the angles transparent. It only will work in browsers supporting CSS3 transforms. I tested in IE9, FF 11, Chrome 18. IE9 is not showing your filter gradient. Chrome renders on my screen with a snubbed point to the arrow (perhaps with some browser targeting, variations like that could be adjusted for).
I applied the following style to the submit button visible in this test page :
border-radius: 25px;
border: none;
background: #FE6181;
box-shadow: 0 0 0px 0.4em #f4f4f4 inset;
padding: 20px;
As you can see there's some awfully irregular pink border which has nothing to do here around the button. Why is that ?
Your inset box shadow doesn't QUITE fill right out to the edges, leaving the background visible.
I'm not familiar with box shadow, but you need a shadow that is both inset and outset, but only outset by about a pixel, so it covers up the outline.
The property "box-shadow" apparently render bad because of the background.
In your case using "border" may solve the problem
border-radius: 25px;
border: 0.4em solid #F4F4F4;
background: #FE6181;
padding: 20px;
Trying out some webkit transitions on a site and have come across a problem. The hover state on my links adds a 1px border and decreases the padding so that the positioning stays the same. Works fine normally, but not when I add the transition. Obviously, as I'm only making 1px changes, it happens abruptly, but it doesn't happen at the same time - the padding changes before the border, so the whole thing 'jiggles'.
#loginbuttons a {
text-decoration: none;
padding: 5px;
-webkit-transition: all 0.5s ease;
}
#loginbuttons a:hover {
padding: 4px;
border: 1px solid black;
background-color: yellow;
}
The best way I've found to get around this is to have a white border on the normal state so that it's only changing the color, but I want it to be transparent. Also, is there any way of fading the background color in from white instead of black without setting a white background color? Again, I want it to be transparent, but it just looks weird going gray and then yellow!
I've got transitions on my navigation menu as well, and the same thing happens (this time altering the padding and margin):
#nav ul li a {
color: white;
padding: 10px 10px 8px 10px;
margin: 0 5px;
border: 1px solid black;
opacity: 0.85;
-webkit-transition: all, 0.5s;
}
#nav ul li a:hover, #nav ul li a.selected {
color: black;
padding: 13px 13px 11px 13px;
margin: 0 2px;
text-shadow: 2px 2px 4px white, -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white;
opacity: 1;
-webkit-box-shadow: 0px 0px 8px #888;
}
Hmmm, just tried bumping the values up a bit, and even changing the margin and padding by 15px using a linear transition still produces a small (looks like 1 or 2px) glitch. Same thing happens in safari and chrome.
Anyone got any ideas how to make it smooth? Or sort out the color issue? Think it would be better doing it with jquery (ignoring the cross-browser support!)? Might go and see if the same thing happens with opera...
edit: seems like the 10.5a opera release for macs still doesn't support transitions...
First of all, it might be worthy to try border: 1px solid transparent so that the transition changes only the color of the border. In that sense the padding stays the same and there is less browser guesswork. If transparent does not work, any color with an alpha value of 0, for example, rgba(0, 0, 0, 0) is also acceptable.
Opera Presto 2.3 supports transitions, but it asks for different statements — -o-transition-property et al. Hope that this link would be of good use. Firefox does CSS transitions too, and they have a demo page. To make transitions work in Firefox, one must use -moz- statements.