I know this question has been asked previously, just want to know if this is still the case in ios 10 (and ios 9)...
According to the apple developer guidelines for web apps (found here), there are 3 choices for the status bar in a web app; default, black and black-translucent.
Default results in a white status bar with black text,
Black results in a black status bar with white text, and
Black-translucent results in a transparent background with white
text. Additionally, this status bar floats above your content,
meaning you have to push your content down 20px in order to not have
the content overlap with thte status bar text.
I'd really like to use the black-translucent status bar (as I think it looks more native), but the background of my page is a light grey. This makes the white text on this status bar very hard to read.
Put simply, I'd just like a transparent background with black text (essentially, default-translucent). Is this possible?
Unfortunately, No you cannot have black text on a transparent background.
I'm of the opinion that this will be added to the schema at some point and also find it a pain that you can't achieve this example right now. I guess in short the answer is design your faux app natively to achieve greater control of its behaviour and appearance.
Apple Documentation Supported Meta Tags
content="default"
content="black"
content="black-translucent"
I found the solution! We can achieve that with theme-color meta tag.
<meta name="theme-color" content="#fff">
It currently isn't possible. I just wanted to add (after reading a comment) that in order for the changes to show up, at least on my iphone X, you will need to delete the app from your phone then re-add it to the home screen.
Related
Weather.com is the only example I know of that is doing this, showing a dashed red line under misspelled text instead of squiggles. This is on Chrome in Windows 7
What I'd like to replicate
Any ideas on how this is done? Unfortunately going to inspector clears text from the field.
What most sites show
This turns out to not be a style, but rather an effect of a precisely sized text box/precisely tuned line height. The squiggle is 2px tall, but the bottom 1px was cut off, giving it the appearance of a dashed line, but in fact it is not.
This method can be used to replicate the effect shown IF you are using a font where the letters that extend below the baseline don't go so far down that they touch the spellcheck squiggle.
It seems possible to move the squiggle independently of the text, which could possibly present a way to do emulate this style with any font.
If I find a way to do this, I will update further.
This is a browser feature that can be achieved (at least in Webkit/Blink) on input fields and contentEditable elements with spellcheck="true". Not every browser will implement it the same way. For that, you would have to build the text markers yourself in conjunction with a dictionary service (like Google Docs does, as one example).
https://jsfiddle.net/bn7pfyf3/
(change the "true"s to "false"s and you won't see any highlights on focus)
In Webkit/Blink, this is a DocumentMarker type (which is used for Ctrl+F, highlights, typos in input fields, and more). They are not exposed in the DOM or CSS.
https://github.com/crosswalk-project/blink-crosswalk/blob/master/Source/core/dom/DocumentMarker.h
Looking at Sikuli (in conjunction with Selenium) as a possibility for automating the more visual elements of our UI testing, in particular issues that may crop up when the expected branding is not applied.
In my test, I have a white navigation icon image sat on a purple nav bar. I take a screen grab of the white icon sat on it's purple background and that is used as my Pattern in the Sikuli test class. If I then change the CSS in my web app so the nav bar is red, I want the test to fail.
Unfortunately, the background colour change is ignored and the icon is clicked regardless. If I set the pattern's similarity value to 1f (i.e. an exact match), the icon is not clicked. However, it also does not clicked the icon if I change the nav bar colour to the correct purple so it matches the icon screenshot I am using for the pattern.
A "similar" parameter value of anything from 0 to 0.9 lets the test pass once again, regardless of the nav bar colour.
Is this a restriction in the ability of Sikuli or am I missing something?
Edit:
So I found THIS ANSWER to a similar question and it prompted me to check the score returned when trying to match the white icon on red pattern and the white icon on purple pattern to the web page which had the purple branding. The score for both was over 0.9, with the difference from about the second decimal place onward, hence the match of both when I set the "similar" property of the pattern to 0.9.
It prompted me to try increasing the area of the screen shot to include more background relative to the icon size. This resulted in a score of 0.9x for the white on purple pattern and 0.7x for the white on red pattern.
So my conclusion is that the matching does take account of the background colour but if the majority of the screenshot pattern you are using is the same colour, the difference in score is minute.
Can you bypass the background directly behind the icon and look to the side of it? Excuse my lack of coding knowledge just trying to help come up up with a work-around
exists (icon):
if exists(whitebg): #capture a small area with just the color near the icon
pass
if exists(redbg):
fail
i need remove all the yellow dots.
I removed white background in photoshop and save it for web and they are still here, if I set a black background in browser.
the same effect happend if I add new layer in photoshop ...
screen from photoshop
You can do it pretty easily with ImageMagick which is installed on most Linux distros and is also available for OSX and Windows. Just in the Terminal window at the command-line:
convert globe.png -fuzz 10% -fill gray -opaque "rgb(232,235,144)" result.png
That says... "open "globe.png" and find any pixels that are within 10% of rgb(232,235,144) and fill them with mid-grey, saving the result as "result.png"
Of course, you can fill the dots with another colour by changing the word gray to pink or any other rgb() colour you like!
GIF has indexed colors. If you use the classic dialogue save for web. You can manually assign a color to a table indexed color. Like this: http://sklad.bereza.cz/00-jarda/00_screenshot/2016-06-18_174624.jpg
The problem is that the GIF has a limited number of colors and some colors consists from several different colors. By assigning a color to a table you stop composing and is used direct color.
I'm stuck with the menu below. All the website needs to be in HTML.
http://hpics.li/740c57f
WHAT: I want to have an hover image for all the different parts when the mouse go on it. (event/brand/website/print/UI/VIDEO)
PROBLEM: The images are overlapping and the mouseover start when i'm on the transparency of the png.
SOLUTIONS I TRIED: Imagemap to detect the zone and then put javascript code inside the AREA. doesn't work.
Imagemap to detect the zone, put an id in the AREA and use a separated JQUERY with .hover(function(). doesn't work.
Use z-index: impossible because there will be always an image that will hide the one under.
QUESTION: If I can't use ImapeMAP to select my zone and use CSS or JQUERY, how can I do ?
Thank you so much for your help!
Might be too late but the exact case can actually be solved by a class I wrote around 3 months ago. It allows you to check whether you're on a transparent area or not and also check for other elements behind the transparent area, this allows to overlap multiple transparent images and correctly jump from one image to another at the correct point.
http://www.cw-internetdienste.de/pixelselection/
Since now, in the design of one of the websites I work, I've been using a graphic to decorate the header section that consists in a diagonal division white in the lower side and transparent in the upper side. The result is this:
If I change upper color, as the image is transparent in its upper area the effect seems perfect:
Now, I need to allow users to change page background and that's the problem:
Background changes to red, but the image I used to decorate the header doesn't change.
Is there any way to allow users to change the background without ruin the header decoration?
Note that store a copies of the decoration imagen in different colors is not an option due I allow users to choose any 24-bit color. Also, to change the image in real time like explained here isn't an option due multiple users may access the same file.
You could try changing the image in realtime using data URIs: https://developer.mozilla.org/en/data_URIs
With a data URI, you can do something like the following: <img src="data:image/png;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" />. The image can be changed dynamically in JS by generating a new image and setting the src attribute to the new data URI.
You will need to find a suitable format for generating images in JS though. I have used pnglib.js before, and it works, but it might be slower than you'd prefer. You might need to test some different libraries and image formats to see which can be generated quickly. Also, make the image as small as possible - should be only the area with the diagonal split, the area to the right can be done with a div instead.
Alternatively, you could generate a unique image server-side via a script. Make a script that takes a GET parameter for the background color and generates the appropriate image (for PHP, you can use GD or IMagick). Advantage is that the server may generate the image and send it to the client quicker than the client could generate it in JS.
Add the following to the div with the background image:
position: absolute;
top: 0px;
right: 0px;
The problem currently is that the background cannot overlap your div with the background image. Adding the position: absolute gives your div some kind of "ghost box" model, thus allowing the background of the body to overlap it.
P.S.: you can also play with z-index if you want to.