Solved

transparent border

Posted on 2011-02-28
12
340 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
  • 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
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 
LVL 38

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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

803 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