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.
Related
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.
Similar to a few other examples of flip cards:
similar example 1
However the answer is normally to ensure no background is on the containing card, and specified on the front and back face of the card. however this will not work for my example, due to the fact the back face with text on it, will not occupy the same height as the picture on the front.
I have occasionally had it working correctly, but then after a refresh of the page, it returns to being broken again.
My Code
.flipper{
//transform: perspective(1000px);
transform-style: preserve-3d;
position: relative;
width: 100%;
min-height: 345px;
transition: 0.6s;
background-color: rgb(242,245,245);
box-shadow: 1px 2px 20px rgba(255, 255, 255, 0.6) inset, 1px 2px 5px 1px rgba(0, 0, 0, 0.5);
}
I have yet to start any cross-browser testing on this, but what sort of usable(non animated) support am I looking at?
I realise this is very similar to others questions, however this case should differ enough in terms of not declaring a fixed height on the card, and that the background will likely be required to be applied on the card itself opposed to the faces
Ok so I took a look at it and made some tweaks as you can see on the jsFiddle.
http://jsfiddle.net/nsUZB/1/
Mainly I removed the background-color and min-height on the flipper and set the lightBlue color on the front and back faces.
.flipper{
//transform: perspective(1000px);
transform-style: preserve-3d;
position: relative;
width: 100%;
//min-height: 345px;
transition: 0.6s;
//background-color: rgb(242,245,245);
box-shadow: 1px 2px 20px rgba(255, 255, 255, 0.6) inset, 1px 2px 5px 1px rgba(0, 0, 0, 0.5);
}
.front, .back{
backface-visibility: hidden;
//transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: lightBlue;
}
Let me know if this is going in the right direction.
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.
So i have my image on my webpage. In my css code, i have a transition for a :hover (glow appears), which works fine, and i want to add a stroke on :active. Here's my code :
#bb
{
top: 55%;
left: 6%;
opacity: 0.85;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#bb:hover
{
opacity: 1;
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
}
#bb:active
{
opacity: 1;
border: 10px solid rgba(87,87,87,0.8);
}
my problems are the following : how do i get the stroke to appear around the image without moving it, and how do i get it to stay "active" without having to hold the click on the image?
You can use CSS box-sizing:border-box;. Write like this:
#bb:active
{
opacity: 1;
border: 10px solid rgba(87,87,87,0.8);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this http://jsfiddle.net/4g6d9/
A border occupies space, so adding a border normally displaces an element. If you use the outline property instead of border, no displacement takes place—but the outline will appear on top of anything that would otherwise appear in the same place, i.e. may cover other content.
The meaning of :active has various interpretations in different browsers. To make specific things happen (as cross-browser as possible) on keyboard or mouse events, you need to use JavaScript.
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;