Round image as background for input type="submit" - forms

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; }

Related

the best way to handle dark mode logos in html emails

am designing a html email template that supports dark mode for all email clients but am facing a problem with the logo.
The logo is a black .png image and the default/light background is white, so in dark mode it becomes black over black. Adding an outline to the logo is not an option, using 2 images with classes and controlling which one to display using media queries won't work for Gmail ios and some outlook versions, so am left with three choices but am not sure wither they are applicable and supported by all famous clients:
forcing the white background by using a gradient as the background-color value instead of a hex value
using this method that I found online for webpages:
<picture>
<source srcset="dark-mode.png" media="(prefers-color-scheme: dark)">
<img src="light-image.png">
</picture>
using an SVG instead of the image so the fill color will change.
So, are any of them is applicable and supported?
Also, more suggestions/ideas/options are appreciated.

Support for SVG is quite limited so unfortunately that's not an option: https://www.caniemail.com/features/image-svg/
#media prefers-color-scheme: dark is not supported on Gmail/some Outlooks, so that's not going to work. https://www.caniemail.com/features/css-at-media-prefers-color-scheme/
Using a gradient to force unchanging background is not ideal (we should be supporting customer's preferences), and also not 100% cross-compatible. (background-image: linear-gradient(#ffffff,#ffffff);)
If a 1px white stroke is no good for you, you could try a soft glow like Litmus do.
Alternatively, sometimes we just end up putting a single-colour background in the image itself (i.e. getting rid of the transparency), perhaps with rounded corners (a tiny bit of transparency on the corners). Works best for icons, but might be your only option.

Ionic 3: Gradient background

It is easy to change the background color of an Ionic App by setting $background-color in variables.scss, but it wont work with gradients or images. I was surprised that I could not find any official documentation on this, nor a lot of useful questions and answers.
If you set $background-color to a non-color you will currently get a Sass error from one of the many Ionic components that calculate their colors based on the background color.

So here is what I ended up doing, first in src/theme/variables.scss:
$app-background: linear-gradient(to bottom, color($colors, light) 0%, color($colors, dark) 100%);
$background-color: transparent;
$toolbar-background: transparent;
The normal background and toolbar must be transparent to show the gradient underneath. We apply the gradient in src/app/app.scss:
ion-content {
background: $app-background;
}
You may think that ion-content only takes up the space between your header/navbar and footer/tabs, but is actually styled by Ionic to fill the entire screen. So you got your gradient from top to bottom. Success.

Iphone Set background image into text in uitextView?/

I have a uiimageView containing the text like this.
I want to set the image background of the text to look like this instead.
Please help me! Thanks!

You will need to combine an image of the text with the background image (the stuff that is supposed to fill the inside of the text) using compositing. Take a look at the various blend modes you can use, or look into the use of CIFilter.
http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Reference/CGContext/Reference/reference.html#//apple_ref/doc/c_ref/CGBlendMode
https://developer.apple.com/library/mac/#documentation/graphicsimaging/Reference/CoreImageFilterReference/Reference/reference.html
The thing in the background looks like it might be a gradient. Again, you can use a CIFilter to generate that gradient, or you can use Core Graphics. So you'll composite the drawn text with its fill image, then you'll draw that over a gradient.

instead of text in black solid color, make image with transparent text and outer region as the grey gradient you want and put this image over you background image, you will get the desired result.

How can I upload an icon for my app on facebook with out the black grainy borders?

I have a logo and when I upload it to facebook it has a black border around it. I think this is because it has a transparent background and has a shadow. Is there anyway to fix this?

Facebook doesn't support transparent images and coverts everything to a JPG file. Save your file as a JPG (using an appropriate background color) and then try to upload it.

This works perfectly, but it will apply a near all white background to your icon.
In Sketch:
Add a white (#ffffff) background filled layer to your design
Set the Height and Width of the layer to 1023.5
Position the layer on the X and Y at 0.5
This will bypass facebook's transparency limitation, and the space around the image is so small you can't see the border that facebook applies to the image.
Result

Single/sub pixel misalignment of divs on ipad and iphone safari

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