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.
Related
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?
I have built 3 little cubes in CSS and grouped them in a line within a div #first_line_of_cubes at the very bottom of CSS file. You can see it here: http://jsfiddle.net/ZVVK3/ (I think it works only in Chrome, since there aren't all the neccesary prefixes)
Now I want to rotate the line #first_line_of_cubes by using:
-webkit-transform:rotateY() rotate(x)
The problem is that ir rotates around left hand side corner of grouped cubes, but I want it to rotate around the center of grouped cubes.
So far Google said that solution is -webkit-transform-origin property, but I can't get any kind of effect with any values I have tried. What's the problem and how can I make it rotate around it's center?
If there isn't CSS solution, JavaScript/jQuery is also fine.
For me it in Chrome version 27 setting the origin seems to work fine, although it seems like the center isn't quite where I think it is:
http://jsfiddle.net/MRpUb/
-webkit-transform-origin:300px 0px 0px;
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.
i have been trying to create a sort of image slideshow. the problem is that in firefox it displays correctly
with rounded corners , but in chrome the rounded corners ( using css3 ) are being 'hidden' at the back although it is there .
here's a demo of my work :
http://anisa.me/work/
Any help would be highly appreciated .
I succeeded in achieving what you wanted using jQuery ...
First load jQuery correctly (currently not loaded) and add this css rule
#bi-max { border-radius: 0 0 0 10px; }
Then using JavaScript :
$('#bi-max').css("background","url("+jQuery("#bi-max img").attr('src')+")");
$('#bi-max img').css("opacity","0")
This way the background of the big image container change to be like the big image ... with the border radius hiding the rest of it.
Then we set the background of the A elements to the images they contain
$('#bi-min a').each(function(){
jQuery(this).css("background","url("+jQuery(this).find("img").attr("src")+")");
})
$('#bi-min a img').css("opacity","0");
Then we use jQuery to set the rounded corner to the lower right corner of the last A element.
$('#bi-min a:last').css("border-radius","0 0 10px 0")
Can post it to jsfiddle if you find it hard to follow.
Regards
Your question is not quite right. It should sound like "Why does FF show rounded image corners correctly?" :) FF is the only one, who supports it.
Possible solutions:
If an image has fixed size, you can insert some html element (span or div) with the same size and make your image as a background to this element. The image must be hidden then.
An example: http://arsen.ws/folio/craft-design/cosmic-games.html
Save corners as separate images and position each of them absolutely above appropriate corner of the image.
Use JS library to round corners http://www.netzgesta.de/corner/
I have a menu with 5 items of varying text length - home, about us, contact us, etc
In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks
add a css rule to #main-nav li a{ min-width: 105px;}
I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you
The buttons aren't wide enough for the background image.
Give each li tag either the style width: 105px; height: 28px; or make a CSS class with that styling and apply the class to each one.
You can try using a rectangular background image and using the CSS border-radius attribute to round the corners.
If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.
A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the border-radius attributes became widely supported.
Here is a pure CSS solution...
http://jsfiddle.net/wdm954/tAaCF/1/
Basically using CSS3 border-radius and box-shadow to replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.