Solved

transparent border

Posted on 2011-02-28
12
339 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to hide html tags in text area 4 31
.php tree directory? 5 54
Enter key on html form page 11 42
webpage layout breaks when expanding bootstrap collapse component 8 11
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to count occurrences of each item in an array.

948 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now