I am struggling with a strange problem for a couple of days now. I am using big triangles in my website. I know if i make triangles in png or any other format, there is a big chance this is gonna look crispy. Thats why i go for the svg approach.
The first thing i approached was a big border under the svg elements. This was fixed by simply adding vertical-align: top; to the svg element.
The problem is that it is very buggy in some browsers. Some browsers show a line beneath it when resizing. Sometimes the line is always there.
The following image illustrates the problem, this is taking in safari 10.1 when resized:
This is how it should be
The svg are absolutely positioned i
Is there anyone who has faced this problem before and can help me out with this?
Thanks for you're help guys, really appreciate it!
I ended up with a (dirty) fix.
The elements that are aligned to the bottom i gave a transform: translate(0, 0.4px);
And the elements that are aligned to the top i gave a transform: translate(0, -0.4px);
For now this seems a good fix without disrupting the layout!
Related
I am having some problems with white 1px border when transform: scale occurs on it or when the width of browser changes. It is visible only around first and third block (yellow one and the one with the 'H' letter on it) and ONLY in chrome and safari browser, in firefox everything looks good though!
I was looking for similar topics and I realized that a lot of people had this problem but actually there was no answer that could help in my case.
-webkit-transform:translateZ and -webkit-backface-visibility in CSS did not work.
Here's an url to a site:
http://wemakeithappen.pl/connect/
Thanks a lot for help! I hope someone can fix it:)
I'm looking for any working solution in IE8 for this little issue I'm having. For some reason css pie isn't working great on this server we are working on so we are having to use images for IE8 specific stylesheets to sort some quirks out.
On the right hand side there is a facebook panel that needs rounded corners, so far I have an image on the top of the panel to give it a rounded corner, but ideally we want rounded ones on the bottom too, but I just can't figure out how. Could anyone shed some light? Quick dirty fixes are welcome!
Image attached - see how it is in webkit compared to IE8:
http://i.imgur.com/0A9Ns2v.jpg
Thanks guys!
Edit: My solution was to add an extra div inside the parent. Thanks #Pete.
if you add an extra div inside your #block-facebook-pull-facebook-pull-default and then flip your /images/fb_top.jpg to create a bottom image, you can add the following style to the new div:
#block-facebook-pull-facebook-pull-default > div
{
background:url(../images/fb_bottom.jpg) left bottom no-repeat;
}
you then want to take all the padding off the parent div and put it onto the new div
I'm experiencing something pretty weird and tricky with WebKit. I'm playing around with a CSS animation, where a div is rotating around the Y axe, while another div in background is doing nothing. Problem is that, in Safari, the div that is rotating gets cut by the first div, instead of rotating on top of it.
It's a little bit hard to explain, so here's a JSfiddle.
http://jsfiddle.net/HMF6f/
Some mentioned that adding a 3d translation could fix it (like below), but in the case of a complex animation, this totally changes the visual look, and that's not working for me.
-webkit-transform: translate3d(0, 0, 100px) rotateY(-50deg);
I like how Chrome behaves with this, and I'd like to have a same behavior. Any idea on how to achieve this?
A 3d rotated div cuts through another div with a higher z-index. I would like to prevent this, and force adherence to z-index definitions. I thought -webkit-transform-style: flat; would solve this. Anyone got a suggestion?
Since you have not a fiddle so that we could look around this issue, but I can point you to a link which may be useful for you to figure out the issue:
http://css3.mikeplate.com/
I need to recreate the following design using only CSS:
What you're seeing in the picture is the top of a website container - the "links" are part of the main menu.
As it stands, I've created the container but I'm not sure how to go about making the slant on the navigation without using an image.
For the record: I'd rather not use an image as the chances of the box shadow on the slant matching up with box shadow rendered by the browser are slim-to-none, especially when it comes to multiple browsers.
I was thinking along the lines of a positioned and rotated div with a white background and a box shadow, but I haven't been able to build it yet.
Any ideas?
There is something called Sandpaper that can help you to transform your elements, even in IE!
.myDiv {
-sand-transform: rotate(45deg);
}
You can just plug it into your site and you're set.
Also you can use CSS3 transforms, which you asked about in your question: "Using nothing but CSS."
To do this you'd use:
.myDiv {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}
And thanks to Josh and Robert for the Opera equivalent:
-o-transform: rotate(45deg);
Internet Explorer will drop ClearType on any text that has a filter applied to it. But you can add empty extra element inside the main one and apply filter to this extra element. After this ClearType will be not ruined and the same result can be achieved.
For rotation, you're looking for:
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
Keep in mind, that the rotation is a CSS3 attribute, so you're not going to get the same behavior across all browsers. Rather than making just the slant with an image, it would probably be better to recreate the whole outline. I'd approach it with:
The header section, which would have the slant, shadow, the menu background and the padding at the top of the content, pretty much like your screenshot there.
An image that can repeat-y down the entire body of content with a shadow.
The footer section.
You can also use external libraries to attempt to recreate CSS3 attributes, but images may be the easiest way as you know how they'll render.
I think you can use the techniques from http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
This is a really nice compilation and inspiration for using CSS. Enjoy.
PS: it is safer than CSS3 transforms.
Rotation seems unnecessary. I would try using a CSS triangle effect.
I'm going to assume your links are in a ul so your css could select ul:before and make it into the correct shape.
I don't know what will happen with the box-shadow but it might be worth a shot, and will probably be easier to align in IE without resorting to JavaScript.