is there a a way to hide mixed area in an angular nvd3 charts?
in fact what I'm trying to do is to display only the difference between two area, I tried to put the first one with color white as the background color as it's always smaller then the second one, but it doesn't work, I checked also the mix-blend-mode option but wasn't able to do that, any suggestion please?
here is a plunker with an example
Related
I have this image of a progress bar:
I am trying to make the text change color as the bar overlaps it. I have no idea how to do this in JavaFX since it is not as flexible as the known CSS. I tried to use different blend modes provided but no use I couldn't manage to get the white color I wanted. Basically, there is no code to show since I don't know where to start. Is there any workaround?
I'm designing a website which uses a SVG-document as background. I want this image to tile on the X-axis. Which works great, but I wanted to know if it is possible to show one group in the SVG only once, such that in subsequent tiles the group is hidden.
The above image visualizes what I want to achieve. The image having one group (in the image the red circle) that is invisible in the following tiles.
Now I am aware such things can be achieved using additional CSS backgrounds but I am really interested if such thing could be achieved using a single SVG background.
Thanks in advance!
The answer is no. If you are relying on CSS to tile the background - ie. with repeat-x, then no. there isn't any way to do what you want. When an SVG is used as a background like that, it becomes immutable - effectively the same as a PNG or a JPEG.
You will need to use a different method.
Certain fonts have a variant for outline and filled, and if you use these on overlapping text it draws an outlined or shaded stroke over the filled text. This is different than just an outline that strokes the text like -webkit-text-stroke-color would give you, since sometimes the filled font contains shading or other details.
Here's some examples of fonts designed to be used this way.
http://www.myfonts.com/fonts/matchandkerosene/duotone/
http://www.myfonts.com/fonts/scrowleyfonts/stomp/
I was sort of able to get this to work using CSS like this:
http://jsfiddle.net/6SakC/2/
This creates two H1 spans and uses the top-margin to move the outline one atop the filled one.
However, this doesn't seem ideal to me. Two problems:
I don't want to duplicate the text in the html.
I have to guesstimate the top-margin by trial and error.
If the text wraps, this doesn't work anymore.
Is there a better way to do this? I can live with having to duplicate the text, but I'd really like a more automatic way to do the positioning.
Thanks!
You can place the outline text inside the h1 and use absolute positioning instead of estimating the margin, as in this jsFiddle: http://jsfiddle.net/6SakC/4/
That also solves the problem with the text wrapping.
To avoid duplicating the text in the markup, you can use JavaScript to create the duplicate text, as in this jsFiddle: http://jsfiddle.net/6SakC/5/ (This might not be the best idea, though, since the text might get a moment to display without the outline, and JS is occasionally disabled in the browser settings.)
I am trying to make a 3d transition/transformation so that when a link is click a bar run the length of my website rotates to reveal different options. However it currently looks very untidy, in that each face of the cube has gaps around it, and you can see each face of the cube, regardless of whether it not view (i.e when it is animating you can see text you should be able to see, it also gives the impression that bar grows in width when animating.
Is there anyway I can tidy this up?
I have made a fiddle which can be found here
I’m not sure about the gaps, but applying -webkit-backface-visibility: hidden to .face should sort out the visible text issue.
There‘s a good cube example at the end of this blog post which might help with the gaps — maybe you need to use translateX to get the faces into the right position?
I recently got a few designs made and am trying to slice and code them to get better at CSS. On my first design, I ran into some issues.
First, do I have too many divs? I have a wrapper around each section to allow the expandable background section on the left and right of the content to be a different color than the content itself. I also had to use a conditional style to get IE to position the ul correctly. Is there a better way to do that?
Second, would I make a div for each colored block in the content section? That would give me a white, blue, white, gray, and blue div all stacked onto each other. The main issue with that is going to be the parrot and the great price $199 emblem that breaks out of the div.
Here's what I got:
http://www.astigmaproductions.com/
Here's what it should look like:
http://www.astigmaproductions.com/ap.jpg
You're not using a reset css, which will lead to crossbrowser issues. Consider adding one. You will run into IE issues and in this case a conditional style is the way to go. But adding a reset will lead to less IE problems.
Since the parot breaks out of its div you shouldn't break everything into multiple divs. There is a gradient that is non-linear and lots of graphics going on in this header. Just grab the image and make it a big background (blue bg + grey line + parrot) and it should work. Add the skype and co. icons on top of that as well as the text.
If you want the text to be anti-aliased, try using sIFR or add the text to the main background.
That's pretty much it from what I see, you just need to start working and see if you run into issues.