In Chrome if you right click an element and select "Inspect Element" the developer tools will open and your element will be highlighted in a blue color. I'd like to reproduce that with my own CSS style. Here's an example:
Notice that it is actually making the foreground color of the element a transparent blue. Naively changing the background-color doesn't work nearly as well since you'd also have to change the font color and you wouldn't be able to highlight images.
At the moment the only way that I can figure out how to reproduce the foreground mask effect is by creating an absolute positioned element on top of the original with the exact same dimensions. This seems a bit clunky and I wonder if there's some way to do this purely in CSS?
Related
I set a certain title on my website to be red font, but it appears white.
Interestingly, it says "color: red" under "inspect element" (developer tools) in both Chrome and Opera (incidentally, how can it be that this tool is virtually identical in both Chrome and Opera?)
Even the "computed" value is red. I'm scanning through all computed CSS attributes, and there's absolutely no mention of white. Only several instances of red. So why is the text white?
My question is in general about the "inspect element" feature, not specifically about my silly title.
I should note that the website was made using a builder (SitePad). I'm guessing that the issue here is inheritance. My title is presumably inheriting white color from some element above. But as I said, I'm more interested in understanding how the element inspector works. If it computed red, shouldn't it be red?
What is the background effect that appears on tap? In a webpage some <a>'s have a visual feedback when tap, but some others don't. On chrome for android it happpens in the form of a blueish background color for a few miliseconds.
Whatever it is, It's similar to :active, but not quite. As it seems not to be defined (as I checked in the inspector) and it only happens on tap (not desktop click).
Is there a way to make every element have it? The inconsistence is annoying.
From what i understand, given not much context, you'd want to reproduce the "ripple" effect. Which is like having some sort of wave of changing color from the position of the click.
I would suggest this tutorial to learn more how the effect is done in plain CSS.
http://www.cssscript.com/android-l-ripple-click-effect-with-javascript-and-css3/
I realized this is just the default styling that happens on the mobile browser for <a> elements.
The issue here was that the dimensions of the appearing box weren't matching those of the <a> element, but those of its inner (event target?) element.
In other words, in a given <a><i class="fa fa-icon"></i></a>. On tap, instead of getting a highlighted <a>, I was getting a highlighted <i>.
I want to render a div backward, and then render the table cells inside it forward. I prepared a demo here: http://jsfiddle.net/djsvL/3/ which works in my browser (chrome).
However, it doesn't work in IE 8. From what I've seen so far, I can flip the text or image within a div or cell, but I can't seem to flip the entire layout (for instance, notice how the table cells are reversed).
Is a trick like this possible using IE8's filter:fliph ? If so, what am I doing wrong or how can I do this?
Edit: Here is a screenshot of what I see in IE8: http://tinypic.com/r/2e4yw3p/6
The answer was to set a background color.
IE does not handle transparency well, it uses black instead of transparent, and the box technically has a transparent background.
Think I know the answer to this one, but just thought there may be some genius out there whos know of a way to do this...
Basically I am making a site editor kind of thing and it would be amazingly handy if I could replicate the way Firebug and the Chrome console highlights elements when you hover over their code in the html/elements tabs of those inspectors...
Its not something I can do with background effects because that does not highlight the whole Div (the contents show above the highlight) and I don't think there is anyway of making a div overlay over the top of all the content but have it not block mouseovers on underlying elements...
Anyone any ideas? Is there any browser specific code that achieves this kind of thing?
In general, Firefox extensions are mostly JavaScript. Since Firebug is BSD licensed, you can browse its source code on its project site. Maybe you'll find the relevant code and get an idea how to solve your specific task.
You could add an outline in CSS on mouseover - that would highlight the element without changing its position, as outline does not effect layout. A box-shadow would also work similarly.
In fact, it looks to me like Firebug adds a dark bluish box-shadow to elements to highlight them.
I have a text field, and it's good everywhere except Opera, where it takes the color of the background.
How can I make just the inside white? Setting background(-color) to white makes the entire square element background white, which is not what I want.
The cornering is border-radius. No IE hacks needed :)
No specific CSS is used for the other browsers, it just works, in that it was always white.
Should've posted the link earlier, but the page in question is http://blog.darkhax.com/
I can't see anything wrong - I've set up a simple test here: http://jsfiddle.net/ZxR5k/1/, which works fine on Opera 10.6. The border radius property works as expected.
It appears from the image you have up there that you are applying the background color to the parent of the input element. That may be the problem.
How are you creating that curve? Is it with border-radius? If so, background-color should do it (though you say it doesn't).
If it is an image, can you fire up the image in your graphics program and give it a white background?
What CSS do you use that works in every other browser except Opera?