Hi I can't exactly find a name for it but what I am trying to accomplish is to instert an image and blend it with background using CSS gradient(for example from full white to transparent) to on frames. I used spray in photoshop to better explain. Can someone send me some tutorials or help me find a name for the action I am trying to do so I can find some tutorials? Thank you.
I think best way is make this effect with Photoshop and save as .png with transparent background instead white color of frame. Then you will be able to see background color in your website
There are definitely a few approaches you can take!
What you're looking for is:
"image masking"
There's a great answer here that outlines a few of the approaches.
Note: the question I've linked to has link-rot, but the answer is still good.
Related
I just search and did not find, I think i dont know what exactly this is ?
I know it have gradient but how to make those triangles ? Any helpful
link or code will be appreciated.
I currently doing
background-image:linear-gradient(red,white)
Basically, I was wondering if it were possible to create a detailed gradient type border like the one in the picture, and apply it to a simple box.
I made the preview in photoshop.
I don't believe so at this time. Here is a previous question about Gradient Mesh, which is a feature of Adobe Illustrator that does somethign similar.
I currently have a hexagonal background, but it's all one image. This generally works fine, but I may get in trouble if someone has a huge resolution. I wanted to see if it was possible to scale hexagons according to the size of your display.
Below is an example of what kind of background i'm using.
I know you're able to repeat an image with the CSS3 repeat, but not sure how I can accomplish it with something like this. Anyone have any ideas?
See If this link http://jtauber.github.io/articles/css-hexagon.html could help you do the same. Hope it helps.
http://i.stack.imgur.com/xmtfc.png
I set the same color in photoshop and then in css. In photoshop (left) is just green but in css (right) is green, blue, red, etc...
The color is same (##6a6635). How can I set in css the colors like in photoshop?
thats not a problem it is the same color, just the graphic engine of the browser built it lil bit different from the engine of the photoshop, also u may be interesting read this:
http://usabilitypost.com/2008/07/30/photoshop-color-profiles-for-web-images/
What you are seeing is a kind of sub-pixel antialiasing that allows for sharper, clearer text. You can't disable it, that's how it's supposed to work. You're not supposed to take a screenshot and then scale it up - if you zoom into the webpage, the antialiasing is recalculated accordingly.
To translate your PS colors more accurately to CSS, why not try a tool like Project Parfait that Adobe recently put out? https://projectparfait.adobe.com/ You upload a PSD and can then select elements of your PSD to find its CSS or extract your assets. It's sometimes hard to get the exact color or gradient info in a comp from PS (especially for those of us who don't work in PS every day) and Project Parfait will go and grab that information for you.
I have a div, and I would like to create a background for it in the in the following manner. The top half must be a solid colour, and the bottom half a semi transparent colour?
How do I go about creating this? making it work in all the major browsers? without splitting up the div into two separate ones.
I am being told this cannot be done but there must be some kind of dirty, hackerish way to do it.
Can someone please point me in the correct direction? or suggest some alternatives? all help is greatly appreciated. Thanks.
Use a transparent PNG as the background image. Make it very large but thin so you can tile it.
I am being told this cannot be done but there must be some kind of dirty, hackerish way to do it.
Three words: IE6.
If you can get it to work there, you can get it to work anywhere!
I would suggest writing an on-the-fly image creator that creates just the right transparent image for the page and renders it in such a way that IE6 supports the transparency of the image. You could certainly use almost any language that supports image manipulation or command-line callout to do that, it just won't be fast. Then you could use that generated image to achieve your goals.
That would be a dirty hackerish way to do it.
I also would shower twice with bleach after writing such an abomination. But that's just me.