I want to use PNG (or SVG) background-image (background-fit : 'contain') and then dynamically change node border (based on data). Everything works except one thing: node border is rendered "centered" around the node, so half of the line is outside the node's dimensions and half is inside the node. This clips the background image (see nodes.jpg below).
nodes.jpg
As a workaround I tried to use 'background-width' and 'background-height' (set to 60%) to create something like padding in CSS but this changes the aspect ratio of the background image (it stretched the image) which I don't want.
Is there a way how to achieve the desired result with the current CSS styles in Cytoscape.js (I'm using CY 2.7.11)?
That's the way a stroke works in a canvas. Unless browsers add new API to control stroke position (inside, outside, on/mid), there's no performant way to have outer borders.
Set a padding to enlarge the outer width/height of the node without affecting its inner width/height (used for bg img sizing): http://js.cytoscape.org/#style/node-body
Just set a padding to half the border width or greater.
Related
I currently have a div in my home page, serving as the first section of it. It has a background-image which is a SVG file.
What I'd like, is for the background to not move vertically when scaling it. Have it with fixed height, but scale horizontally.
Currently, I can get it to have 2 different behaviours, neither the one I want.
The first gif is closest to what I want, giving the svg element a height attribute and using preserveAspectRatio=none, but then the circles inside don't preserve their aspect ratio.
The second example could also work, but if the svg were clipped to the bottom of the div instead of the top. But I don't know how to make it scale "upwards" instead of downwards.
My web page contains with a background image and a tranparent card-panel on top of it. Is it possible to only darken the background image while keeping the brightness of the area under the transparent card panel the same?
depends on how the position and the shape of card you usually can. What I should do is:
-- create a pseudo element for the HTML element having the background image
-- stretch the pseudo element out to fit the whole area of the parent element
-- make sure that the pseudo element stay under the parent content (the card) in your case
-- Make the pseudo element look darker by adding a background to it, using linear-gradient.
By using linear-gradient, you can control which part of the background image look darker than the other part, the part which you don't want to look darker should have linear-gradient value as transparent. This technique will work fine most of the time for normal shape/position however, it has its own limit. I leave it for you to research how to use them.
In case you are not used to these terms and techniques, I put a few links below:
Pseudo element:
https://www.w3schools.com/css/css3_gradients.asp
Linear Gradient as background:
https://www.w3schools.com/css/css3_gradients.asp
Is the background-position css property used to indicated where in the element should the image be displayed (like this) or what part of the image should be displayed (like when using sprites) ?
In my instance i have a div of let's say 300px width, i want the image to be shown in the right part of that element so normally i just added a center right to my background declaration, though now my image is a spirit so how can i control the coordinate of the image that i want to display ?
Seems to me that this background property act in 2 different way.. Am i missing something ?
If the place where you want to put element of the sprite is larger then the element then you need to put white space (trasnparent) around it. And you can't use keywords like center, you need to use pixels, because you will center whole sprite and not your element.
Using sprites is like using window where background is larger then background image so you need to position the window (actually you position the background).
If your container is larger than the background sprite image part you want to display then the other part of image will also be displayed. Better use Sprite cow to generate sprite it will give you the css for different parts of sprite image
http://www.spritecow.com/
I need to create this layout and I'd like to do as much of it as possible with CSS, rather than using images and whatever.
As such, how can I do this in CSS? (if at all?)
As you can see, there is the image behind, with the button overlaid with padding. The bit that I'm struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I've pointed them out on the pic below).
Any help would be great.
Thanks
I know just enough CSS to be dangerous so I can't detail every step, but I think you can approach it like this:
Split the background image into two separate images both at a z-index of 0 at the height of the top of the grey box. I think you can use two div's that reference the same original image with different offsets (similar to CSS Sprites) but I don't know the details of how to do that. The left edge of the lower div would start where the grey box ends. Round the lower-left corner of each "image" div.
Add the grey box at a z-index of 1 with appropriate rounding, and then the blue box at a z-index of 2, again with appropriate rounding.
The background of the block element containing all of this would also have to be grey to match the grey border and properly fill in grey where your right-most arrow is pointing.
You don't have to split your image at all, only the container divs.
Let me detail a bit:
You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.
So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you'll see it fits very nice.
On the bottom, you have two divs or whatever block element you'll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.
Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.
I'll be putting a small demo together to better illustrate the idea.
After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.
That is very easy to realize with pure css. The page you have shown is divided into 3 divs without any margin. You only need to set the right border radius for each div.
This is a function of the background image, which is a css element if that's what you mean, but it is not a seperate attribute for a selector, at least not in standard CSS. Wait until CSS3 becomes more prevelant, then it's corner-radius or some such thing.
Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.
The best way to figure out how it's done is to read the source of the page you found it on.
For convenience:
If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want.
I have a div that contains a background image of size 64x64. I would like to give this div a circular shadow or radial background when the user hover's over the div with the mouse.
If I simply give the div a box shadow, the shadow is cast around in a square shape. If I make the div have a radius, then I will need to make my div bigger than 64x64 so that it doesn't crop?
Have a look at at the following example that illustrates what I am trying to describe:
http://jsfiddle.net/rNeaZ/2/
The 4th example (shown in link above) in particular doesn't suit what I am after because:
it's size is much larger than my 64x64 image
the image looks to have a circular border now, which is not what I want; I am after a circular shadow or background behind it
It will probably just be easier and more effective and more efficient to add a nice radial shadow to an image sprite and change the location of the background image on hover.
The simplest solution would be to add an appropriate background-color, but that would only work when you need an offset of 0 0, like your example.
The more general case would be to create a pseudo-element and apply the shadow and background color to that. I can describe this in more detail if the first idea doesn't apply to your case.