Add a texture to a gradient background

I have a web mock-up with a gradient background. This is just a rectangle with a gradient fill at the bottom layer. I would like to add a texture to my background. Just some noise or a parchement or something. I don't know how to do it. I would like the texture to have the colour of the background of course and be fairly indistinct.
Could you just give me a few pointers please
Thanks
Martin

Many thanks
That's it.
I think I was trying to approach it in a Photoshoppy kind of way. Strkes me this was a bit easier than how I would have done it in PS.
Anyway, I'm another couple of degrees up that learning curve!
Regards
Martin

Similar Messages

Problem with Gradient Background

When I publish my code for the gradient background and view
it on the web I generate a 15 pixel gap between the stage and the
tab bar on Firefox. So when viewed you see the tab bar, then the
default color for the stage background, and then the gradient stage
background. How do I get rid of the gap?
To view the effect please go to
www.arealtaxcut.com/index000.html --- Here is the code:
I did add the HTML tags <center> </center> to the
.html file.

css call in the body tag: <body margin="0"> worked to
bring the entire document to the left, however there was still the
issue of the spacing at the top. After further research this is
what I came up with and it works like a charm.
<style type="text/css"></style>
Rob Dillion thank you for (1) your quick response and (2) for
pointing me in the right direction. Very helpful.

I Need Help With Gradient Backgrounds

Can someone explain to me why my design appears as if it has an outer glow when I add a gradient background? Thanks in advance.

Sorry, nothing to recognize, I don't see on the pixel "accident" what you mean.
Make the sreen shot with the OS, not with a camera.
Show in detail what your problem is.
Tell us: OS, version, what have you done, file type, etc.
As it is now we can't see anything important.

How do you make a gradient background on a button in flex 4

