Solved

transparent border

Posted on 2011-02-28
12
338 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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 30

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 30

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to dynamically set the form action using jQuery.

762 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

22 Experts available now in Live!

Get 1:1 Help Now