I am having an image that is being used as an image map.Image map highlights as gray onclick.I want no highlightening.This doesnot happens on safari on mac.However, this happens only on ipad simulator/device.
use CSS on your images
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
it will set the highlight color to fully transparent (alpha 0) black making it not display if you will set alpha to 1.0 on the other hand you will make the highlight to fully cover the clickable area.
refer to Safari CSS Reference for more details
Related
I'm a bit new to JavaFX, I've found a problem with styling buttons, whenever I hover a button it grows 1 pixel bottom, I guess it's a standard feature of buttons but I want to disable it, though I have no idea on how to actually do it.
Here's a picture where you can see it:
Clearly the red close button is bigger than the minimize button by 1 pixel bottom (you can't see it there but my mouse is hovering the red button).
Any ideas on how to remove that behaviour? Thanks in advance!
EDIT: Here's the same problem with the minus button this time:
Edit: Buttons CSS:
.windowbar-button {
-fx-background-color: rgba(0, 0, 0, 0);
-fx-background-radius: 0;
}
.windowbar-button:hover {
-fx-background-color: #474748;
-fx-cursor: hand;
}
.button-close:hover {
-fx-background-color: #E81123;
}
windowbar-button applies to both buttons, button-close applies only to the close button.
I changed the HBox height from 33 to 32, then made both buttons 32 height and added a -2 margin top, it got fixed. It's as if the buttons never really centered vertically on the HBox but instead always had a 2 pixel margin top (though they didn't).
Im trying to create a Qt application where I want a QWidget to fill 100% of the main-window, and ocasionally I want two widgets side by side. I've setup a layout on the main-window and tried to write:
QMainWindow::centralWidget()->layout()->setContentsMargins(0, 0, 0, 0);
Which worked, but had a weird 1px border to the left and the top. I then tried: QMainWindow::centralWidget()->layout()->setSpacing(0); in combination with with setContentsMargins(0, 0, 0, 0) but it still has that 1px border. I tried to set the position to (1, 1) but that just moved the line to the bottom and right, so it seems like the window is being oversized by 1px.
Does anyone know the answer to why this is happening?
(The widget is red and the background is black)
It is not easy to answer without working example or more info. It may be caused by OS rendering system, math-alignment (how is created the rectangle?), scalling/dpi etc.
I have a label in my main window that displays some text. I also have a background image in the main window that needs to show through the label. Only the background and the text should be visible.
I've set the alpha to zero with a white label background following the instructions I found on SO (here and here).
label->setStyleSheet("background-color: rgba(255, 255, 255, 0);");
However, I still see a dark box.
You should set your main window transparent by adding these to the constructor of your main window :
setAttribute(Qt::WA_NoSystemBackground);
setAttribute(Qt::WA_TranslucentBackground);
You can also create a borderless dialog by setting Qt::FramelessWindowHint window flag :
setWindowFlags(Qt::Window | Qt::FramelessWindowHint);
You can see it done here http://qunitjs.com/ and broken down here http://jsfiddle.net/xMwT8/8/ *edit (http://jsfiddle.net/xMwT8/9/)
links are available
here
here
here
here
I am trying to use an image as a texture with an overlay color above or combined with the image to blend into a subtle texture. It can be done with a gradient (like in the first and second link I posted). I don't understand why it won't work with just a color (2nd link).
I think you are asking why you can't do this with a solid color like #E4E2D6. The simple explanation is that it's a solid color :)
the jsfiddle example uses rgba(255, 0, 0, 0.3) which isn't a solid color, it's a 70% transparent red (the a == 0.3 means it's only 30% opacity)
If you want to do it with something like #E4E2D6, take a look at Convert RGB to RGBA over white and convert it to rgba(87, 74, 0, 0.16) which is the same color (when displayed over white, but it's mostly transparent) and will allow the background through.
Okay, just looked at the /9 fiddle (FYI you can just change the original link instead of putting an edit like that). It seems that this doesn't work with
background: rgba( ... ), url( ... );
Why? Because you can only have multiple background images. The -webkit-linear-gradient is an image as far as the browser is concerned, so it uses both. rgba( ... ) without it is a color, so it uses the image and the color as a fallback
Is it possible to separate a photo's RGB channels in a way that if you stack the separate images on top of each other (say in an HTML page with the images being a transparent "channel" stacked on top of each other), you can see the original image the way it was?
I tried grabbing a selection from each channel and making making it a separate layer in that channel's color, but it seems like I'm missing something, or the way channels work is more complicated than I think.
The reason I ask is because if I could get this to work, then I could manipulate the opacity of each color separately using CSS and get some neat effects (without using canvas).
I've answered my own uncertainty on this:
This process cannot recreate the original image.
(Which is what JamWaffles said in short in his comment.) Here's the explanation why:
You can take a photo and split out the RGB channels from software like Photoshop.
You can manipulate those gray scale channels in such a way to add have various alpha levels of Red, Green, and Blue and save that into a .png. So far, so good.
You cannot recombine them correctly by layering in css. Assume you have some area of the photo that is white. Note the following:
Alpha Channel Combining (is additive)
Red Layer (255, 0, 0) + Green Layer (0, 255, 0) + Blue Layer (0, 0, 255) = You see RGB(255, 255, 255), i.e. white.
CSS Layer Combining (is not additive; it will cover lower layers)
Red (top) Layer (255, 0, 0) + Green (middle) Layer (0, 255, 0) + Blue (bottom) Layer (0, 0, 255) = You see RGB(255, 0, 0), i.e. only the top layer, which is red, as it covers the green and blue layers at the point where it is 100% opaque.
So until such a time as css may offer an option to have layers "add" to one another rather than "cover" one another, then such an idea is not possible. Now that is not to say you could not achieve some rather interesting effects with layered .pngimages with monochromatic colors, and later manipulating opacity of the layers further through css, you just cannot ever recreate the image through the stacking of the channels in css.
According to this specification: http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode
CSS can support color blending, it just isn't implemented on most browsers. However many
browsers support the use of color blending in the '2d' canvas context. This blog post
demonstrates the use of canvas for color blending animations and an very basic explanation of the idea. http://mackenziestarr.co.nf/blog/?p=7