I am doing a simple animation in unity and I wanted to add portal efecct using shadergraph 8.2.0 and everything renders black
like this
shader setings
I have no clue whatsoever what it is
I'm still learning the pipeline, however, I would think you need to scale up the texture on the top left, I can't read its name from the image. But you are getting the red/yellow mix, getting the swirl, but the area that's being blacked out is comparable to the texture I mentioned. Sorry I don't know how to put it exactly, but the white to grey to black gradient is not large enough so you are rendering the center fine just need to expand the white-grey area, I think scaling the texture up would produce the effect you want.
I have created a blur effect in Flutter on the bottom tool bar of a scroll list. For this I used BackdropFilter with ImageFilter.blur().
The effect looks nice but I don't like the hard edge between the blurred and non-blurred area. I'd like a gradual transition between sharp and blurred.
I noticed that on the bottom of the screen this effect is somehow already there, you can read the number (see picture below, iPhone 11 sim). Seems to be some bug.
I've tried lots of stuff, anyone any idea on how to create this effect on the top edge?
I recently came across a problem I can't solve which involves not being able to draw my sprites properly. I have tried a lot of different things and couldn't find any solution.
Here is how the image should look like in unity:
And here is how it actually looks like:
If someone could tell me how to fix this, I would be very grateful.
Presumably the top image is a screenshot of your image manipulation program, many of which use the chequerboard pattern to mean transparency. As such, the image you have exported is a gradient going from almost solid white at the bottom to transparent at the top. This is why the image appears as such in Unity.
Also, if you're wondering why the image appears as though it has bands of different colours, this is due to a problem called colour banding. This can be fixed by using a technique called Dither (which adds some noise to the image), but how you do so will depend on which image manipulation program you are using.
i am trying to place several elements with gtkoverlay: 3 images and 3 labels, they should overlap. everything works pretty fine, i can place them nicely but the transparency is not used, i've tried svg and png for the images and the labels print with the bounding box in white. anyone could help me to understand what is happening or guide me to force the reading of the transparency channel?
maybe
GTKOVERLAY_background_disable (true)...
if it exist
I've got the following situation, and I need some help...
Two divs, same size, same location, one on top of the other
Everything works as expected on desktop browsers
On the iphone/ipad a faint line appears around the border of the divs
This faint line is not always on all four borders. It changes depending on the location of the divs. It looks to be happening as a result of the two divs not lining up properly, but according to their style settings, they are of identical size and location.
You can see the results here: http://www.thoughtartistry.com
Any ideas?
I had a similar problem in a recent project where I had background image masks with different background color to colorize the resulting icons in mobile Safari. The problem was that when the page was scaled down by Safari, there was a line of the background color showing around the image, even though it should have been masked. I never found a way to prevent that leaking of the background color when the page is scaled down. It's clearly an error in mobile Safari's algorithms that recalculate the background and mask. I did find a workaround: I put an outline on the element with the same color as the background of the element's parent. The outline is outside the element and therefore masks the part bleeding out. If your element's parent has a pattern background that's drastic, this won't work that well, but if it's a solid color, it'll do just fine.
A negative margin is the only way I found to prevent this.
For example, if you have a faint horizontal gap between 2 divs, adding a top margin of -1px to the second div will make it overlap slightly and the gap will not reappear as the page is scaled.
Some situations (like image sprites or repeat patterns) may need a little more tweaking, but the general idea is the same. For a sprite, make sure there is no big color change within 1 pixel of the cropping border. The bleed is never more than 1 pixel, so a 1 pixel adjustment is enough.
The problem is not only with divs matching together, but also with image sprites.
I followed the advise in this thread of setting initial viewport scale to 1.0. The sub-pixel bug was gone, but then I tested my website on other devices, like Android, and realized a full size page is annoying, since users have to re-scale every time it's loaded. So I preferred to disable the scale and wait until Apple fixes it. Then one day I was thinking how to solve the problem with the margins of the page, and I came to this simple solution in CSS:
html {
min-width: 1024px;
}
Devices capable of this resolution, such as iPad in horizontal position, will set the document scale to 1.0. In my case this is enough solution, since I can show the page is working just right, and the sub-pixel bug is in Safari/iOS, which will be solved in the future hopefully.
It totally depends on one's situation, but in our case we use negative margins as proposed by this thread or a box shadow since outline only applies to all borders and ie. outline-bottom does not exist.
/*
* Prevent faint lines between elements.
* #link http://stackoverflow.com/questions/5832869
*/
box-shadow: 0 1px 0 red;
I also solved the iOS sub pixel gap issue (on a full screen site) by using overflow-x: hidden; to stop side ways scrolling & viewpoint scale to stop pitch zooming. I also had holder divs set at width: 101%; and all the elements/image divs inside set to float: left;. This means the sub pixel gaps are all on the left hand site but pushed out of view by the holder div set at 101% width.
Remove "clear:both" (if there is) from div below the gap.
I also had to solve this. If you are using Div's to define sections only then.
//background.css
.background-color {
background-color: blue;
}
.background-color div {
background-color: inherit;
}
I'd try playing with meta/viewport options, specifically setting initial scale to 1.0 and disabling user zooming.
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html