I'm trying to create a visual effect using CSS, which you can see here: http://jsfiddle.net/FL8Ug/
The problem at this point, is that when I use both border-top and border-bottom on the :after pseudo element, the edges become "jagged" (in Chrome).
When you remove the border-bottom for example, the top triangle (which is the top half of the right border) becomes much smoother.
I tried applying both -webkit-transform:translateZ(0) and -webkit-backface-visibility:hidden, which has fixed strange behaviour like this for me in the past, but to no result.
Does anyone know if there's a fix for this?
(I also noticed that in Firefox, the border is always jagged, also after removing the border-bottom.)
Note: I'd rather not use both the :before and :after pseudo elements, because I'm already using the :before for another effect.
I appear to have fixed this. For some reason it's only when you use three borders that it gets jagged but if you just use two it stays smooth. So I split your after in two and made a before for the third border.
Codepen of the solutionenter code here
Related
Having the situation described in this image, I need to find solution for such a border using CSS-only, if it is possible. The height is not fixed, it can be variable. And the border should start and end like it is shown. And there is a border for that wavy line.
Red color on the screen is just to show you how it works.
I need this to work on IE9+.
IE 9+ is difficult, since border-image property won't work here...
If you can do it withour proper endings, you can just use the border-color in combination with a background image, that is y-repeated and right aligned.
In an attempt to practice my transforms, I created a simple animation that moved three divs using absolute position and transformed each of them as well position to position. This worked just as expected without any flaws
However, whenever webkit browsers transform the divs, the divs no longer retain their ability to animate to the next color, they remain their original color (most of the time black)
Here's a jsFiddle
I attempted to fix the solution by giving a default div a background color, by applying a transform that did nothing, and adding !important to the new background color but none of the fixes worked. I know the keyframe is being reached because the elements still change transform and location, but the new background color is not applying
It works perfectly fine in the newest version of Firefox for me (when the comment is taken out)
Do I have an error I haven't seen? If not, are there any work arounds for this?
It looks like it's the issue appears when trying to animate both transform and the position (via left and top)
Try using just transform, here's a demo: http://jsfiddle.net/qA4V9/
Notice: percentages in the translate() function refer to the object's width and height, rather than its container like top and left, so you'll have to rethink those numbers (I used pixels)
Good news: it will have much better performance (especially on mobile)
http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
Consider the following code: http://jsfiddle.net/A98vk/
The wrapper div has two (top-left and top-right) corners rounded. The second div is directly nested and I would like to give it a background gradient.
The problem I experience is that the background linear gradient (sorry for only adding webkit version, I have Chrome) gets cropped when the css property border is either absent or set to 0 or 0px [any params]. When I set the property back on, the problem resolves.
Can anyone please tell me what's the problem with it?
I understand I can just set border: 1px solid rgba(0,0,0,0), but this seems like a workaround for me.
Margin collapsing is happening. There are tons of questions/answers about margin-collapsing on stackoverflow. I've answered one (maybe more) myself: Adding CSS border changes positioning in HTML5 webpage
Basically the h1's margin "collapses" and is applied to the surrounding header instead. No background is cropped. The header simply gets smaller.
Elements margins collapse when there is nothing in between them. When you add the border up there you put something in between them, hence no margin collapse.
There's a little more to know about this, including other ways to stop the margins from collapsing. You can check my answer above or simply google it for perhaps more detailed explanations.
You can add overflow:auto (or hidden) to the .header div and fix the cropping.
See this demo
See here for code: http://jsfiddle.net/9pezn/
I know how to do the position bottom, negative margin trick with a bottom-border to make a hovered/active "tab" z-index over it but have been unable to recreate this effect when using a box-shadow. Any ideas?
I.E. I want the main navigation tabs to be on top of the box-shadow! I am essentially attempting to replicate what the Nike.com navigation does. E.g. When you hover over "Sports," then the bottom shadow is covered.
Thanks in advance!
z-index is your friend.
Set the first-level navigation to z-index:1 and then set the second-level navigation to z-index:2 and it should sit on top of the box-shadow from the first-level navigation.
Long story short, Nike did it with a series of cleverly stacked images. I'm not positive you can do this with a native box-shadow implimentation, for two reasons:
1) the box-shadow is tied to the z-index of the element, meaning you can't pull the children of nav1 above the children of nav2 without causing the nav1 box-shadow to overlap nav2.
2) If you found a way to get around it (perhaps by applying individual box-shadows to each nav "tab" instead of the container as a whole, then the shadows would slightly overlap, causing darker spots.
It's possible there's a solution out there that I'm missing, but this is one of those cases where I would probably throw in the towel and use images instead.
I found a solution I'm willing to settle for: http://jsfiddle.net/LVppY/
Scott, you were on the right track that it could be done with z-index
What I'm looking to achieve is a "half way" shadow using CSS3 in replacement of an image.
Below is a slightly zoomed example of what I'm trying to achieve:
There are three elements involved here, as displayed below (scaled down):
So far I've tried placing a box-shadow on element A and then pushing a higher z-index on element C so that the shadow is only visible over element B, but couldn't replicate the half-way cut off.
Has anyone attempted to achieve this before, or is the outcome always going to be as 'hacky' as I think it will be?
Make sure you're setting a position on the elements you're applying a z-index to:
http://jsfiddle.net/Vxz9f/
I just faced same problem and fixed it the following way:
Give the C div a higher z-index
Make it overlap (cover/go over) the A div for 5px (or whatever your
shadow px amount is).
If u do that with the same color, you will hide the shadow perfectly and you'll get your half way shadow.