|
|
Well I am trying to learn to make a skin for an InvisionFree forum and I am stuck on how to make rounded corners using code on my images. Here's examples of what I mean. Let's say that this is an actual image that I want to use.  I want to make it (with code) so that the edges are rounded a bit.  And if possible. I want to make it so that only the top corners gets rounded   The reason that I want to do this is because I have my forum like this now (obviously not finished yet  )  (sorry I don't know what the bar is called) And I want to have it like this.  How I managed to do the bar design is that I have the image like you see it in the bar. Only that it is the displayed height but only one px wide and set on repeat all the way to the end of the board. I have really searched for a code that rounds the edges the way I want it but I can't find any for rounding the corner of an image  Any help on the code? I am also open for tips on other ways to archive this effect. Thanks. - NJ EDIT: It never occurred to me before but now that I think about it, Studio Zero did exactly what I wanted to do on my forum xD Wow I feel stupid now lol. Still need help with the coding though.
Last Edit: Nov 5, 2009 20:43:28 GMT by NinthJake
|
|
|
|
|
|
i dont think there is a code to round corners on images, but i dont know much.
|
|
My signature [/left][/i][/size]
|
|
|
|
|
Hmm. A guy in school talked about it so I think it is possible. And It is possible to make boxes and eclipses and all those sorts of shapes with SVG coding but I haven't seen any example where they use images. I have also seen some examples where they use CSS to round corners the way I want, well I haven't seen examples using IMAGES there either but I think that it should be similar to rounding corners on buttons. The problem there is only that I have really no idea of what code is causing the effect. I could not even get the code to work on boxes just copying/pasting the code directly from a tutorial The only thing I managed to do was to remove the sides of the box but why would I want to do that
|
|
|
|
|
Last I checked, you can't actually do that with compliant code for all browsers. Basically, you can do that for any browser that supports CSS3, but not every browser supports it, including IE, the most used browser. The way we do it here is that the images are actually rounded themselves. It's also the most efficient way to do it and the way I recommend.
|
|
|
|
|
|
Last I checked, you can't actually do that with compliant code for all browsers. Basically, you can do that for any browser that supports CSS3, but not every browser supports it, including IE, the most used browser. The way we do it here is that the images are actually rounded themselves. It's also the most efficient way to do it and the way I recommend. Oh. That's too bad  Can you please tell me how to do it your way then? I assume you have one image with rounded corners for the left side of the "cat" (is that what the bar is called?), one image with regular corners for the middle put on repeat and one image with rounded corners for the right side. Can you please tell me how the code goes for that?
|
|
|
|
|
All of our skins are a fixed width, so we just have one image that contains the rounded corners. The easiest way to have three images (left, middle, right) is to create a table like so: <table border="0" cellpadding="0" cellspacing="0" width="95%"> <tr> <td width="10">left corner here</td> <td>middle image</td> <td width="10">right corner</td> </tr> </table> www.curvycorners.net/ might help you out as well
Last Edit: Nov 6, 2009 17:45:38 GMT by Benjamin
|
I'm gonna start dishing out internet beatings if people keep it up with this 4chan shit, I swear.
|
|
|
|
|
|
Last I checked, you can't actually do that with compliant code for all browsers. Basically, you can do that for any browser that supports CSS3, but not every browser supports it, including IE, the most used browser. The way we do it here is that the images are actually rounded themselves. It's also the most efficient way to do it and the way I recommend. only partially right chris... the moz and webkit attributes in css stylesheets is not CSS3 its pseudo css used in HTML5 What i advise and generally do... is make the template look stunning without the rounded corners in IE and then use the moz and webkit rounded corners pseudo to get it to look even better in gecko and webkit based browsers.. For example
-moz-border-radius:5px;
-webkit-border-radius:5px;
There are plugins that internet explorer users can use to get the gecko based functionality which i believe was created by google themselves. to get the rounded tops only you can do this
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
but as chris rightly mentioned it doesn't work in internet explorer hence why I said make it still look nice in IE first.
|
|
|
|
|
|
|
Ok thank you all.
I'll see if I can do any of those.
|
|
|
