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.
Related
I recently started learning Tailwind CSS because based on some research about the job market, I felt like it would be a nice marketable skill for my area.
Anyway, I am currently making a website in which I am trying to restrict myself from writing any other CSS classes apart from the ones given to me by Tailwind (In order to familiarize myself with "Tailwind Solutions" to certain problems). However I am kind of running into a dead end with a specific "issue".
I have a couple of circle "buttons" (they are images to be precise, but they have an "onClick" action). Instead of letting the user stumble upon the existence of this button randomly, I wanted to add a hover effect to the button so that a shadow appears around the image when the pointer is hovered on top of the image.
I have only tried the straightforward hover: shadow-sm class but I kind of expected this not to work because this is labeled in the Tailwind Docs as a "box-shadow". However I couldn't find anything else that could be applied in my case.
Any help would be appreciated.
Thank you in advance.
I played around with positioning & created this shadow on hover.
Check out and keep me posted in the comments below.
I know this has been asked many times, and I have been searching for the answer in a lot of places but I can't seem to fix my code. Thank you for reading this because I'm going crazy here! First I had a different z-index problem with safari, than another with explorer, but now the z-index problem I'm having with mozila I can't fix in any way. I code in chrome, where it seems to work perfectly (for me it seems at least!)
I believe now it works more or less fine in most browsers but not on mozila. The idea of the page is to make (only with CSS because that's the only language supported by the website) a flipping book of several pages. I see some examples around of CSS only flipping cards (only one page), but not a book of more than one page. So I essentially overlap several "cards", in order to give this effect. You can see the demo from codepen here: pkrein/pen/qBOewem
Btw I do know this code is not as clean as it could be, but that's the way I figured to make a fuction like that works only with CSS, and I hope it will make sense for you.
Ok, so the matter is, the content inside the book pages is not "scrollable" on firefox. I guess this is indeed a z-index problem, because when I move any page outside the book, that is, from behind the rest of the content, it scrolls fine.
Let me know if I can give any more info that could help you understand my issue!
I figured a possible solution for this. It's not quite the solution for the problem itself but it's something that can make what I want to do work.
The problem was: (what I had to remove in order to make it work):
(1) The div #content-holder holding all the text inside the flap
(2) The div .preparation-text inside the .preparation (that's the text I want to scroll). That was a scrolling div (.preparation) inside a non-scrolling div (.preparation-text). I always add a scrolling div inside a non-scrolling div in order to hide the scrollbar, by adding a high padding-right to the inside div. I know I can use code to hide the scrollbar but it do not work in all browsers.
How I fixed:
(1) I just removed the #content-holedr divs, since it was not strictly necessary.
(2) I removed the .preparation-text and transformed .preparation into a scrolling div. Then I just covered the scrollbar with an image of the same size and colors as the background (a print of the layout).
so I've read a lot about the current state of rotating text and not being able to perfectly get real antialiasing to happen in all browsers. It looks like the first box in the pic in chrome, but the second, jaggedy box in firefox. I've tried the most popular fixes including -webkit-backface-visibility:hidden; -webkit-font-smoothing:antialiased; and maybe one other I can't remember.
However this is not asking the same question, but a new one I havent found anywhere. These two screenshots of the same box are both taken from Firefox. The jaggedy box on the bottom is what it looks like normally, however, when I mess with the rotation attributes with another(completely different) element on the page with the css edit console, it renders the box perfect / smoothly...
I do, however, have to continue to press up or down to change the rotation value on another element for the entire box to render antialiased perfectly, then it returns to its jaggedy normal self. I rotated the div that the content is in and put the css fixes on the same div(although I did try putting the css fixes on every element) and I didn't ever seem to get any smoothness or antialising like you see in the box above...only when I rotate another element on the page in the browser. WTF?!!?!? is there a way to do this in css or is it only something the browser is doing in realtime and cannot reproduce that smoothness in CSS yet?
EDIT: PIC for comments section
For whatever reason, it seems under some circumstances browsers "forget" to antialias text while doing complex transforms.
The fix:
Using CSS to force the browser to render the transformed element in a separately-composited "layer" is one solution:
transform: rotate(…) translate3d(0px,0px,1px);
The explanation:
Many rendering engine implementations create a GPU layer for the 3d-transformed element, and composite it onto the rest of the page when painting. This alternate rendering path can force a different text-rendering strategy, resulting in better antialiasing.
The caveat:
However, this is a bit of a hack: first, we're asking for a 3-dimensional transform we don't really want; second, forcing many unnecessary GPU layers can degrade performance, especially on mobile platforms with limited RAM.
dev.opera.com hosts a good discussion of compositing, hacks using transform3d, and the CSS3 will-change property.
Jeremy if you come back and answer this I can give the answer to you. just realized I hadn't had an answer to this so I needed to put something here.
This solution worked as in the comments above:
Jeremy:
I had another thought: it could be related to creating an opengl/webgl layer behind the scenes. If you add translate3d(0px,0px,1px) after the rotate transform, does it "fuzz out" a bit more?
Answer - Yes this works to perfectly anti-alias any text in all browsers!
I don't know what this is called, so I wasn't able to title this question very well. What I'm wanting to do is make a bar that shows what steps in a process have been completed, like this:
I have no idea how to do this kind of effect, and because I don't know what it's called I haven't been able to find any examples or anything.
How can I make something like in the image above?
Here's a good place to start with the styling: http://css3button.net/81334
What you're looking at is:
css gradients for the backgrounds: http://css-tricks.com/css3-gradients/
text-shadows on the text
box-shadow set to inset for the light detail
and perhaps some pretty advanced :before and :after styles for the points:
http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/
it is called Progress Trackers , it looks similar to Breadcrumb navigation but it has different behavior and uses.
see the following link to see examples and differences between both.
see the following tutorial to build a progress tracker in pure css.
I really like a div box that is styled a particular way on another webpage.
I'd like to incorporate the box into my website.
Is there a simple way that I could get the div box on my site? (I feel like I'm going to have understand the entire CSS file before I can make something similar, that is why I am asking).
Usually it is not that hard.
Try out firefox and some extensions:
firebug
webdeveloper
They can help you with highlighting the needed css code.
Just play around a bit with it.
You don't have to understand the whole site CSS by yourself, let the computer do its job.
Get some inspection tool like Firebug (for Firefox) or Dragonfly (for Opera) and see which rules are applied to the box you want and its inner elements. This way you may easily rip only the required rules (just copy and paste non-striked-out ones from the right part of the CSS pane in case of Firebug).