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.
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
If creating a web graphic that's meant to be used in many places and overlaid on top of other elements, is it possible for the graphic to composite with whatever's beneath it -- like setting a Photoshop layer to be "Difference" -- such that its colors invert?
Specifically, picture a "Left" and "Right" image arrow that could be placed on top of an image carousel. Many images could appear beneath it and, if the arrows are lightly colored on a lightly colored image, they may be difficult to see. As such, an image whose color is the difference of what's behind it would turn dark on a light background.
I'm picturing doing this with an SVG, potentially, but if it could be accomplished with a png or other bitmap of sorts, that'd be neat too.
If you're on bleeding edge browsers you have the option of using CSS blend modes, see this tutorial.
For more details, see the specification, which covers html, svg and css.
yes it can, but the support is really poor if you want a CSS only solution. You had the inverse filter on IE versions and now you have Webkit support, but that's about it. However, you can use JQuery Invert plugin by Paul Irish. It does exactly what you want, and obviously has better support than CSS
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.
I am coding a WordPress theme from a design that has been provided to me. Each post (in the design) is on a background that looks like a piece of paper:
The issue is that (of course) I don't know how long each blog post will be. I want to slice and dice the image in such a way that it will repeat to fill the blog post div as needed, while still maintaining the look it was designed to have (including the rough edges with transparency, etc.)
I've considered several different ways of accomplishing this, like creating a top, kludged-repeatable middle, and bottom, but everything I've tried is pretty clunky and requires large (filesize) images.
I'm asking here in case there is some technique I should be using but don't know about. I'm having a hard time explaining to Google what I'm looking for, so I'd be grateful for even hints on what keywords to search for.
Might want to consider border images (though apparently no support from IE)
Nowadays, you can have multiple background images and/or gradients. (IE9 does support, but gradient support is all over the place in most browsers; you'd probably have to find a gradient generator like http://www.colorzilla.com/gradient-editor/ or use css3pie http://css3pie.com/demos/gradient-patterns/ (or both) Don't forget, because you can have multiple background images, you could create some effect with alpha transparency on your images as well.
You can't. There are two options for faking it.
Create a really long (large) image and assume that no post will go over a certain length.
Create a top and bottom image "cap" and repeat in the middle. You can make the repeating image large enough that it looks kind of random, but it really isn't.
The real solution is to go back to the designer and tell them this just isn't possible. A real-world solution would be to create a background image that fades to some solid color. That way you can define the background like background: #000 url('your-image.png') no-repeat center top; and have the image fade to black (or brown as indicated by your screenshot).
The designer I'm working with has given me a monster of an implementation issue...
Page background is grey, and atop of it is a crumpled paper texture (non-repeating with painted design elements) for the first 600 pixels (by 1400 pixels across; currently centered as a non-repeating background). At the bottom is another div with more text on it -- with a dropshadow, complex line pattern for the background and ripped edges, hovered slightly above the top div.
Saving the top part as a JPG and the bottom part as a transparent PNG leads to filesizes of +1mb.
Saving the top part as a JPG and the bottom part as a JPG doesn't work very well due to the drop shadow. It would technically work to save the bottom part as a slice with elements of the top part underneath the dropshadow, but it would have to line up pixel-perfect always or else look crappy. And at that point, I might as well save the whole site as one big image...
If the bottom part had a solid colour for the background, I could set each edge to have a different transparent PNG. However, the line pattern on the bottom part means that this wouldn't work.
My question is ultimately:
How the heck do people do ripped edges these days without making their site one big image?
Thanks!
Screengrab:
CSS3 does provide a border-image property, which should be able to help you with the ripped border effect (although even then, it would help if it was a repeating image).
See here for the W3 specification.
However it may not be much use to you, because browser support for this feature isn't great -- IE doesn't support it at all (not even IE9), and while most other browsers do support it, they all currently have gaps in their support and require a vendor prefix in the CSS property.
See CanIUse.com for a full browser support table for it.
To be honest, I think you should just go back to your designer and ask him to make it easier to work with -- he's probably just created something he thinks looks good, but is unaware of the limitations of the design he's put together; if you explain the issue to him, he may well be able to produce something a bit more usable for you.
There's really not a whole lot you can do here.
Page edges are ideally seamlessly repeated via repeat-y, and in your case it looks like the texture is one big image. You're either going to have to settle for sub-par performance or present the designer with your issues.
Check the archive of this blog for a good example.
You either have to fix the background images and use the entire image (or the top image AND the bottom image) and make the background non-scrolling. OR you have to get him to design a pattern that can repeat and then use a smaller PNG.
Clearly, your designer has a print background....
Ok, there's ways that will most likely theoretically work. But theoretical isn't always practical. I suspect your desire is to have cross-browser capability, as all of us should. So, start by throwing most new CSS3 tricks out, thanks to legacy IE. Forget box-shadow, forget crazy png tranparencies without hacks, etc.
What you're left with is doing a gigantic .jpg background. That will load....eventually.....
In this case, you can see the storm on the horizon, so run for cover. Go back to the designer, explain why this is about as smart an idea as texture layered over gradients, and help them understand why our buddies at Microsoft have made this virtually impossible. Just like a fully-flashed out site, it can be done somehow....but it's probably not the best use of time and resources. The web isn't print, it's dynamic...and when you put something "on a page" it's not going to stay put as it would in Illustrator, nor can you guarantee that your user is going it experience it in 100# glossy with a metallic overlay. Yes, I was a designer before I was a developer.....
Sound like a cop-out? Maybe it is. But I've been in your shoes, building sites for credit cards. My team was forced to waste thousands of dollars of the bank's money trying to make sites work with designs that probably shouldn't have been done on the web, thanks to print designers doing double-duty, getting designs approved prior to talking to the tech team....after, of course, we presented management with the options. Ultimately, it got the boss fired for going over budget.
although this is untypical, I would recommend cutting a big square shaped hole in the center of the image so that you're only left with the edges themselves and a transparent center and saving to PNG. Then saving the center part itself as a jpeg and putting the jpeg directly on top of the PNG in the correct position.
This way, the majority of the very large PNG will contain very little data and be a very small file size. The rest of the data would then, obviously, be jpeg and therefore smaller.