I'd like to blend a small canvas element over a large parent background element. I've tried the following without success:
JS:ctx.globalCompositeOperation = "overlay";
I believe globalCompositeOperation only works on elements drawn on each other in canvas.
CSS:background-blend-mode: overlay;
I thought the css background-blend-mode might work, but alas no.
I understand the canvas element is in its own little world and that blending it with other html elements is a shot in the dark - just wanted to confirm I'm not missing anything.
Maybe you can draw the "Parent background element" on the canvas and then blend? That might be a bit costly, but it is one of the few options you have I guess.
As vals pointed out in the comments - the answer to my question is: yes, using mix-blend-mode: css mix-blend-mode
Related
I am trying to execute two animations at once upon hover of a single div.
One animation is to scale an image to 50%. The other animation is to scale text from 0-100%, and move it up 10px from its original position.
I have successfully created the animation of the scaling image using the code below, but I am running into problems with coding the text animation.
-webkit-transform: scale(.5);
Here is the working scaling image animation on a JSFiddle:
http://jsfiddle.net/ZVScz/
How can I now implement the animation of the text scaling from 0-100% and moving up 10px?
Thank in advance to anyone who is able to help out!
You need to use the adjacent selectors CSS selector, elem1 + elem2 where elem2 is immediately after elem1 and they have the same parent.
I have implemented something to the effect at http://jsfiddle.net/ZVScz/1/ and you can now adjust the transforms to your liking.
If you have any questions feel free to ask.
Fred
Try using : #worksContainer:hover #worksText { ... }
Repleace ... with the animation you want for the text.
I have a <div> which contains a bunch of <p>s and would like to have an opaque background image behind text, scaled to fill the entire <div>. I.e. no matter how much text I add or remove, the image should grow or shrink to cover the entire background of the <div>.
And only the image should have opacity. Text within the div should be solid black.
How do I do that, please? (and do I have to worry about browsers which do not support CSS3?)
[Answer] from o.p.
I stepped back and looked at the problem another way and found an answer which is cross-browser and does not need CSS3.
I fired up The Gimp and added opactiy into the image itself! Exactly what I sought to do, with no fancy CSS3 necessary ;-)
Thanks very much for your help, #JSW189. I hope you don't mind me posting in your answer, but this is the solution which I chose.
You want to use the background-image property to add the image, then background-size:100% to have the background image fill the entire div.
div {
background-image:url('image_url_goes_here.jpg');
background-size: 100%;
}
JS Fiddle Example.
Further, if you would like to toggle with the opacity, you can use the opacity property. It is set to opacity:1 (opaque) by default, but you can change that by toggling the opacity between 1 and 0. So, for example, if you want an opacity of 50%, you would use opacity:.5.
Opacity JS Fiddle Example.
Note that background-size is a CSS3 property. You can see a browser compatibility chart here. However, this problem can be solved by libraries like modernizr.
I was wondering how I can get shadow on all sides of a div in IE8. In addition to this I want another div that got shadow on all sides but the top.
I have managed to get the shadow on the right and bottom, but not around all 4 sides.. What does the direction property tell me? I have tried with different directions but with no success..
filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 4, Direction = 135, Color = '#cccccc');
Not possible to use css shadows with ie (only ie9).
But you can use shadowOn. It's a great Image based jquery plugin and very easy in use to add shadows to html elements.
you can emulate what you want with http://css3pie.com/
that, or just add a partially transparent div behind your object that's slightly larger to act as a fake shadow
You may work around CSS Borders having glow effect here. You may change the colors and some others parameters.
Hope this helps.
Is there a CSS hack/technique to take an <img> element (with no other markup) and hide the pixel content of the image while still displaying it as an element with background color and stroke?
For example, take an <img src="foo.jpg"> on the page and make it a 32x32 badge of solid color.
Though I am interested in browser-specific hacks (does Webkit have a solid-fill effect?) or CSS3 awesomesauce (is there an image-content-opacity:0.0?), I need a solution that works on IE8+, FF4+ and thereabouts.
If you are interested in the motivation for this question, see the edit history of this page. It has been removed because it was distracting users into helpfully trying to find workarounds to solve that problem instead of answer this question.
Hide the image and use the background filled with a solid color.
Example here http://jsfiddle.net/notme/ZUvHN/6/
This is a take off of my comments above and notme's solution:
http://jsfiddle.net/ZUvHN/7/
What I did was I removed display:table-cell from the a and then set it to display: block
I then set the img to display: none
This lets you then apply the border and background styles to the a tag instead of the img tag. You'll likely have to tweak the margins and spacing a bit.
I don't know if you have the option or not, but it might be easier to tweak the HTML a bit via JavaScript.
Is it possible to bend a div with CSS?
Some sort of webkit transform...
The effect i want to create is a have a ring doughnut shape but made up of a curved div as opposed to border-radius/border tricks
EDIT:
Use case - I'd like to put a linear gradient on this div and have the gradient wrap back around on itself, like in the game Snake, where it chases it tail...
Currently, this is not possible with CSS alone. Your best bet would be to make use of the canvas (and some Javascript).
https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
http://www.roblaplaca.com/examples/bezierBuilder/
It doesn't look like you can without using the border-radius trick:
http://www.w3schools.com/css3/css3_2dtransforms.asp
The border-radius trick is the one that I like,
http://jsfiddle.net/charlescarver/ea3An/
If you want text to curve, then this is a problem made for SVG's Text on a Path capability. (or Canvas). Enjoy.
You can use clip-path property of css putting polygon in value and make points as you want to change the shape of div
I recommend using THREE.js and the HTML5 canvas tag. You can easily bend and animate with it. Check out the examples. Have Fun!
THREE.js Examples