Solved

transparent border

Posted on 2011-02-28
12
341 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

820 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