Hey everyone, this is driving me crazy. Below is my css for a button in file. I want a gradient background on a button in flex 4. I can not for the life of me figure out how to do this. There is no longer the backgroundColors option. chromeColor is only a single color and all the examples I see on the web using fill, and linearGradient throw up errors so I assume these were only in the beta? This is very frustrating to not be able to do a simple thing in flex 4 that worked in flex 3. Any ideas? Thanks.
Button {
cornerRadius: 3;
highlightAlphas: 0.36, 0;
fillAlphas: 1, 1, 1, 1;
paddingLeft: 5;
paddingRight: 5;
backgroundColors: #ff6600, #ff9900, #ffffff, #eeeeee;
color: #ffffff;
disabledColor: black;
textRollOverColor: #000000;
textSelectedColor: #000000;
borderColor: #ff6600;
fontWeight: normal;

This may not be what you're looking for, but since you are stuck, I'll elaborate on what FTQuest was saying. It will only take a few minutes to do this.
In FB4:
1. right-click the button, choose "Create Skin", give it a package (directory) and name (filename), host component "spark.components.Button" and "Create as copy of" "spark.skins.spark.ButtonSkin".
This creates junk.mxml for you, the skin file.
2. In the source of junk.mxml, change layer 1 (shadow) and layer 2 (fill) colors as I did here in this code. Note that where you see {color#}, this is data-binding to a variable I've made in a color.as file that I've included in the skin file. In fact, that is ALL that I changed in the skin file it generated for me.
snippet from colors.as:
public var color1:int = new int(0xA1D190);
snippet from junk.mxml:
<![CDATA[
include "Colors.as";
layer changes in junk.mxml:


<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000" color.down="
{color5}"alpha="
0.01"alpha.down="
0" />
<s:GradientEntry color="0x000000" color.down="
{color6}" alpha="
0.07"alpha.down="
0.5" />
</s:LinearGradient>
</s:fill>
</s:Rect>


<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="{color2}" color.over="
{color3}" color.down="
{color4}" alpha="
0.85" />
<s:GradientEntry color="{color4}" color.over="
{color5}" color.down="
{color6}" alpha="
0.85" />
</s:LinearGradient>
</s:fill>
</s:Rect>
You can (and maybe should) hardcode colors in here to do your gradients. After this, your button will need to use the skin, like:
<s:Button ... skinClass="Skins.junk">
... where "Skins" is the name of the package/directory I told it to create the skin in.
This may not be ideal for you, but it's working for me. Regarding having variables for color values, I posted a thread this morning asking if this is the best way to do things or not, so I don't know if it's the way to go.
Hope this helps ...

Add multiple textures to a collada object

Hi,
I am trying to add textures and materials to a collada object. My problem is, that the collada-type only has one property for textures as a "string".
I need to know whether it is possible to add multiple texture files to a single collada object and - if it is - how to add them.
Thanks and regards,
Marc

Hello Marc,
in the backend the VBI application object has a method GET_INITIAL_ZIP_ARCHIVE. This method returns a Base64 encoded ZIP archive including an XML file and all required resources, e.g. DAE-Files. This ZIP archive needs also to include the Texture with the right path relative to the DAE-Files.
When calling this method you can specify additional resources to be added to the archive via table IT_ADDITIONAL_RESOURCES. This table holds resource entries with a name and the binary content. I checked it and you can just add the path to the name:
- Texture.jpg will be in the root of the ZIP archive
- Image/Texture.jpg will create a sub folder Image and place the texture there
Best regards,
Uwe

How do I add a photo to an animated background?

How do I add a photo to an animated background?

Control+Click or right click on the image in the email and select 'view as icon'. Also make sure you have 'Send Windows-friendly attachments' selected in Mail>Edit>Attachments.

Gradient Background problems

I have Enterprise version 8.1 installed on my machine and I am using it to reverse engineer some Java code. I would like to generate a few graphics in eps format, and I am having serious problems with the size when I export them as svg and translate them to eps. So, I want to turn off some of the background gradients, etc.
When I go to the UML Advanced options and enter the "Set Glocal Colors and Fonts" I can change the "packagelightgradientfill" and "BackgroundColor" to white from the lime green color (for example on a deployment diagram. If i click on OK or apply, I get a message asking if I want to change the other items. After about 10 second, the colors revert back to their normal green values. Is this something wrong with my installation?

Your installation is fine, the capability to change gradient background was not implemented in 8.1. If you try the UML module in NB6.0 (currently in Milestone 9) you will be able to simply turn on/off gradient for all elements, Advanced options -> UML -> Diagrams -> Gradient Background. The gradient start / stop color is still not customizable.

Gradient background not aligned correctly

i have some photo pages and the gradient background is not aligned correctly
- generally below where I want it - like on iweb shows correctly - but on web - it is below the navbar.....
.... how do I control this?
is this something to do with layout? one page is fine - the next is messed up....
this was an import from iweb 2006 - does that matter

crazy enough but I think I found it : I had a 3 word title for the page - and when I replaced the spaces with dashes - the problem went away.....
Is that kooky or what?

JFreeChart Help: Creating a Gradient Background for a CategoryPlot

I need a Gradient Background for my CategoryPlot Object and am having problems figuring out the best approach.
Does anyone have any suggestions on the best way to approach this problem?
Any help would be appreciated.

        BarRenderer barrenderer = (BarRenderer)categoryplot.getRenderer();
        barrenderer.setDrawBarOutline(false);
        GradientPaint gradientpaint = new GradientPaint(0.0F, 0.0F, Color.blue, 0.0F, 0.0F, new Color(0, 0, 64));
        GradientPaint gradientpaint1 = new GradientPaint(0.0F, 0.0F, Color.green, 0.0F, 0.0F, new Color(0, 64, 0));
        barrenderer.setSeriesPaint(0, gradientpaint);
        barrenderer.setSeriesPaint(1, gradientpaint1);

Gradient background of a screen.

Hi all,
If anybody have managed to implement gradient background color of a screen?
There is one example in Developers Knowledge Base how to change the background color of a screen. It is working fine for me but if I use
         int[] X_PTS = { 0, 0, width, width};
         int[] Y_PTS = { 0, height, height, 0 };
         int[] drawColors = { 0x0000CC, 0x0000CC, 0xCC0000, 0xCC0000 };
         try {
             g.drawShadedFilledPath(X_PTS, Y_PTS, null, drawColors, null);
         } catch (IllegalArgumentException iae) {
            System.out.println("Bad arguments.");
instead of g.setBackgroundColor(Blue_color);
does not work for me.
Any idea?
Is there is just one way to rewrite the paint() for fields on top of screen as well?
Thank you for help in advance.

I just saw your post.
I hope by now you might have found an answer... but if someone else stumbles upon, here is the solution:
public void paint(Graphics graphics) {
//Variables for drawing the gradient
int[] X_PTS_MAIN = { 0, Display.getWidth(), Display.getWidth(), 0};
int[] Y_PTS_MAIN = { 0, 0, Display.getHeight(), Display.getHeight()};
int[] drawColors_MAIN = { backgroundColor, backgroundColor, backgroundShadingColor, backgroundShadingColor};
try {
//Draw the gradients
graphics.drawShadedFilledPath(X_PTS_MAIN, Y_PTS_MAIN, null, drawColors_MAIN, null);
} catch (IllegalArgumentException iae) {
System.out.println("Bad arguments.");
super.paint(graphics);
Please marked as solved, if that is what you were after,.

Add simple texture to a shape 3d I have created

Hi,
I have created a shape 3d consisting of 8 hexagons and 6 squares for maths purposes- i use a triangle strip array to create it and it is in its own method. I want to add a texture to it.
I have another method which returns a branchgroup, i try to load a texture and add it to an appearance like so:
          BranchGroup objRoot = new BranchGroup();
Appearance app = new Appearance();
          Color3f black = new Color3f(0.0f, 0.0f, 0.0f);
          Color3f white = new Color3f(1.0f, 1.0f, 1.0f);
          Color3f grey = new Color3f(0.4f, 0.4f, 0.4f);
          TextureLoader tex = new TextureLoader("apimage.jpg", this);
          app.setTexture(tex.getTexture());
          Shape3D myPermute102 = createTriangleStripArray(); //calls my method to create the shape
          myPermute102.setAppearance(app);
          objRoot.addChild(myPermute102);
          return objRoot;
but my shape just comes out grey. However if i do the same with a sphere:
          //Sphere mySphere = new Sphere(1.0f, Sphere.GENERATE_NORMALS | Sphere.GENERATE_TEXTURE_COORDS, 80,app);
          //objRoot.addChild(mySphere);
it works. Is it possible to add a texture to my own shape that i have created with a triangle strip array? How would i go about it?
Any help would be much appreciated.

You can do something like this:
D2=B2*(1+C2/100)
this means in the cell D2 type the following "=B2*(1+C2/100)"... leave out the double quotes

How can I remove the gradient background & border from an ImageIcon?

Problem1: Hey, I have a program that randomly displays a stop sign that I'm supposed to click on as fast as I can. And I created a gif with the stop sign, with it's background transparent. But when I added it to my application using an ImageIcon, whatever's supposed to be transparent in the gif is shown up as a gradient. There's also a border around the ImageIcon. Is there any way to get rid of these? Thanks
Problem 2: I also have a background for my entire application, but it stays the same size no matter if I maximize the application or run it on a different screen size. Is there any way to scale a background (it's animated), to the full screen?
Thanks again! It's for a project due tomorrow. I'm doing final touches.
Here's some of my code. It's really long, so I took out what I think is related. JButton stopSign1 = new JButton();
this.getContentPane().add(stopSign1,null);
         ImageIcon stopSign = new ImageIcon("Dead_End.gif");
         stopSign1.setBounds(new Rectangle(randomX, randomY, 150, 150));
         stopSign1.setIcon(stopSign);
         stopSign1.setVisible(false);

Try stopSign1.setBorder(null);
stopSign1.setOpaque(false);Also, in future, post Swing questions in the Swing forum.

Gradient background is not extending the full height of the page

Hi, I'm an extreme novice with dreamweaver - still figuring it all out. I'm needing to edit a website that was set up by someone else and I can't figure out why the gradient won't extend the full height of the page. It originally was fine but when we added lengthier text this problem popped up. I've fiddled with the css but nothing I'm doing is working - I hope it's something basic as I'd like to get this done asap.
The H1 titles are also centred in their columns despite the css saying 'left align' so this also confuses me - can we get them to be left aligned?
The URL is: www.petrohamman.co.za
Thanks!
Ash

Did this other person leave to take up another career, because the set up is shocking?
Amend your body css to as below:
body {
margin:0;
padding:0;
font-family: Helvetica,arial,sans-serif;
color:#E6A9CC;
You don't need height 125% on your #background css selector so either delete it or comment it out using /*   */ as shown below PLUS add overflow: hidden; as also shown below, that will take care of the gradient issue.
#background
    width:100%;
    /* height:125%;*/
    background: -webkit-linear-gradient(#FFFFFF, #F4DCEB); /* For Safari */
    background: -o-linear-gradient(#FFFFFF, #F4DCEB); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FFFFFF, #F4DCEB); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FFFFFF, #F4DCEB); /* Standard syntax (must be last) */
    overflow: hidden;
Amend text-align: center; which is currently declared in the h1 css selector to text-align: left; OR just delete it completely as the default alignment is already set to left.
h1
    margin:0;
    padding:0;
    color:#E6A9CC;
    text-align: left;
    font-size:30pt;
Importantly delete height: 500px; from the #content css selector or comment it out as shown below using /*   */. This is important as any information in the 'content' container will not scroll if the height is deeper than 500px, which it will be. The general rule is you should never set heights on any container, only in special circumstances where you know what the height will be or you want to show a restricted area such as a scrolling frame.
#content
    width:100%;
    /* height:500px; */

Gradient background color for custom tooltip

Hi,
I have created a custom tooltip where I am using light gray as background color.
(I have created a separate custom tooltip component.)
Now user wants to have it with a gradient effect (is that what its called?).
Basically, this gray color should be more dark at the top region of tooltip.
This color should gradually go lighter from top to bottom.
Can you tell me how this can be done?
Thanks and regards,
Amey

Hi,
Thank you for reply.
Can you please tell me where do I have to set this?
This is how my custom tooltip component looks: -
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
         implements="mx.core.IToolTip" width="{txtBody.width + 20}" height="{txtBody.height + 20}"
         backgroundColor="#E0E5E8"
         cornerRadius="10" horizontalAlign="center" paddingTop="5">
    <mx:Script>
        <![CDATA[
            [Bindable]
            public var bodyText:String;
            // Implement required methods of the IToolTip interface;
            // these methods are not used in this example, though.
            public var _text:String;
            public function get text():String {
                return _text;
            public function set text(value:String):void {
        ]]>
    </mx:Script>
    <mx:Text id="txtBody" htmlText="{bodyText}" textAlign="left" />
</mx:VBox>
And I want background color '#E0E5E8' to be varying in shade from top to bottom

Removing black gradient background in new Revolution theme

I've got a project I'm working on where I want to have my own background image applied to the Revolution theme. However, the black gradient covers up most of my background image. How do I get rid of that? I've looked everywhere for that graphic or that code. Anyone?

I would like to remove the background too, since it creates a black haze over everything. I was able to brighten up the background a bit by dropping a white 853 x 480 .png file into the background. The rotating drop boxes show up better, but still not bright like the theme thumbnails.
The coal dust look seems to be a transparent screen in the foreground. Makes the whole effect morose.
Where you able to find a cure? Usually themes are very customizable. If you come up with a fix please let me know.
Bob

Add a texture to a gradient background

Similar Messages

Maybe you are looking for