I am wondering if it is possible with leaflet.js (current beta version) to only draw the border on the inside of the polygon (inline border).
For example: I have a square polygon with a 6px border. This would show 3px of the border on the inside of the polygon and the other 3px on the outside. Is there a way to only show the 3px on the inside?
A workaround is to reduce the size of the polygon and use the default border, but it would be nice to have an option without having to reduce the size of the polygon.
Does anyone know how to achieve this without reducing the size of the polygon?
Cheers
Related
Am trying to fit four different background image in one grid div but is leaving a big gap in between the four corners and cant cover the whole area
grid-item3{
background-image: url(./images/bg-section-top-desktop-1.svg),url(./images/bg-section-top-desktop-2.svg),url(./images/bg-section-bottom-desktop-1.svg),url(./images/bg-section-bottom-desktop-2.svg);
background-position:left top,right top, left bottom, right bottom;
background-size: contain,contain,contain,contain;
background-repeat: no-repeat, no-repeat,no-repeat,no-repeat;
}
I have a triangle polygon filled with color and low opacity. That was no problem so far.
What I'm trying to achieve looks like this (without points and lines). It is basically triangle polygon with fill color but opacity smoothly lowering from one of the triangle apexes.
Is there any way to achieve this with mapbox? Thanks!
There is no easy, built in way to do this with Mapbox GL JS.
The best way I can think of is to create a Marker (an HTML object anchored at a specific lat/lng) to draw the shape. You will have to do some maths to translate the coordinates of the triangle's vertices into screen coordinates. You will also have to update the calculations if the viewport zooms or rotates.
I'm using Leaflet ImageOverlay https://leafletjs.com/reference-1.6.0.html#imageoverlay to put a PNG image on top of a polygon (white line). I've already assigned transparent pixels to the pixels where there is no image. However, as you can see in the image, the PNG image goes outside of the polygon exterior line around the borders. How can I make it fit the polygon?
I think I might use z-index here but can't wonder how
Is it possible to adjust the opacity of just the text shadow, rather than the text itself as well?
E.g I have purple text with a blue shadow. I'd like to make the blue shadow have an opacity without losing anything on the purple.
h1.blue {text-shadow: 3px 3px 0px #3f6ba9;}
Yes, but specify color in rgba mode to add alpha transparency.
h1.blue {text-shadow: 3px 3px 0px rgba(63,107,169, 0.5)} //half of transparency
To add on the answer for anyone looking to use HEX code instead of RGB:
h1.blue {text-shadow: 3px 3px 0px #3f6ba980;}
The last 2 characters in the above HEX code has opacity set at 50%. For other opacity values, please refer to opacity-hex charts as linked here. Alternatively, if you are using VScode, you will be able to use their in-built color picker to adjust the opacity.
In the page found in below link(bg-button.html), I have put round image as a background using styles. But I find a gray background outside the image area. How can I make the background transparent, Please let me know?
Round image as background
You can add the following style to the button:
background-color: transparent;
Alternatively, use #fff.
You must edit the image in a paint program (like GIMP), add a transparency layer, remove the part you don't like with the eraser and save it as GIF or PNG.
Note that IE 6 doesn't handle PNG transparency without some tricks.
Going off what the above poster said, you can generally get around this without thinking about it by just using shorthand, ala:
div#example { background: transparent url("imgurl.png") no-repeat top left; }