I'm attempting to highlight a div using transition & box-shadow.
transition: transform .8s ease-in;
box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
I get it to function in Chrome but not IE. What do you suggest?
---
Update May 1st, 2020
---
I narrowed down my problem. If I change the display to block or table it works but by default the element is a table-row. When I change the display it works but throws off my styling. Any particular clue what the difference between "table" and "table-row" displays?
try to use this following code :
transition: transform .8s ease-in;
box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
-webkit-transition: transform .8s ease-in;
-webkit-box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
If you remove the transform from the line below then it will work in IE 11 browser.
transition: transform .8s ease-in;
Test code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition:.8s ease-in;
box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div>Test</div><br>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
Output in IE 11 browser.
If the issue persists then please try to inform us which version of the IE browser you are using for making this test? What is the purpose of using transform with transition? What exact output do you want to get in the IE browser? If possible then try to provide the sample code with HTML and CSS that we can try to run and test with the IE and other browsers to see the difference in the results.
Related
I have a fixed navbar that I am giving a drop shadow effect. That works fine, however it seems to also be affecting all the text inside and makes the font weight appear slimmer.
How can I make it stop changing the font?
http://jsfiddle.net/dvY4A/1/
HTML
<nav id="nav1" class="dropshadow">Hello World</nav>
<button>toggle drop shadow</button>
CSS
#nav1 {
position:fixed;
width:100%;
font-size:20px;
top: 0;
left: 0;
min-height:20px;
background:white;
}
button {
margin-top:50px;
}
.dropshadow {
-moz-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1);
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
I've found the answer and it involves some issues at the operating system level.
I've updated the solution here: http://jsfiddle.net/dvY4A/5/
All it took was adding the property -webkit-font-smoothing: antialiased; to the #nav1 block.
More details about it can be found here: http://lists.w3.org/Archives/Public/www-style/2012Oct/0014.html
But basically, there are two rendering modes for text, grayscale and subpixel-antialiased. For technical reasons, the browser tries to switch between the two during certain operations like hardware acceleration, which the box-shadow must be using.
I'm still using my workaround just in case but I may set this property at some point.
I'm getting some issues trying to use the transform scale CSS property.
Here's my CSS on hover:
#pricing-table .pricing-column:not(.labels):hover {
position: relative;
z-index: 50;
-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
-ms-transform: scale(1.02);
-o-transform: scale(1.02);
transform: scale(1.02);
-webkit-box-shadow: 0 0 3px rgba(1, 1, 1, 0.3);
-moz-box-shadow: 0 0 3px rgba(1, 1, 1, 0.3);
box-shadow: 0 0 3px rgba(1, 1, 1, 0.3); }
Here's the result, note the weird grey border on some of the list items:
Screenshot of issue
I've had similar issues with chrome and CSS3 transforms before and have never been able to figure out how to solve them. Would appreciate any insight! Thanks
Here's the live demo:
Demo Link
U can try to add borders. I checked your code and this worked.
#pricing-table .pricing-column:not(.labels) li,
#pricing-table .pricing-column:not(.labels):hover li {
border: 1px solid #FFF;
}
U can use nth child to remove it from first li if that bothers u.
#pricing-table .pricing-column:not(.labels):hover li:first-of-type {
border: none;
}
Assuming an element is at 100% saturation, opacity, etc... how can I have its background become slightly lighter when it is hovered?
The use case is that I'm allowing a user to hover over any element on a page. I don't want to go around determining each colors equivalent at 80% opacity.
One method is to change the opacity: 0.4 but I only want the background to change.
It's a long time ago but you can do something like this:
.element {
background-color: red;
}
.element:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}
You can change the 100px into a number you want. I took a large one to cover the whole element.
It isn't a very beautiful solution but it works!
Here an example: http://jsfiddle.net/6nkh3u7k/5/
Here's an easy way to do it:
.myElement:hover {
filter: brightness(150%);
}
I'm using box-shadow property to control the brightness of the background color, by placing a translucent overlay
Example:
.btn {
background-color: #0077dd;
display: inline-flex;
align-content: center;
padding: 1em 2em;
border-radius: 5px;
color: white;
font-size: 18px;
margin: 0.5em;
cursor: pointer;
}
.btn.brighten:hover {
box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.3);
}
.btn.darken:hover {
box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.3);
}
<span class="btn brighten">Brighten on Hover</span>
<span class="btn darken">Darken on Hover</span>
you should use the RGBa method (background-color:rgba(R,G,B,alpha);) to do this:
.element{
background-color:rgba(0,0,0,1); /*where 1 stands for 100% opacity*/
}
.element:hover{
background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}
FIDDLE
AND if you strongly need to make it work in IE8 or lower too here is how it comes:
.element:hover{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */
zoom: 1;
}
note that the startColorstr and endColorstr values are built like this #AARRGGBB (where AA is the Alpha channel) and must be the same if you don't want a gradient effect from a color to another.
I would use a :after pseudo-element instead of a conventional background. It's supported in IE8, where rgba() isn't.
HTML:
<div class="hoverme">
<p>Lorem ipsem gimme a dollar!</p>
</div>
CSS:
.hoverme {
position: relative;
}
.hoverme:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #fff;
z-index: -1;
}
.hoverme:hover:after {
background-color: #ddd;
}
or something like that.
http://caniuse.com/#search=%3Aafter
For a smoother result, add a CSS3 transition:
.hoverme:after {
-webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
-o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
The previous snippet was copied and pasted from http://css3please.com
http://jsfiddle.net/ghodmode/6sE9E/
You can do this with only CSS using filter: brightness(); but it is only currently supported in WebKit browsers. See http://jsfiddle.net/jSyK7/
You want to change the background-color lightness of any element that is hovered without using opacity. Unfortunately. I don't think this is possible without setting specific background-color values for your hovers.
The use case is that I'm allowing a user to hover over any element on
a page. I don't want to go around determining each colors equivalent
at 80% opacity.
There is one alternative that I can think of but it would require a translucent PNG overlay on the entire element, which will also cover any of the element's contents. Thereby not solving your problem.
Related Question: Dynamically change color to lighter or darker by percentage CSS (Javascript)
You know that sexy glow that surrounds an input field whenever it has focus?
Without going into too much detail, I need to recreate that effect outside of an input field, but I can't seem to find the stylesheet that dictates such an effect anywhere.
(I know how to do it, using the outline property and so on. I'm just wondering if there's a way I can find the EXACT values used by default for input text fields.)
chrome has the outline style for inputs as default. i have to disable that rule for many projects.
use the chrome developer tool to see the browser style rules.
see how to do this here:
chrome developer tool info
It is possible to do this via CSS. Have a look at Twitter Bootstrap Forms and how they do it. Click inside any input field.
See a simple working example here: http://jsbin.com/esidas/2/edit#html,live
It's done using CSS3 properties for box-shadow and transition
input[type=text] {
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
input[type=text]:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
The best cross-browser/cross-platform I know of is formalize.
If you're trying to figure out how a particular rendering works (i.e. on Safari Mac), you'd be looking for user agent css. On modern browsers the entire rendering lifecycle is fully parametrized, heavily relying on vendor-specific prefixes and can be made visible with the inspection tools, e.g. on Chrome or FF+Firebug:
That's your browser doing it for you automatically. That's why you can't find a stylesheet for it.
Because it's an effect of the browser and not from a style, you'll need to do it manually. In saying that, keep in mind that each browser does it differently (and I think it depends on the client OS as well). So you'll really only be able to match it if you know the client environment beforehand (possible in a closed network).
You know it is added by the web browser and it depend on the browser and the OS you are using , therefor we can't show you the exact codes. How to find the exact styling may not be difficult, try the 'inspect element' option on an input field, it may show the 'computed styles' by the browser. Else if you can say which browser you use on what OS exactly , we can help you.
I'm using Twitter Bootstrap 2.0 and I was wondering how to change the select boxes so they have the same awesome blue glow that text boxes and other form elements do.
Right now all of the form elements I have is blue when focus is put on them, except the select boxes. I noticed that even on http://twitter.github.com/bootstrap/base-css.html#forms when I put my focus on the select boxes they glow orange, so maybe it's not built in yet. Has anyone else had to deal with this, or know how to fix it? Thank you!
1) Add following lines to bootstrap.css file
.shadow_select {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.shadow_select:focus {
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
}
2) Then apply shadow_select class for select tags
<select class="input-small shadow_select">
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCC</option>
</select>
This works on all other browsers except webkit. for webkit wrap select using div. Then use jquery to detect focus event on select and apply CSS shadow class to that div. (Because focus event can't be applied to a div
Building on Sachindra's this jsfiddle illustrates how to do this in webkit (Chrome, Safari) browsers.
Incidentally Sachindra's class attribute in point 2 is spelled incorrectly, which threw me for a bit (shadow_slect -> shadow_select)
If you're using Compass you can grab the these mixins https://gist.github.com/2919841
and then use them as like so:
#import "compass-bootstrap-box-shadow"
shadow_select
#include bs-box-shadow
&:focus, &:hover
#include bs-box-shadow-focus
I'm brand new to Sass and Compass, so if you have any improvements please don't hesitate to let me know.
If you are using Sachindra's answer above, it might not work correctly in webkit or other modern browsers.
For that you just need to include these two tags in the " .shadow-select:focus " element. This worked for me.
border-style: solid;
border-width: 1px;