I am trying to figure out the easiest way to disaply a VR180 photo in A-Frame. I have found the examples for setting a 360 image as the sky, but if I set my 180 image, this duplicates the image.
I have tried setting phi-length to 180, and this renders the texture on half of the sphere (from what I can tell), but it has still dupliacted the image, just in this smaller area.
I tried adding black space to the left and right of my left and right images - but this didn't have the desired effects - and I don't really know what I need to be aiming for here in terms of "resizing" the image to be 360 with black behind. I have tried to find a tool that might perform this sort of conversion without luck.
If there is a way for me to either edit the image or change attributes in the a-frame code so the image is displayed once that would be awesome, or I'm open to any suggestion of avenue to follow! Also any pointers would be appreciated - maybe even if I succeed mapping to half a sphere, this will stretch the image or look weird.
The original VR180 image is 8192x4096 pixels.
Related
I've an image like the one in the following link
https://www.freecodecamp.org/news/how-to-center-an-image-using-text-align/
I want to cut and move one half of the image close to the other (one building close to the other in the example image share above). In real case, I have a similar image with white space in between. To cut one part of an image I do Object-> Clip -> Set on the selection. This crops the selection alone. But I am not sure how to select and move the selection.
Could someone please help?
Duplicate the image, then clip both images to the two parts that you need. Then use snapping to move them both together exactly.
Or (better), use a raster graphics editing tool of your choice and do the same. While the above-described workflow works, Inkscape, being a vector graphics editor, is not the appropriate tool for this kind of thing.
How would one include an image on a website that behaves like the twitter users banner image which when you scroll one pixel it scrolls the page 2 pixels, moves the top of the image up one pixel and covers one pixel from the bottom of the image?
I don't know what to call this so I don't know how to search for it.
It is like the image moves up while the content behind it also slowly covers up the image like an extra layer of paper pushed up.
It's a form of parallax scrolling. There are plenty of good tutorials on parallax that I'm sure will help you achieve the effect you desire.
I'm having a problem with the expanded image in Highslide. For some reason, I'm getting some white/gray (#EBF6FF to be exact) background appearing when I bring the mouse close to the image around the outside. Here's a link to a screenshot.
It also does it on the sides (a white box/background appears, jutting out 13 pixels on either side, beginning at the bottom edge of the area shown in the image above), and the bottom, although for the bottom you need to mouseover outside the caption area, along the lower right and left corners of the image. The affected area is 13 pixels beyond the top and sides of the image. I've gone through my CSS and can't find any 13 pixel padding, and also can't find any references to #EBF6FF. Has anybody seen this before?
I've used Highslide in the past with the glossy dark border, but I wanted to switch to a borderless look. I'm not re-using any of the previous HS code (with the glossy border). I started this one from scratch using the latest version (4.1.13). Everything else is working fine, the only problem is with this unwanted background appearing on mouseover. Unfortunately, I'm still developing this on my localhost, so don't have it live to view on the web. But I can provide any code that you may need.
Thanks in advance for any help/suggestions anybody can provide!
Edit: This site isn't finished so I can't upload it yet, but here's a link to a video I took showing the issue.
With most modern browsers is easy to create rounded corners in CSS, so I was wondering if its posible to create a rounded corner that bend outwards or if I still need to fire up PhotoShop for creating such an effect.
The bottom foot in "See tab" from the picture below demonstrates what I am trying to do with CSS:
note: I am unsure if foot is the correct word for this (which have made googling it hard) so if anyone knows the real (or better) term then please let me know and I will update the question accordingly.
Chop that problem up into segments so that the illustration would have a blue shape with one rounded corner on top of a white background, next to the "See" tab, and so on. By picking the colors carefully, and using shapes that you know you can generate, you can establish a pattern that will work with the tools available.
Notice that you do not have to round all corners on a rectangle. You can specify, for example, bottom right.
Reference: http://www.css3.info/preview/rounded-border/
I am trying to implement a fixed background for a website like one over here. Searching around for it told me that I can use background: fixed or background-attachment properties for this.
My problem is the image which will be used as background. I am thinking about following issues:
What should be image size?
how will it repeat when browser window size is very large? for big 27" monitors out there?
Can somebody guide me on these points?
Regards
Vikram
That is not a single background image. Its mostly a bgcolor, except for the side clouds. Using a single large image as a background will dramatically slow down your load time.
There's no specific guideline. You need to make the image as large as necessary to satisfy the requirements of the design. If you want someone with a maximized browser window on a 30-inch display to see a single unbroken non-repeating background image, then yes, you'll need quite a large image. It won't perform well.
The Twitter example is a wide but short image, set to repeat along its x-axis. It's wide at 2247 pixels, but perhaps unnecessarily so: it actually appears to be a fixed pattern that repeats horizontally four times within that 2247 pixel image. Nonetheless, you get the idea: make an image that blends gracefully into itself at its edges for seamless tiling, and/or blends into a fixed background color. Position and repeat it as needed, set the background-color of the page, and you're done.