Seems like only on Chrome there is no way to transform a <text> element using CSS. transform works on all other svg elements, except <text>.
Here's a demo page (on hover, both Circle and Text should move with transition)
I do not want to use the transform attribute, because I want transition to be applied to the text (in the simplest manner).
Does anyone know if there's a ticket open for this on Blink/Webkit (couldn't find it) and also if there's any way of making it work?
Related
I'm facing what I think is a unique situation, mainly because I can't find anything to help me with this. I'm trying to add a parallax effect inside a masked element. Before the element can be..."parallaxed?"...it has to slide into view, within the masked container.
In Chrome, I have no issues as I can use:
-webkit-mask-image: url(path/to/image.png);
For Firefox, I have no issues as I can use:
<svg><defs><clipPath id="clip-elem"><polygon points="0 0, 891 300, 0 944"></polygon></clipPath></defs></svg>
and apply the svg clip to the container which would create the mask for the larger element with:
clip-path:url("#clip-elem");
For IE 10 and 11 support, the only possible working solution for creating a mask effect is to use clipping. This gives the illusion of a mask, but actually clips the element. Once it begins to slide up or down, you immediately see that it's cut as it moves beyond the area where it should be masked.
Can anyone provide a working example (or insight), in IE, of masking with an element that animates up and down (translateY) without using clipping?
IE doesn't support CSS masking or clipping to arbitrary shapes. If you need to mask HTML elements, perhaps the best you can do is to place, in front of your elements, an image the colour of the background with a transparent hole in it.
Alternatively, perhaps you could live with IE using a rectangular clip region instead of a triangle.
Or the last option is to convert everything into an SVG. Clipping and masking works inside an SVG.
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
http://jsfiddle.net/pCeGu/
See JsFiddle above. Note the itty bitty arrow that pops under the buttons. Is it possible to make that thing fade in/out with the other elements?
Per this question: CSS :after hover Transition
Apparently Firefox 4 is the only browser that currently supports the transitioning of pseudo elements:(
Consider using a unicode graphical character with some absolute positioning as part of your link, instead of using :after.
See: What characters can be used for up/down triangle (arrow without stem) for display in HTML?
Sometimes when I hover over images and what not, I see a tiny triangle linking the pop up thing to it's image. For example, the tiny triangle next to your username on the center top of the stackoverflow page. How do I do that? Do you use CSS3 for this? Thanks.
Use this in your HTML source:
▾
You can see the result here: ▾
Or here.
Unicode character U+25BC is a solid triangle pointing down: ▼. You can also finagle html block elements to look like triangles by giving them a width and height of zero and applying special border properties to three of the element's sides. This technique is known as the CSS triangle hack.
You can do it without using image or any unicode character. this trick used by twitter bootstrap to make tooltips. the idea is by using a small box under your popup with a big transparent border but only showing the top border, all done by using css.
check out the explanation here. and a live demo here
Here you go - Its a Unicode Symbol. The full chart is over at Wikipedia.
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