i have images and i want to remove 2 angles of each image.
The removed part should be transparent, and this is the part i couldn't fix.
Here are 2 images the shows what i want to do:
This is an empty image. The white color is the part i want to show. The Blue part is showing the document background gradient color.
This is what should i get at the end. The blue part again, is transparent from document gradient color.
Anyone has idea?
In webkit browsers you can use mask-box-image. Put your image in a div with the image-mask class and then use mask-box-image with a transparent png
.image-mask {
-webkit-mask-box-image: url(your_mask.png);
}
There is an excellent article on the always brillient CSS Tricks website - http://css-tricks.com/webkit-image-wipes/
It's webkit only though I'm afraid.
Some may not like my non-code answer, but you could do it in the image itself? Please don't hate me for suggesting this, but sometimes code doesn't solve all.
Save the image as a PNG.
Make sure the layer you are working on is not the "background" layer, if you are in Photoshop.
Erase/use the marquis tool to delete the part of the image you want to be transparent. You can blur the edges of the marquis tool to make it "fade."
Depending on your settings in Photoshop or other editing program, the "transparent" section should be a checkered grey and white.
Save the image as a PNG and use it instead of the coded mask.
Granted, this doesn't work if you are dynamically loading images or have some other reason you are relying on code to mask your image, but it should work. Early versions of IE have some issues with PNGs, but I've not encountered it with IE9, IE8 or IE7 in my current project.
Related
I have an issue where color is shown differently in FireFox, compared to Chrome and IE. And i have no idea how come.
What would you do in my situation to get the same color displayed in all the browsers?
See http://www.inoplay.dk/
The top v-sign background is another blue (in FireFox), compared to the rest of the header, even though i selected exact same color in photoshop.
I have limited possibilities to edit the theme/template in PrestaShop, so simple CSS solution all i can do.
Any suggestions is greatly appreciated.
There are a few things that affect how these images render against HTML hex color codes.
It could vary whether or not each browser is using hardware acceleration which would affect how colors are rendered
The compression of the JPEG can sometimes cause color shifting
Make sure all your web images are in RGB color space/profile
SUGGESTION: the easiest way to get around this is to create your menu element as .PNG - PNG allows you to have a transparent background. This way you won't need to try to match the blue with code. It will just be transparent.
https://en.wikipedia.org/wiki/Portable_Network_Graphics
Try saving the image in jpg format. i hope it should solve the issue
So I have an developing a basic website and used some images with cool light effects but the change in color hits the edge of the page, this is the image:
So as you can see the light in the image reaches the edge so what I am wanting to know, is there a way to blend the edges in css or html so they look good and not like that? I've looked all over the web and can't find anything really relating to my problem...
Thanks in advance!
There are many ways to accomplish that, but the only good way is to take care of your edges when producing the image. Clear and simple. If your page has a black background, make sure you have an image background of the same color. Then fade your "light effect" into that same color before hitting the edge using your favorite image manipulation program.
I advice against producing an image with a transparent background - your image is large and performance will be slightly smacked.
If you truly want to experiment with fading post-production, you could use CSS gradients to make the image seem to fade off at the edges. Or use (vendor specific) CSS3 toys like box-shadow (see Box shadow on MDN) to produce an inset, black shadow.
Keep in mind though that all these tricks, specially on such huge images as you presented, have their cost in browser performance (and thus user experience) and are not supported widely (specially older browsers). Also, many mobile devices will not thank you for the effects show.
I made a translucent svg. It was a 50% opacity round metal texture. When I put it above any other color it makes it look like real metal. It was made using Illustrator and had 2 of its effects: Pixelate>Mezzotint>GrainyDots and Blur>RadialBlur. Then I made a Clipping Mask. Here is its link https://dl.dropbox.com/u/99185097/metalTex.svg. When I normally open it, it views correctly, but when I use it as a background in CSS3 for my HTML5 page, it doesn't open. I am sure it's not my CSS coding's fault because when I use another very simple svg as my background, it opens. I think it could be the Illustrator effects, maybe they don't view when you use it as a background. Also these effects make it of 4.46mb. Please suggest a solution. Making it a png wouldn't work because sometimes it needs to cover extremely long pages.
Please expand your vector file properly, save and then export it as svg file again and go for background. It may work now.
How do I make the background in an image transparent? Most of my images have a white background. When I use them in my website with my body background color black it looks awkward.
I have unsuccessfully tried using Fireworks magic wand tool to remove the white background. I have also applied the CSS transparent property but it does not work for me either.
What is the best means of making the background color of an image transparent?
What image format you should use
You should use PNG pictures with alpha channel, so called RGBA image.
Save your work as PNG and make sure it is saved with RGBA colors.
Wikipedia.org, Portable Network Graphics
How to, using GIMP (should be similar with photoshop)
Open your picture file with GIMP.
If your picture layer does not contain alpha channel add it by right clicking on layer and selecting "Add Alpha Channel".
Use "Fuzzy Select", "Select By Color" or "Scissors Select" tool to select backround area.
Hit delete.
Save results as PNG format with RGBA colors.
It should look something like this after you're done with it:
Few notes
Play around with mentioned selection tools to learn which one to use in which situation.
Also pay attention to tool settings especially with fuzzy and color selection tools.
If your picture contains blurred transitions between subject and backround, you should try to make them so with final picture too. You could use
You'll want to alter the actual image to make it transparent -- sounds like it might not be? Often images themselves have white backgrounds, so laying these on top of anything might look odd. You can take the image and remove the white in it and save it as a transparent image, then try again.
Use photoshop to remove the background and save it as .png
remove it like this: http://www.addictivetips.com/windows-tips/how-to-remove-image-background-in-photoshop-tutorial/
or using magic eraser.
good luck!
You can do it in photoshop with background eraser tool
If you don't have Photoshop - the easiest way to do it is with MS Word (2010).
Change a background of your page to black (Page Layout --> Page Color --> Set to the color of your website)
Insert --> Picture
Once your have inserted pickture, go to Picture Tools and find Background Removal tool under Picture Tools.
Select area you want to remove and click "Remove" and then "Done"
use photoshop , select unwanted portion of image and then save it as png, But it'll may not work in IE, Use PNG Fix More details http://jquery.andreaseberhard.de/pngFix/
To remove the background of the images, you can use This Website. It is very easy.
Steps:
Go to the link
Select the photo or enter the URL
Download the image.
Say I have a very simple html page, containing a single line of text. I'm looking for a tool that would take that line of text, and superimpose it on a transparent PNG background. That logic would be applied to ALL elements on the page: if no background is specified, and the background of parent elements doesn't leak through, then a background should render as transparent.
As in transparent-pixel-in-image tranparent.
Is there a tool for this?
There are various command line tools for this sort of thing, most of which depend on WebKit somehow, eg. webkit2png, the hard part is going to be making the background transparent. Every screenshot tool I've ever tried sets the background opaque, even if the CSS background colour is transparent. The best approach might be to set the background to some unusual colour by default and then use a tool like ImageMagick to set that particular colour transparent.