Alpha/semi-transparent floating panel
Is it possible to have a alpha/semi-transparent floating panel, for example in Unreal 2004 when u access the console a semi-transparent console appears.
Hello,
Yes it is possible; try the following code in your container...
public void doLayout()
super.doLayout();
// use some reference to where you want the panel to float
floatablePanel.setBounds(........);
} // end doLayout... and the following in your floatablePanel...
public void paint(Graphics g)
Graphics2D g2 = (Graphics2D) g.create();
g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP, 0.2f));
super.paint(g2);
g2.dispose();
} // end paintHope it gives you ideas.
Warm regards,
Darren
Similar Messages
-
Having a JPanel 'float' semi-transparently over another component
I am a programmer of a java project for our company.
Managemnt decided that when a certain event happens, we need to 'semi-disable' a certain text area (in a JScrollPane), and have a floating message with a progress bar on top of this text area, but be semi-transparent, so you can still read the text under it.
(Basically, they want it to look like a html page with a floating, semi-transparent DIV, because that is how another group mocked it up).
I am trying to implement this, but am running into problems.
Here is what I have, below I'll tell you what is wrong with it.
* The purpose of this class is to have a scroll pane that can have it's contents partially covered by another panel
* while still being able to read both the original panel and the new covering content, and still being able to scroll
*the content under the covering panel.
public class JOverlayScrollPane extends JScrollPane{
private JPanel overlay = null;
private Insets overlayInsets = null;
private java.awt.AlphaComposite blend = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.50f);
private ComponentAdapter cl = null;
public void setOverlay(JPanel pan, Insets inset){
overlay = pan;
overlayInsets = inset;
if(cl != null){
cl = new ComponentAdapter(){
public void componentResized(ComponentEvent e){
resizeOverlay();
resizeOverlay();
repaint();
public void paint(Graphics g){
super.paint(g);
if(g instanceof Graphics2D && overlay !=null){
Graphics2D g2 = (Graphics2D)g;
// g2.setComposite(blend);
//overlay.paint(g2);
paintStuff(g,overlay);
private void resizeOverlay(){
if(overlay != null){
Dimension size = getSize();
int x = 0;
int y = 0;
if(overlayInsets !=null){
x = overlayInsets.left;
y = overlayInsets.top;
size.width = size.width - overlayInsets.left - overlayInsets.right;
size.height = size.height - overlayInsets.top - overlayInsets.bottom;
overlay.reshape(x,y, size.width, size.height);
overlay.doLayout();
overlay.validate();
private void paintStuff(Graphics g,Component c){
if(c != null){
c.paint(g);
if(c instanceof Container){
Container cont = (Container)c;
for(int i=0;i<cont.getComponentCount();i++){
Component cc = cont.getComponent(i);
paintStuff(g,cc);
}//end of overlay scroll pane(I am having problems, so for now, the alpha blend is commented out).
The first version didn't have the paintStuff() method (it just called paint). This just drew a big grey box, now of the sub-components of the passed in JPanel were drawing. I added the do layout and validate calls, without success.
Then I added the paintStuff call, and all the subcomponents now, draw, but they all draw at 0,0.
Questions
1. Is the the correct approach to do this, or sould I be playing with the glass pane or some other approach?
2. It seems that the overlay panel isn't being layed out / doens't paint it's children correctly. Is this because it isn't really part of the layout (i.e. it has no parent / is never added to a container) or am I just missing a step in 'faking' adding it to a layout?
3. I'm sure I could just override paint and paint my own stuff (hand draw the text and a progress bar), but I would really like to put everything on one JPanel as what we want to display my be different in the future. I know that I manually ahve to call repaint on this scrollpane if one of the components on the overlay JPanel change in appearence (the progress bar especailly), and that they won't get events (I don't care about this as they are all non-interactive for now). Is this a viable approach, or is there a better way to do this?
ThanksWow, good answer.
I never concidered using a root pane other than as it is used in JFrame.
Very cool answer.
Here is my origional code modifed with JN_'s idea, which cleaned up a repaint issue I was having.
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class TransparentPanel extends JFrame implements ActionListener
ProgressPanel progressPanel;
int progressCount;
public TransparentPanel()
super( "TransparentPanel Test");
setDefaultCloseOperation( EXIT_ON_CLOSE );
JPanel panel = new JPanel( new BorderLayout() );
JTextArea area = new JTextArea( 20, 40 );
JRootPane pane = new JRootPane();
pane.setContentPane( new JScrollPane( area ) );
panel.add( pane, BorderLayout.CENTER );
//panel.add( new JScrollPane( area ), BorderLayout.CENTER );
progressPanel = new ProgressPanel();
pane.setGlassPane( progressPanel );
JPanel buttonPanel = new JPanel( new FlowLayout());
JButton button = new JButton( "Show" );
button.setActionCommand("SHOW");
button.addActionListener( this );
buttonPanel.add( button );
button = new JButton( "Hide" );
button.setActionCommand("HIDE");
button.addActionListener( this );
buttonPanel.add( button );
panel.add( buttonPanel, BorderLayout.SOUTH);
setContentPane( panel );
pack();
setLocationRelativeTo( null );
setVisible( true );
public static void main( String[] args )
try
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
catch( Exception e )
e.printStackTrace();
new TransparentPanel();
public class ProgressPanel extends JPanel
Color bg = new Color( 225, 221, 221, 100 );
Color fg = new Color( 170, 234, 202, 100 );
int progress;
setOpaque( false );
public void setProgress( int n )
setVisible( n > 0 && n <= 100 );
progress = n;
repaint();
public void paint( Graphics g )
if( isVisible() )
Rectangle bounds = getBounds();
g.setColor( bg );
g.fillRect( bounds.x, bounds.y, bounds.width, bounds.height );
g.setColor( fg );
int width = (int)(((double)progress/100)*bounds.width);
int height = (int) (((double)bounds.height)*.1);
int y = (int) (((double)bounds.height)*.4);
g.fillRect( bounds.x,y,width,height);
* Invoked when an action occurs.
public void actionPerformed(ActionEvent e)
String cmd = e.getActionCommand();
if(cmd.equals( "SHOW" ) )
progressCount+= 10;
if( progressCount > 100 )
progressCount = -1;
else if( cmd.equals("HIDE" ) )
progressCount = -1;
progressPanel.setProgress( progressCount );
} -
Scrolling semi-transparent panels
I have a parent panel that paints a custom background. Within that panel, I embed another panel held by a JScrollPane. My intent is to have the custom background show through on the panel that is being scrolled.
To accomplish this, I set both the scrollpane and the viewport to non-opaque and then I set the panel held by the scrollpane to non-opaque as well.
When I run the program everything works fine and the panel can be scrolled and displayes the background image just as I want it.
Next, I want to set the panel in the scrollpane to be semi-transparent. I set the panel to opaque and give it a semi-transparent background color(ie alpha value or .5). This gives me a see-through effect and when I run the program it initially looks good. However, when I scroll the panel, the refresh is not handled correctly. The problem appears to be that the paint method of the parent panel is not being called.
I think the scrollbar code incorrectly assumes that since the embedded panel is defined as opaque that the parent panels do not need to be painted. However, this assumption is only valid if the background color of the embedded panel has an alpha value of 1.0
Does anyone have a workaround for scrolling semi-transparent panels?On second thought, that's going to cause a stack overflow. You are going to need a flag to not call it. Something like so:public void paint(Graphics g) {
if (someflag) {
someflag=false;
bgPanel.paint(bgPanel.getGraphics());
someflag=true;
// do my painting stuff ... super.paint(g); ???
}Just a thought, I haven't tested it. -
Is there a way to create a semi-transparency with Java?
I would like to be able to create a semi transparent form and I was does anyone know how to do this?
import java.awt.*;
import java.awt.geom.*;
import java.awt.image.*;
import java.io.*;
import java.net.*;
import javax.imageio.*;
import javax.swing.*;
import javax.swing.event.*;
public class CompositeTest extends JPanel {
private BufferedImage backImage, frontImage;
private float alpha = 1;
public CompositeTest() throws IOException {
backImage = ImageIO.read(new URL("http://today.java.net/jag/bio/JagHeadshot-small.jpg"));
frontImage = ImageIO.read(new URL("http://today.java.net/jag/Image54-small.jpeg"));
public Dimension getPreferredSize() {
return new Dimension(backImage.getWidth(), backImage.getHeight());
public void setAlpha(float alpha) {
this.alpha = alpha;
repaint();
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
int x = (getWidth() - backImage.getWidth())/2;
int y = (getHeight()- backImage.getHeight())/2;
g2.drawRenderedImage(backImage, AffineTransform.getTranslateInstance(x, y));
Composite old = g2.getComposite();
g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, alpha));
x = (getWidth() - frontImage.getWidth())/2;
y = (getHeight()- frontImage.getHeight())/2;
g2.drawRenderedImage(frontImage, AffineTransform.getTranslateInstance(x, y));
g2.setComposite(old);
public static void main(String[] args) throws IOException {
final CompositeTest app = new CompositeTest();
JSlider slider = new JSlider();
slider.addChangeListener(new ChangeListener(){
public void stateChanged(ChangeEvent e) {
JSlider source = (JSlider) e.getSource();
app.setAlpha(source.getValue()/100f);
slider.setValue(100);
JFrame f = new JFrame("CompositeTest");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container cp = f.getContentPane();
cp.add(app);
cp.add(slider, BorderLayout.SOUTH);
f.pack();
f.setLocationRelativeTo(null);
f.setVisible(true);
} -
An Image JPanel, A semi-transparent JPanel, and non-opaque components
This is a more intelligent re-asking of the question I posed here: http://forum.java.sun.com/thread.jspa?threadID=579298&tstart=50.
I have a class called ImagePane, which is basically a JPanel with an image background. The code is much like the ImagePanel posted by camickr, discussed in this topic: http://forum.java.sun.com/thread.jspa?forumID=57&threadID=316074 (except mine only draws the image, it does not tile or scale it).
On top of my ImagePane, I can place another component, TransparentContainer. This again extends JPanel, only a color is specified in the constructor, and it is drawn at about 70% opacity. This component is meant to help increase the readability of text components that blend with the background image, without blocking out the background image completely.
This works very well, until I need to add a component, like, say, a non-opaque JRadioButton in a ButtonGroup. When you select a new JRadioButton at runtime, the semi-transparent JPanel fills with a combination of a completely opaque color (the one specifies to the TransparentContainer) and garbage from the non-opaque component being redrawn.
I have noticed that the UI is restored to being non-messed up if you place another application window on top of it and then move it. So apparently, one solution is to redraw the entire UI, or just the part that has the JRadioButton on it, every time the radio button is clicked. However, this seems unnecessarily complicated. It seems to me that I am missing something in my TransparentContainer's paintComponent() method. Does anyone have any ideas?
Here is my TransparentContainer code, if it will help:
import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import javax.swing.JPanel;
public final class TransparentContainer extends JPanel
/* Private Fields: For use only by this class.
* These fields hold information needed by more
* than one method of this class.
private boolean fullTransparencyEnabled;
private Color baseColor;
private Color outerBorderColor;
private Color innerBorderColor;
private int obw;
private int ibw;
private int cbw;
/* -- START OF METHODS -- */
/* public TransparentContainer(Color color, boolean fullTrans)
* Initiallizes the transparent container object
* with 'color' as its base color.
public TransparentContainer(Color color, boolean fullTrans)
fullTransparencyEnabled = fullTrans;
baseColor = color;
Color borders[] = findBorderColors();
outerBorderColor = borders[0];
innerBorderColor = borders[1];
obw = 3;
ibw = 1;
cbw = obw + ibw;
/* private Color[] findBorderColors(Color base)
* Calculates the colors for the outer and inner
* borders of the object based on the base color.
private Color[] findBorderColors()
Color borders[] = new Color[2];
int colorData[] = new int[9];
colorData[0] = getBaseColor().getRed();
colorData[1] = getBaseColor().getGreen();
colorData[2] = getBaseColor().getBlue();
colorData[3] = colorData[0] - 50; // outerBorder red
colorData[4] = colorData[1] - 45; // outerBorder green
colorData[5] = colorData[2] - 35; // outerBorder blue
colorData[6] = colorData[0] + 30; // innerBorder red
colorData[7] = colorData[1] + 30; // innerBorder green
colorData[8] = colorData[2] + 20; // innerBorder blue
/* Make sure the new color data is not out of bounds: */
for (int i = 3; i < colorData.length; i++)
if (colorData[i] > 255)
colorData[i] = 255;
else if (colorData[i] < 0)
colorData[i] = 0;
borders[0] = new Color(colorData[3], colorData[4], colorData[5]);
borders[1] = new Color(colorData[6], colorData[7], colorData[8]);
return borders;
/* public Color getBaseColor()
* Returns the baseColor of this object.
public Color getBaseColor()
return baseColor;
/* public Color getOuterColor()
* Returns the outerBorderColor of this object.
public Color getOuterColor()
return outerBorderColor;
/* public Color getInnerColor()
* Returns the innerBorderColor of this object.
public Color getInnerColor()
return innerBorderColor;
/* public boolean getFullTransEnabled()
* Returns whether or not this object will render
* with all of its transparency effects.
public boolean getFullTransEnabled()
return fullTransparencyEnabled;
/* protected void paintComponent(Graphics g)
* Paints the component with the borders and colors
* that were set up in above methods.
protected void paintComponent(Graphics g)
Graphics2D g2d = (Graphics2D) g;
AlphaComposite alphaComp;
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHint(RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDER_QUALITY);
g2d.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION,
RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
g2d.setColor(getBaseColor());
/* Draw the main body of the component */
if (getFullTransEnabled())
alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.6f);
g2d.setComposite(alphaComp);
else
alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1.0f);
g2d.setComposite(alphaComp);
g2d.fillRect(cbw, cbw, super.getWidth() - 2 * cbw, super.getHeight() - 2 * cbw);
alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.6f);
g2d.setComposite(alphaComp);
/* Draw the inner border: */
g2d.setColor(getInnerColor());
g2d.fillRect(obw, obw, ibw, super.getHeight() - obw * 2); // left border
g2d.fillRect(obw, obw, super.getWidth() - obw, ibw); // top border
g2d.fillRect(super.getWidth() - cbw, obw, ibw, super.getHeight() - obw * 2); // right border
g2d.fillRect(obw, super.getHeight() - cbw, super.getWidth() - obw * 2, ibw); // bottom border
/* Draw the outer border: */
g2d.setColor(getOuterColor());
g2d.fillRect(0, 0, obw, super.getHeight()); // left border
g2d.fillRect(0, 0, super.getWidth() + obw, obw); // top border
g2d.fillRect(super.getWidth() - obw, 0, obw, super.getHeight()); // right border
g2d.fillRect(0, super.getHeight() - obw, super.getWidth(), obw); // bottom border
alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1.0f);
g2d.setComposite(alphaComp);
g2d.dispose();
}I added the main method to your TransparentContainer class ...
public static void main(String[] args) {
JFrame f = new JFrame("test transparent container");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
TransparentContainer tc = new TransparentContainer(Color.RED, true);
JLabel label = new JLabel("Hello, World!");
tc.add(label);
f.getContentPane().add(tc);
f.setSize(800, 600);
f.setVisible(true);
}...using the code you posted the label was not shown. I modified your paintComponent(Graphics g) method and I did this (see the areas in bold):
/* protected void paintComponent(Graphics g)
* Paints the component with the borders and colors
* that were set up in above methods.
protected void paintComponent(Graphics g)
// Call super so components added to this panel are visible
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
AlphaComposite alphaComp;
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHint(RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDER_QUALITY);
g2d.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION,
RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
g2d.setColor(getBaseColor());
/* Draw the main body of the component */
if (getFullTransEnabled())
alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.6f);
g2d.setComposite(alphaComp);
else
alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1.0f);
g2d.setComposite(alphaComp);
g2d.fillRect(cbw, cbw, super.getWidth() - 2 * cbw, super.getHeight() - 2 * cbw);
alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.6f);
g2d.setComposite(alphaComp);
/* Draw the inner border: */
g2d.setColor(getInnerColor());
g2d.fillRect(obw, obw, ibw, super.getHeight() - obw * 2); // left border
g2d.fillRect(obw, obw, super.getWidth() - obw, ibw); // top border
g2d.fillRect(super.getWidth() - cbw, obw, ibw, super.getHeight() - obw * 2); // right border
g2d.fillRect(obw, super.getHeight() - cbw, super.getWidth() - obw * 2, ibw); // bottom border
/* Draw the outer border: */
g2d.setColor(getOuterColor());
g2d.fillRect(0, 0, obw, super.getHeight()); // left border
g2d.fillRect(0, 0, super.getWidth() + obw, obw); // top border
g2d.fillRect(super.getWidth() - obw, 0, obw, super.getHeight()); // right border
g2d.fillRect(0, super.getHeight() - obw, super.getWidth(), obw); // bottom border
alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1.0f);
g2d.setComposite(alphaComp);
// Do not dispose the graphics
// g2d.dispose();
}...seems to work fine now. Perhaps you should also add methods or additional constructors so the user can easily change the transparency level...and add some javadoc comments to your constructors ...at a first glance I did not know what fullTrans was
public TransparentContainer(Color color, boolean fullTrans)good luck!! -
Semi-transparent block, pure black and rich black problems
Hi!
I'm new to inDesign, and I'm currently designing a book cover, for which I need some special effects. I'll try to explain as best as I can.
The background is rich black, on top of it I have a text in white (all over it). I applied a block with 80% opacity, in rich black color. I cut out some shapes in it. The point was to have the text in dark gray all over the book cover, but in white in the places where I have the shapes.
Everything is working exactly like I want, but a friend of mine told me if I apply rich black over white, I'll get a kind of magenta gray, so I have to apply pure 100 K to avoid that and get the dark gray I want. I tried that, and of course, applying some pure black block on top of my rich black cover gives all the cover a "grayish black" look. How can I work around that? I tried setting my semi-transparent block to "darken", but it didn't change anything.
I put the links to the pdf, I hope that's ok.
That's the one with rich black: https://dl.dropboxusercontent.com/u/68049919/coverlayout_print_richblack.pdf
and that's how it looks with the pure black: https://dl.dropboxusercontent.com/u/68049919/coverlayout_print.pdf
Thanks a lot!There's no need to use transparency to create your background text color—just make a text frame filled with the rich black then select the type and fill it with an 80% tint of the rich black swatch or any other gray mix. Like this:
The text frame selected with its fill showing in the Colors panel:
Here the text is selected and the Colors panel shows the text fill as an 80% tint of the rich black. There's no transparency in this case.
In general it's bad practice to use transparency when you can get the same effect with color fills.
Also if you are worried about the neutrality of the gray check with your printer on whether the gray text should be 4-color (your 80% tint) or straight black (95% black).
The accuracy of the InDesign softproof depends on an accurate monitor profile and the assigned CMYK profile (Edit>Assign Profiles...). The assigned CMYK profile affects the preview including the profiled gray balance. For example the default SWOP CMYK profile previews your 4-color dark gray bluer and as a lighter value than US Sheetfed.
The preview of your 85% rich black mix with different CMYK asignments -
Semi-transparent JToolBar = strange behaviour?
I need to have semi-transparent toolbar in the application I am making. I am using toolbar.setBackground(new Color(0, 0, 0, 50)); to do so.
At start the icon looks like this:
[Screenshot1|http://i29.tinypic.com/j66cky.jpg]
After a few mouse transition, the transparent part of png icon becomes totally black:
[Screenshot2|http://i26.tinypic.com/dmwjo9.jpg]
I�ve tried using JButton (with ActionListener), instead of JLabel component, but the behaviour remains the same.
Here�s the test code:
package toolbartest;
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class MainFrame extends JFrame {
private MainFrame(String title) {
setSize(new Dimension(800, 600));
setTitle(title);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
JToolBar toolbar = new JToolBar();
toolbar.setBackground(new Color(0, 0, 0, 50)); // <-- when remove this
toolbar.add(new ToolBarButton()); // line then is OK
add(toolbar, BorderLayout.NORTH);
public static void main(String[] args) {
new MainFrame("ToolBar Test").setVisible(true);
class ToolBarButton extends JLabel {
public ToolBarButton() {
super(new ImageIcon(MainFrame.class.getResource("exit.png"))); // <-- transparent png
setBorder(BorderFactory.createLineBorder(Color.BLACK)); // icon 32px x 32px
addMouseListener(new MouseAdapter() {
@Override
public void mouseEntered(MouseEvent e) {
setBorder(BorderFactory.createLineBorder(Color.RED));
@Override
public void mouseExited(MouseEvent e) {
setBorder(BorderFactory.createLineBorder(Color.BLACK));
@Override
public void mouseClicked(MouseEvent e) {
System.exit(0);
}Thanks camickr, very helpful explanation.
Here's (good) working code:
package toolbartest;
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class MainFrame extends JFrame {
private MainFrame() {
setSize(800, 600);
setTitle("ToolBar Test");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
JToolBar toolbar = new JToolBar() {
@Override //<-- Paint background
protected void paintComponent(Graphics g) {
g.setColor(getBackground());
g.fillRect(0, 0, getSize().width, getSize().height);
super.paintComponent(g);
toolbar.setOpaque(false); //<-- Toolbar is non-opaque
toolbar.setBackground(new Color(0, 0, 0, 50)); //<-- Background color
toolbar.add(new ToolBarButton()); //that has an alpha value
add(toolbar, BorderLayout.NORTH);
setVisible(true);
public static void main(String[] args) {
new MainFrame();
class ToolBarButton extends JLabel {
public ToolBarButton() {
super(new ImageIcon(MainFrame.class.getResource("exit.png"))); // <-- transparent png
setBorder(BorderFactory.createLineBorder(Color.BLACK)); // icon 32px x 32px
addMouseListener(new MouseAdapter() {
@Override
public void mouseEntered(MouseEvent e) {
setBorder(BorderFactory.createLineBorder(Color.RED));
@Override
public void mouseExited(MouseEvent e) {
setBorder(BorderFactory.createLineBorder(Color.BLACK));
@Override
public void mouseClicked(MouseEvent e) {
System.exit(0);
} -
Using a fake semi-transparency - what's really possible?
Hi,
I'm just now moving into DW CS4 (from cs3) and I'm on an intel iMac. I'm trying to make a table background that is semi-transparent while KEEPING text and photos 100% opaque. I'm already familiar with this kind of code: (just improvising here):
.tableMain {
background: transparent;
filter=alpha(opacity=50);
opacity=.5
But this makes EVERYTHING semi-transparent - content and all. I'd love to know if it is possible to keep the content fully in view.
I've tried making a semi-transparent GIF or PNG background in Photoshop CS4 and using it for the table background, but that doesn't seem to work.
I did discover this (perhaps unique to my site) solution for a fake semi-transparency: Since I've got a gradient background on my site (see www.frankbright.com/History.htm ), I took a 'Screen Snapshot' of the background, from the bottom of the navigation to as far down as I could go. Then I used PS CS4 to expand the canvas and color down to cover my long pages. (See Jazz Links)
Then I used PS levels to darken the snapshot very slightly, so as to intimate a gray semi-transparent effect. Then I simply used that snapshot as the table background.
This looks better on the long, clearer pages that have only text content. With the index3 home page, however, you don't sense the semi-transparent effect I'm going for as much.
I've also noticed the 'Extensions' area of the CSS interface in DW - does this have anything to do with what I'm trying to do?
Anyways, I'm open to ideas, if anyone could suggest any.
Many Thanks, Frank B.Hi
You did not say what the problem was.
others viewing this thread. please read -
As for the colors of the background gradient using IEFilters, (for those who did not know on the forum, the IEFilter for background gradient was available since IE4.5, circa 1996, and all filters since IE5, circa 1998) you will need to adjust these as required. Luckily enough most background gradients go from one color to white or a lighter color of the starting color.
For FF and Safari see - http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/, http://webkit.org/blog/175/introducing-css-gradients/.
Google Chrome uses the webkit declaration, but unfortunately Opera does not support the feature, (use a standard background color at the beginning of the declaration) and FF only from version 3.6. But with the upgrading for FF users normally being 70+% within 6 months, this does mean that 85% of users will support the background gradient.
PZ
Edit: If you are using a css reset then it may be worth placing the position: relative; statement in this, as these normally include all the elements from H1 to pre.
Message was edited by: pziecina -
I'm creating an address book for my java class and was wondering if theres any way to make a JFrame semi-transparent like how winamp and trillian skins so you can see the desktop behind it. I've messed with a few different things I've found on the web but with no avail. Should I be using something besides a JFrame? There must be a way top do this but why haven't I been able to find anything if transparencies are so big these days? If anyone has any ideas please let me know. It's due by February 21st.
Thanks in advance!I think this you are looking for.. !!
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.awt.image.*;
public class TransparentBackground extends JComponent
implements ComponentListener, WindowFocusListener, Runnable {
// constants ---------------------------------------------------------------
// instance ----------------------------------------------------------------
private JFrame _frame;
private BufferedImage _background;
private long _lastUpdate = 0;
private boolean _refreshRequested = true;
private Robot _robot;
private Rectangle _screenRect;
private ConvolveOp _blurOp;
// constructor -------------------------------------------------------------
public TransparentBackground(JFrame frame) {
_frame = frame;
try {
_robot = new Robot();
} catch (AWTException e) {
e.printStackTrace();
return;
Dimension dim = Toolkit.getDefaultToolkit().getScreenSize();
_screenRect = new Rectangle(dim.width, dim.height);
float[] my_kernel = {
0.10f, 0.10f, 0.10f,
0.10f, 0.20f, 0.10f,
0.10f, 0.10f, 0.10f};
_blurOp = new ConvolveOp(new Kernel(3, 3, my_kernel));
updateBackground();
_frame.addComponentListener(this);
_frame.addWindowFocusListener(this);
new Thread(this).start();
// protected ---------------------------------------------------------------
protected void updateBackground() {
_background = _robot.createScreenCapture(_screenRect);
protected void refresh() {
if (_frame.isVisible() && this.isVisible()) {
repaint();
_refreshRequested = true;
_lastUpdate = System.currentTimeMillis();
// JComponent --------------------------------------------------------------
protected void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
Point pos = this.getLocationOnScreen();
BufferedImage buf = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_RGB);
buf.getGraphics().drawImage(_background, -pos.x, -pos.y, null);
Image img = _blurOp.filter(buf, null);
g2.drawImage(img, 0, 0, null);
g2.setColor(new Color(255, 255, 255, 192));
g2.fillRect(0, 0, getWidth(), getHeight());
// ComponentListener -------------------------------------------------------
public void componentHidden(ComponentEvent e) {
public void componentMoved(ComponentEvent e) {
repaint();
public void componentResized(ComponentEvent e) {
repaint();
public void componentShown(ComponentEvent e) {
repaint();
// WindowFocusListener -----------------------------------------------------
public void windowGainedFocus(WindowEvent e) {
refresh();
public void windowLostFocus(WindowEvent e) {
refresh();
// Runnable ----------------------------------------------------------------
public void run() {
try {
while (true) {
Thread.sleep(100);
long now = System.currentTimeMillis();
if (_refreshRequested && ((now - _lastUpdate) > 1000)) {
if (_frame.isVisible()) {
Point location = _frame.getLocation();
_frame.setLocation(-_frame.getWidth(), -_frame.getHeight());
updateBackground();
_frame.setLocation(location);
refresh();
_lastUpdate = now;
_refreshRequested = false;
} catch (InterruptedException e) {
e.printStackTrace();
public static void main(String[] args) {
JFrame frame = new JFrame("Transparent Window");
TransparentBackground bg = new TransparentBackground(frame);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(bg);
frame.pack();
frame.setSize(200, 200);
frame.setLocation(500, 500);
frame.setVisible(true);
}gervini -
How to make component semi-transparent?
Hi,
I want to make a component semi transparent so that i can see through component below that? is it possible in swing? if it is how can i do that?
Thanks,
Sato.I've had limited success by specifying a background color using an alpha value.
setBackground( new Color(123, 123, 123, 128) ); -
How to make a plane semi-transparent
Hi everyone. I am new here, and would like to thank you in advance.
I am trying to make a semi-transparent plane using 3D with QuadArray. Have set TransparencyAttributes accordingly; and have even tried TextureAttributes. It just doesn't cut it.
Without setting transparency, the plane is visible both sides. But once transparency set, it becomes invisible.
Can anyone give me some ideas? Thanks!
Here's the code snippet dealing with this plane:
Appearance ap = new Appearance();
TransparencyAttributes transparency = new
TransparencyAttributes(TransparencyAttributes.NICEST, 0.5f);
ap.setTransparencyAttributes(transparency);
PolygonAttributes cullAttribute = new PolygonAttributes();
cullAttribute.setCullFace(PolygonAttributes.CULL_NONE);
ap.setPolygonAttributes(cullAttribute);
TextureAttributes texture = new TextureAttributes();
texture.setTextureMode(TextureAttributes.BLEND);
ap.setTextureAttributes(texture);
Point3f points[] = new Point3f[4];
points[0] = new Point3f(-0.2f, 0.2f, 1.0f);
points[1] = new Point3f(0.2f, 0.2f, 1.0f);
points[2] = new Point3f(0.2f, -0.2f, 1.0f);
points[3] = new Point3f(-0.2f, -0.2f, 1.0f);
QuadArray planeVertices = new QuadArray(4, QuadArray.COORDINATES|QuadArray.COLOR_3);
planeVertices.setCoordinates(0, points);
Color3f colors[ ] = new Color3f[4];
for(int i = 0; i < colors.length; i++){
colors[i] = new Color3f(1.0f, 1.0f, 0.0f);
planeVertices.setColors(0, colors);
Shape3D plane = new Shape3D( );
plane.setGeometry(planeVertices);
plane.setAppearance(ap);
********************I just found that if I leave the colors undefined for the plane (a Shape3D); that is, remove the QuadArray.COLOR_3 flag, then the transparency works. Unfortunately, in that case, I can only have a white plane, and there's still no way for me to add color to the plane with its transparency maintained.
The right way seems to be using QuadArray.COLOR_4 flag instead. But somehow I can't get it to work. That is, no matter what value I am using for the Alpha value, the plane just remains opaque.
Can anyone give me some suggestions? Thanks a lot!
Message was edited by:
senore100 -
Placing a semi-transparent area on top of a picture
CS3
I need to place some text on a photo, and to make it possible to read the text clearly, I want to place an area with a single colour on top of the picture - and the text on top of the are.
But how can I make this area semi transparent?
ThanksThere is also an action under Text Effects that does a semi-transparent panel for text.
Load the Text Effects actions into your actions panel and then make a selection for
the size of the text panel (rectangular marquee tool) before running the action. After
the action runs you can type your text inside the panel.
You can move the text layer and panel layer to a different part of the image by
selecting both layers and then using the move tool.
MTSTUNER -
IM08 supports alpha channels/'transparency'
in case, this is new to you (it was for me...):
iM08 supports pictures, which contain alpha-channels..
so, it is now quite easy for the ambitious iMovie-maker, to add 'bugs', 'mattes', even soft-bordered 'masks' to your project.
as an example, I'm adding here a 'bug' (=stationairy logo') to one of my projects....
I create a picture in Photoshop Elements, containing transparency as 'background', and my lil' logo drops a shadow (not seen in this size). I then import to iPhoto, as .tiff, which transport transparency-info ... the Photo-bin shows it (1)
than, the usual routine: drag it over your video (2) ... the blue blar indicates the position in time, you can elongate it, etc.
as you see in the preview (3), my logo is added, ... in the final movie, it drops a nice semi-transparent shadow onto my video..
for sure, you can create in a pic processor other things to 'add', e.g. 'dream masks/mattes', which add the movie a fade-to-white borders (flowers?), ... or, simple arrows, circles, boxes for instructional videos.. keep imagine!
a more elaborated and illustrated How-To as usual on my site:
http://karsten.schluter.googlepages.com/im08tricks
(.. lists gets longer, should think about restructruring that...)
just to mention that: that was NOT possible with iMHD≤6 ...
Have Fun with iMovie!In addition to what David says:
if you rendered your timeline already, then exports will have black background.
If it's unrendered and then export, then the alphachannel will be included (with a codec that supports alphachannels of course)
to check what you are exporting: in the top of the canvas click the most right (of three) button and choose Checkerboard as the background.
If you now see the checkerboard, then you'll export with alphachannel. If you see black background then you've already rendered, and black will be exported. You can trash your renders using Tools > render manager. Or simply drag a clip over (1 videolayer higher) your title clip. And then delete this clip. It flushes your render.
Hope this helps
Rienk -
Code to make area semi transparent?
Is there a way to modify the following background color code to make my background color semi-transparent so that an image in the background shows through?
Thanks.
#logo {
background-image: url(img/logo.png);
background-repeat: repeat-x;
background-color: #FFFFFF;
margin: 0 auto;
width: 1100px;Have you got Fireworks?
If so open a new file and make the documents background color transparent.
Draw a small square and color it in with a solid colour which is in the same shade range as the color you want the final background of the #logo <div>.
Select the solid color and use the transparent box in the properties inspector to adjust the colour to suit. It may be best if you bring in your image and position it behind the colored square so you can see what the color looks like when you adjust the transparency of the color.
Once you have adjusted it to the color required delete the image and then export a small 1px x 1px piece of the colored square. Use PNG8 with alpha transparency or PNG24.
Use the colored square as the background image to the logo <div> instead of the logo image itself and insert the logo image directly into the logo <div> -
- Looking for Drop Down menu script w/ semi-transparent backgrounds...
Looking for a dropdown menu script that will allow
semi-transparent
backgrounds (so we can partly see what the list is displaying
over).
I've Googled this to death using all the obvious keywords,
but have yet to
find what I'm looking for.
Thanks.Yes. I understand and agree. Good point.
Thanks.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"T.Pastrana - 4Level" <[email protected]> wrote in message
news:[email protected]...
>I posted mainly for the benefit of Reese, I know you know
this.
>
>
> --
> Best Regards,
> ..Trent Pastrana
> www.fourlevel.com
>
>
>
>
>
>
> "Al Sparber- PVII" <[email protected]>
wrote in message
> news:[email protected]...
>> Actually, it's not an error. But we do happen to
have it in a CC on
>> that page because the last time I posted that page
on this forum it
>> was criticized for "failing" the W3C CSS validator.
>>
>>
http://www.projectseven.com/foxy.gif
>>
>> The Firefox console simply would report it as a
warning - not an
>> error. It would have no affect on the page. But
thanks for pointing
>> that out.
>>
>> --
>> Al Sparber - PVII
>>
http://www.projectseven.com
>> Extending Dreamweaver - Nav Systems | Galleries |
Widgets
>> Authors: "42nd Street: Mastering the Art of CSS
Design"
>>
>>
>>
>>
>> "T.Pastrana - 4Level" <[email protected]> wrote in
message
>> news:[email protected]...
>>> If you want your page to validate you might want
to separate the
>>> properties. Some modern browsers like Firefox
will throw an error
>>> with the filter property.
>>>
>>> #menu li {
>>> opacity: 0.85;
>>> }
>>>
>>> <!--[if IE]><style
type="text/css">#menu li {filter:
>>>
alpha(opacity=85);}</style><![endif]-->
>>>
>>>
>>> --
>>> Best Regards,
>>> ..Trent Pastrana
>>> www.fourlevel.com
>>>
>>>
>>>
>>>
>>> "Al Sparber- PVII"
<[email protected]> wrote in message
>>> news:[email protected]...
>>>> If, for example, you are using an unordered
list for your menu, set
>>>> opacity on the LI, like so:
>>>>
>>>> #menu li {
>>>> opacity: 0.85;
>>>> filter: alpha(opacity=85);
>>>> }
>>>>
>>>> As far as I know, there are no
"off-the-shelf" menu tools of worth
>>>> that offer this as an automatic option. You
should pick yourself a
>>>> good menu system then set opacity on the
relevant element. The
>>>> menu "script" or "system" really has nothing
to do with it.
>>>>
>>>> If you need a good base menu system, you can
find free ones and
>>>> commercial ones on our site. Here is an
example of one with
>>>> transparency:
>>>>
>>>>
http://www.projectseven.com/products/menusystems/pmm/css_tweaks/opacity/
>>>>
>>>>
>>>>
>>>> --
>>>> Al Sparber - PVII
>>>>
http://www.projectseven.com
>>>> Extending Dreamweaver - Nav Systems |
Galleries | Widgets
>>>> Authors: "42nd Street: Mastering the Art of
CSS Design"
>>>>
>>>>
>>>>
>>>>
>>>> "Reese" <[email protected]> wrote in message
>>>> news:[email protected]...
>>>>> Looking for a dropdown menu script that
will allow
>>>>> semi-transparent backgrounds (so we can
partly see what the list
>>>>> is displaying over).
>>>>>
>>>>> I've Googled this to death using all the
obvious keywords, but
>>>>> have yet to find what I'm looking for.
>>>>>
>>>>> Thanks.
>>>>>
>>>>
>>>
>>>
>>
>
>
Maybe you are looking for
-
In Firefox 4 you had a bug that did not allow the viewing of PDF files. I see that you just released Firefox 5. Did Firefox 5 fix that problem?
-
I have had problems with extended charaters in a database table not being represented correctly by clients. I believe that the FAQ concerning "Why do I see questions marks..." identified the problems. The database is set to Latin4 and clients at Lati
-
How do I delete an item in the sidebar - iPhoto 11
How do I delete an item on the iPhoto 11 sidebar?
-
HELP!! I can't login to BBID on my device
I cannot login to my BBID on my Torch 9860. I'm using the correct password and username, but I get a message saying "can't login to account". With the same username and password I can login to the account on my pc. I've changed the password several t
-
HT4864 my iphone is not connecting to the server
I keep receiving messages that I cannot connect to server; when I check mail from my iphone. Any suggestions?