Solved

transparent border

Posted on 2011-02-28
12
343 Views
Last Modified: 2012-05-11
Hi,

I'm wondering how I can use a transparent border like this one around the image. I think we can do it CSS, right? Will it work with IE 7>, Firefox 3.x>, Opera, Safari, Chrome?

Maybe there is a javascript code for doing this or jquery plugin?

Thanks,
Victor
0
Comment
Question by:Victor Kimura
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +4
12 Comments
 
LVL 9

Expert Comment

by:xav056
ID: 35003586
border-stlyle:none;
0
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 100 total points
ID: 35003667
it should be border-color:transparent

http://www.w3schools.com/css/pr_border-color.asp
0
 

Expert Comment

by:ShedrackMgonja
ID: 35003726
You can set border color same as backgound color
0
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
LVL 39

Expert Comment

by:Aaron Tomosky
ID: 35003842
You can use margin or padding with borderstyle none to get the placement you want
0
 

Author Comment

by:Victor Kimura
ID: 35004023
Sorry, I forgot to add the link. I'd like to achieve this transparent border:
http://nivo.dev7studios.com/#usage

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35004047
<<I'd like to achieve this transparent border:>>
which one?
0
 
LVL 31

Assisted Solution

by:Marco Gasi
Marco Gasi earned 275 total points
ID: 35004237
You have to create a png image that represent the entire div, the white rect and its rounded border: all this you can do in Photoshop. Then you set this image as background. CSS3 allow to draw rounded corners but I don't think they allow to use semitransparent effect as you wish and allin all they still have a poor support by browsers, so using images is still the best crossbrowser solution.

Cheer
0
 
LVL 21

Accepted Solution

by:
Julian Matz earned 125 total points
ID: 35004421
Have a look at the background image they used:
http://nivo.dev7studios.com/images/slider.png

You'll see the whole border there is actually part of a PNG graphic. It looks like a white stroke around the rectangle and then set to about 20 / 30 percent alpha / opacity.

Fairly simple to do in Photoshop, and will work in all of the latest browsers.
0
 

Author Comment

by:Victor Kimura
ID: 35004868
Hi julianmatz,

Where did you see that slider.png in the code? I tried to look at the source to view the code surrounding this background image but I couldn't find it.

0
 
LVL 31

Assisted Solution

by:Marco Gasi
Marco Gasi earned 275 total points
ID: 35005646
In order to view that image you have to use Firefox and the WebDeveloper Toolbar addon. With this addon you can examine the css file and there you find slider.png set as background of slider-wrapper element: As I said in my post ID:35004237 using an image as  background is the best solution to your question.

cheers
0
 

Author Closing Comment

by:Victor Kimura
ID: 35008599
Thank you.
0
 
LVL 21

Expert Comment

by:Julian Matz
ID: 35011547
No, what I did was very simple actually. In Firefox, I put the mouse cursor right over one of the edges of the border, clicked the right mouse button and then selected "View Background Image". That gave me the URL of the image.

If you'd like to see the CSS used for it, I recommend installing the Firebug extension for Firefox. It's even better than the Web Developer extension for viewing CSS as it gives you a breakdown of both HTML and CSS side by side. If you then click on a HTML element, it will show you the element on the screen and will also show you all the relevant CSS rules.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question