I have an image. I have a second graphical element ontop of this image, whose alpha I want to use to "hide" parts of the image below it, while the top element itself isn't shown.
Something along the lines of
CanvasRenderingContext2D.globalCompositeOperation = "destination-out"
This top element will change transparency and shape live, so prerendering everything onto a seperate canvas won't be an option.
I was thinking of "multiply" but it didn't do what I expected it to. I thought if I put the alpha of the top layer to "0", that would be multiplied with the layer below, also making it transparent. (I was sad it didn't work)
Is there someway to "hack" this using the existing CSS blending modes (or any other method)?
As an alternative, consider mask-image (however, note that currently there's no support for this on IE / Edge):
img {
-webkit-mask-image: url(http://www.lordtennyson.ca/uploads/1/2/4/2/12421219/paw_print_small.png);
mask-image: url(http://www.lordtennyson.ca/uploads/1/2/4/2/12421219/paw_print_small.png);
}
<img src="http://www.dizzydi.com/uploads/6/5/6/5/65656887/6168555.jpg" />
Related
I'm currently trying to draw an HTML formatted text of a QTextEdit into a QPixmap with a transparent background, to use it as an overlay for another widget.
My first attempt was, to use the QTextDocument of the QTextEdit and use drawContents() to draw it to a QPixmap.
As a second attempt, I passed the HTML to a QStaticText and painted this to my QPixmap, using a QPainter.
Both approaches paint the final text as expected, however, the background of the QPixmap is always grey. Also setting the background-color of the QTextEdit, inside the StyleSheet, to transparent does no change.
Is there any way, that I can make the background transparent?
Apparently, after some more research, I found the solution.
My QPixmap was not transparent at all, even before rendering the text. I came across this blog post, in which the composition mode of the QPainter is set to CompositionMode_Source using a call to setCompositionMode().
I've created a button with Raphael.js that has a gradient background. Now I want to change to a different gradient when hovering over the button using Element.hover. But as soon as I move the mouse over the button, it starts showing only a solid color.
Here's my fiddle.
Maybe it's browser-related. I only tested Chrome and Safari under OS X.
The problem is that you call transform on the set afterwards. The tranform() method is deprecated, use the transform attr instead. Also, you might want to apply the transformation individually when you create the elements, as Raphael is known to have some issues in transforming sets uniformly.
Is it possible to only trigger a div's mouseover when the cursor is over an opaque part of the div's background image? Perhaps via Javascript?
All I can find with Google are old IE PNG fixes.
This looks like a similar question to this one: Hit detection on non-transparent pixel
I suppose this could also be done for background image by getting the attribute with jQuery:
$('#myDiv').css('background-image');
I haven't personally done this, but it seems like a viable solution. This will only work for modern browsers, but you should be able to make it back-compatible with excanvas.
It is possible, just not very easily. You'll have to use a lot of Javascript.
You'd want to attach to your <div>'s onmousemove event, which returns the X,Y coordinates of the cursor. Your event handler function would then test to see if the cursor is in the correct place in order to trigger an alternative onmouseover event.
Implementing the "is the cursor over an opaque pixel or not?" test can be done two ways: the first is to create a simple mathematical expression (say if the opaque parts of the image make neat rectangles, circles or polygons). The more difficult (and less browser-supported) way is to load the background image into a Canvas object and then get the current pixel value's opacity figure and take it from there, like so:
var pixel = canvas.getImageData(x, y, 1, 1).data;
var alpha = pixel[3]; // assuming RGBA
if( alpha > threshold ) onMouseOver(); // raise the event
Another alternative is to create an entirely transparent div (or some other element) positioned and sized so that it only covers the opaque part of the div below, then just test the mouseover of that element's box.
It's a bit of tweaking but why don't you add a class to your opaque div, and use JavaScript to check for it?
In jQuery:
$('div').mouseover(function(){
if ($(this).is('.opaque')) {
//Some actions
}
});
Usless Background Info
Hello, all. This is my first post here, but I often come here for help.
I am an amateur web designer and have been in web designing for almost a year now.
The Problem
My question is about CSS3 transforms. I have a small, circular element in the center of my page that transforms successfully when I hover over it. I have a larger circular element that is, by z-index, underneath it. The larger circle also has CSS3 transforms coded in the CSS, but will not transform, or even triggerd when hovered over. Both circles are overlaid, with the smallest on top, to create concentric circles.
My Attempted Solution
One word: Z-index. I have tried putting the larger circle on top, which works fine. The problem with this is that the smaller circle no longer triggers...
The Result I Want
I would like for the circles to remain in their 'concentric' positions and for the larger circle on the outside to transform by :hover. Is it possible to have an 'alternate trigger'? e.g.: in JavaScript, I can trigger an animation by hovering over any element that I specify. Is this possible to do in CSS? Can I hover element (I), and change properties for element (II)? If I cannot do this, how would I go about triggering animations for both circles, by hovering over only one? I am trying to stay with pure CSS/HTML, but I will accept JavaScript answers.
Last Notes
I hope I have provided ample info for a decent answer... Here is a screenshot: http://i.stack.imgur.com/WPj62.png
The circle with the infinity sign is the smaller circle element. The larger circle with the faint border around the screen is the other element.
EDIT:
Something's still not right, please take a look at the full code posted here: http://cssdesk.com/eJ8BH
If I understand your question, it sounds like when you hover over the small circle, you want both the large and small circle to transform, correct?
The easiest way is likely to use javascript for this. If you are using jQuery, it's even easier:
$('.littleCircle')
.hover(function(){
$(this).addClass('myTransformationClass');
$('.biggerCircle').addClass('myTransformationClass');
})
UPDATE: Some further examples based on follow-up feedback.
Here's what I'd do. First, give all 4 related elements a class so you can grab them via jQuery. For the example I use .rolloverSet
// grab all 4 elements and cache them
$rolloverSet = $('.rolloverSet');
// grab the one element that needs to have two classes
$otherElement = $rolloverSet.find('.otherElement');
$rolloverSet
.hover(function(){ // we'll add a hover event to each element in the group
$(this).addClass('myTransformationClass');
$otherElement.addClass('myOtherTransformationClass');
})
.blur(function(){ // remove the classes on mousout
$(this).removeClass('myTransformationClass');
$otherElement.removeClass('myOtherTransformationClass');
})
You do not need jQuery for this. You need to apply :hover on the parent element of the concentric circles and then apply the animation to its immediate children like this: http://jsfiddle.net/nimbu/taqr4/
Things I changed:
Updated to use shorter transitions, animations property
Added moz, o, unprefixed properties
Removed -webkit- from border-radius
Gathered common properties of concentric circles to prevent repetition
Fixed incorrect background-color (#00000000)
The reason for asking this question is because I want to be able to draw an arrow between two svg images. I want to use canvas to create the arrows, so firstly I generate the svgs then place a canvas on top of them to be able to draw the arrows.
I've tried using style=... but haven't had any luck as everytime I add the canvas element it just pushes my svg images to another pl
If there's no easy way to do this I'll just create arrows using SVG, I figured it would be more efficient to use canvas if I had to do lots of arrows in a short amount of time.
You need position:absolute on the CSS for the canvas to take it out of the flow, and then you can layer it as you like using z-index.
However, I instead suggest that you can use one or two tiny canvases to create the arrowheads and use toDataURL() on them to create a url you can use for <image> tags in the SVG. This way all your graphics are in SVG but you can use the canvas for complex raster effects if you need to.
have you tried z-index? it's a useful css trick
#svgcontent
{
z-index:1
}
#html5content
{
z-index:3
}
EDIT: accidentally screwed the #s up. 'scuse me.