How is Artisteer generating rounded corners on items? |
|
Joey
|
I don't think that it is using 'radius' in CSS, so how does it generate elements with rounded corners?
Even more specifically, how is it able to keep both the left and right end caps of a menu tab rounded, even if that menu tab changes size? If it is using Javascript to do this, what is the script that is accomplishing this?
Thanks in advance.
|
| |
Ian Shere
|
It's done with graphics and transparency. Look in templates/your_template/images and you'll find them all there. After export, you can even go in and edit them if you need something specific - I have done so before.
|
| |
Joey
|
I am very familiar with using background images to style a link in CSS. With these 'rounded corner' BG images, the rounded corners always appear on both ends, even though the BG image is usually much longer than the actual links. I've tried making my own BG image that is maybe a slightly different size, and the right end always ends up looking 'cut off'.
There has to be some Javascript or something going on. Does anyone know what it is?
|
| |
jkwebdesign
|
It is just css (clip is the magic!). You can use different sizes, just edit template.css..
Look example:
.jkwd-sheet-tr, .jkwd-sheet-tl, .jkwd-sheet-br, .jkwd-sheet-bl {
background-image: url("../images/sheet_s.png");
height: 70px;
width: 70px;
}
.jkwd-sheet-tl {
clip: rect(auto, 35px, 35px, auto);
left: 0;
top: 0;
}
.jkwd-sheet-tr {
clip: rect(auto, auto, 35px, 35px);
right: 0;
top: 0;
}
.jkwd-sheet-bl {
bottom: 0;
clip: rect(35px, 35px, auto, auto);
left: 0;
}
.jkwd-sheet-br {
bottom: 0;
clip: rect(35px, auto, auto, 35px);
right: 0;
|
| |
Clippy
|
Eyup! It's the clip property at work! It's where I got my name!
I suggested that for 3.1, however, that they switch to css corners (border-radius) for their "simplified for newer browsers" mode, and they seemed receptive to the suggestion.
|
| |
Joey
|
jkweb, can I see the html that you are using this css on? How are you applying four classes to one element? (I am assuming that these four rounded corners are going on to one element?)
Also, do you know how the Artisteer css is using clipping to cap off the left and right ends of menu tabs? I feel like I'm so close to figuring this out...
thanks
|
| |
Garry
|
Simply install the Firebug and you'll be able to inspect everything !
|
| |
|
|