Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,256
Total Threads: 81,171
Total Posts: 566,848
There are 40 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

creating rounded graphics and round corners?

Thread title: creating rounded graphics and round corners?
Reply  
Page 1 of 2 1 2 >
    Thread tools Search this thread Display Modes  
05-06-2011, 07:40 AM
#1
popflier is offline popflier
Status: I'm new around here
Join date: Mar 2011
Location: Denver, CO
Expertise: design/3D animation
Software: Photoshop, Maya
 
Posts: 4
iTrader: 0 / 0%
 

popflier is on a distinguished road

  Old  creating rounded graphics and round corners?

I really need some help please. I'm pretty new at building CSS/XHTML websites and am trying to learn the proper way to build out my sites. I'm aware of the w3c standards, but would really like to hear from actual web designers the best way to approach these 2 issues.

1) what is the best process to use to get the cleanest, non-jagged graphics for your site? (like round buttons?)
EX: create in Photoshop at 72dpi, save for web as PNG-24.
EX: create in Illustrator, save for web as SVG.

2) what is the best way to create rounded corners? Right now I am using images, but I've been reading up recently on using pure CSS or using Spiffy Box or Spiffy Corners. What does everyone recommend? My top priority is that the corners are as nice and clean/sharp as possible.

Currently, I have a site I'm working on for a friend and the round buttons and round corners are all pixelated. I'm struggling to find a solution that works. Seems that every time I try something he tells me it's not good enough and the edges need to be cleaner.

Help please?

05-07-2011, 07:40 PM
#2
popflier is offline popflier
Status: I'm new around here
Join date: Mar 2011
Location: Denver, CO
Expertise: design/3D animation
Software: Photoshop, Maya
 
Posts: 4
iTrader: 0 / 0%
 

popflier is on a distinguished road

  Old

anyone?

Reply With Quote
05-10-2011, 11:20 AM
#3
madhusmita is offline madhusmita
Status: Junior Member
Join date: May 2011
Location:
Expertise:
Software:
 
Posts: 36
iTrader: 0 / 0%
 

madhusmita is on a distinguished road

  Old  creating rounded graphics and round corners?

http://www.yourhtmlsource.com/tables...edcorners.html

You follow the above link.It will definitely help you.

Reply With Quote
05-17-2011, 01:32 PM
#4
k.vendrik is offline k.vendrik
Status: I'm new around here
Join date: May 2011
Location: The Netherlands
Expertise: Design
Software: Photoshop, Dreamweaver
 
Posts: 11
iTrader: 0 / 0%
 

k.vendrik is on a distinguished road

  Old

Use Photoshop to make you're buttons.
You can search youtube for Photoshop tutorials if necessery.

Reply With Quote
05-18-2011, 08:57 AM
#5
krymson is offline krymson
krymson's Avatar
Status: I'm new around here
Join date: Dec 2010
Location: Houston, USA
Expertise: SEO, Design, Programming
Software: Dreamweaver & Notepad++
 
Posts: 22
iTrader: 0 / 0%
 

krymson is on a distinguished road

Send a message via Skype™ to krymson

  Old

Originally Posted by madhusmita View Post
http://www.yourhtmlsource.com/tables...edcorners.html

You follow the above link.It will definitely help you.
Couldn't be MORE incorrect... That's using tables and tables are well outdated and a bad practice. For rounded corners i use a small png image i generally have 2 images 1 for the top and bottom extending the width of the website, if you want to make it fluid then you're going to need 4 to place at the 4 corners so it can expand.

I generally use png's for the transparent background this way i can change background colors/images as needed without changing the image... If you do this save as png24 under "Save For Web & Devices" in Photoshop

Thanked by:
ronaldroe (12-17-2011)
06-15-2011, 01:51 AM
#6
popflier is offline popflier
Status: I'm new around here
Join date: Mar 2011
Location: Denver, CO
Expertise: design/3D animation
Software: Photoshop, Maya
 
Posts: 4
iTrader: 0 / 0%
 

popflier is on a distinguished road

  Old

Originally Posted by krymson View Post
Couldn't be MORE incorrect... That's using tables and tables are well outdated and a bad practice. For rounded corners i use a small png image i generally have 2 images 1 for the top and bottom extending the width of the website, if you want to make it fluid then you're going to need 4 to place at the 4 corners so it can expand.

I generally use png's for the transparent background this way i can change background colors/images as needed without changing the image... If you do this save as png24 under "Save For Web & Devices" in Photoshop
I thought I had enabled a subscription to my post, but apparently I didn't since I didn't know anyone had responded until I logged in today so my apologies for the delay. I wanted to say thank you for the info. I really appreciate it. I know the method you are talking about. I wasn't sure what would be the correct one, but it sounds like this method is recommended by several others too. So... this will be the method I'll focus on learning.

Thanks again!

Reply With Quote
06-15-2011, 04:12 PM
#7
derek lapp is offline derek lapp
Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:
 
Posts: 2,246
iTrader: 0 / 0%
 

derek lapp is on a distinguished road

  Old

just use css3 to do it. at this point, if you're using a browser that won't support it in some way you're either:
  • using it voluntarily, therefore odds of you noticing the corners are sharp or rounded (and then caring) are next to nothing and not worth the effort anymore.
  • being forced to use it and rounded v sharp corners are the least of your worries.

unless the design calls for photographic details the arguments to hack together graphics vs just coding something that degrades nicely are very limited.

Thanked by:
ronaldroe (12-17-2011)
10-12-2011, 11:07 PM
#8
aryicul is offline aryicul
Status: I'm new around here
Join date: Oct 2011
Location:
Expertise: HTML,PHP,Graphic Designs
Software: Photoshop, Dreamweaver
 
Posts: 8
iTrader: 0 / 0%
 

aryicul is on a distinguished road

  Old

You can try to use photoshop, i'm using it to make my buttons.

Reply With Quote
10-19-2011, 07:10 PM
#9
div.coders is offline div.coders
Status: I'm new around here
Join date: Oct 2011
Location:
Expertise:
Software:
 
Posts: 2
iTrader: 0 / 0%
 

div.coders is on a distinguished road

  Old

css for rounded borders:

Code:
div.rounded{
border-radius:10px; /* main code for all browsers */
-moz-border-radius:10px; /* mozilla firefox */
-webkit-border-radius:10px; /* chrome, opera */
}

10-24-2011, 06:01 AM
#10
sunil8986 is offline sunil8986
Status: On Vacation
Join date: Sep 2011
Location: India
Expertise: CSS, PSD to XHTML/HTML, XHTML
Software: Photoshop, Dreamweaver
 
Posts: 4
iTrader: 0 / 0%
 

sunil8986 is on a distinguished road

  Old

Hi popflier,

You should go for Photoshop for round corner and use those round button images through CSS.

CSS3 :
div.rounded{
border-radius:10px; /* main code for all browsers */
-moz-border-radius:10px; /* mozilla firefox */
-webkit-border-radius:10px; /* chrome, opera */
}

Not work for IE versions

Sunil

Reply With Quote
Reply  
Page 1 of 2 1 2 >


Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed