Web Develop Forum: CSS Menus & Rounded Corners - Web Develop Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

CSS Menus & Rounded Corners Rate Topic: -----

#1 User is offline   Bob Icon

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 44
  • Joined: 23-October 08
  • Gender:Male

Posted 28 January 2009 - 01:49 AM

These are some links that I find useful when coding navigations & rounded corners/fluid boxes, hopefully they can come to some use for you as well smile.gif.

CSS Menus:


CSS Rounded Corners:

0

#2 User is offline   Sam Asante Icon

  • Advanced Member
  • Icon
  • Group: Moderator
  • Posts: 66
  • Joined: 18-January 09
  • Gender:Male
  • Location:United Kingdom

Posted 28 January 2009 - 01:52 AM

Thanks so much Bob.
Just what I needed biggrin.gif
0

#3 User is offline   Diffraction Icon

  • Advanced Member
  • Icon
  • Group: Moderator
  • Posts: 279
  • Joined: 26-January 09
  • Gender:Male
  • Location:USA
  • Interests:Web Development, Reading, Writing, Computers in general...
  • Your specialities (detailed)::HTML 5
    CSS 3
    jQuery

Posted 28 January 2009 - 02:35 AM

Good job, Bob.
Want to report something to a moderator? Use the 'report' button located on every post.
0

#4 User is offline   Alex Leeds Icon

  • Member
  • PipPip
  • Group: Members
  • Posts: 26
  • Joined: 29-January 09
  • Location:South Florida
  • Interests:Website Development in HTML, CSS, Javascript / AJAX, and PhP

Posted 30 January 2009 - 08:19 PM

Although using images to sustain the rounded corners effect is good for cross browser rounded corners, I prefer the CSS3 / Mozilla / Webkit method which is:

CODE
CSS3: border-radius: 6px;

Mozilla: -moz-border-radius: 6px;

Webkit: -webkit-border-radius: 6px;


All of these CSS "functions" will supply the div, table or whatever you're applying it to with rounded corners / borders. You can also apply an extra '-' into the function to specify the specific corner you would like rounded.
For example:

CODE
border-bottom-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;


With web browsers being constantly updated and improved upon, and the older ones (IE6) fading away at a faster pace everyday, I much prefer using this method then using an image. Additionally the javascripted rounded corners are nice as well.
Imglot.com - Free Image Hosting
0

#5 User is offline   Will Roberts Icon

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 64
  • Joined: 23-October 08
  • Gender:Male
  • Location:Buckley, North Wales

Posted 31 January 2009 - 06:46 AM

QUOTE (Alex Leeds @ Jan 30 2009, 08:19 PM) <{POST_SNAPBACK}>
With web browsers being constantly updated and improved upon, and the older ones (IE6) fading away at a faster pace everyday, I much prefer using this method then using an image. Additionally the javascripted rounded corners are nice as well.


IE6 is still widely used and cannot be ignored if you want to run a professional outfit.

Also, the rounded corners that are generated from these kits do not come close to image quality and if done well the images you use only total a few kb.
My Portfolio: <a href="http://www.imagelimited.co.uk" target="_blank">I.M.A.G.E</a>
Submit Your Site: <a href="http://www.keepittidy.co.uk" target="_blank">K.I.T</a>
CSS & XHTML Tutorials: <a href="http://www.fatbasturd.co.uk" target="_blank">FatBasturd</a>
SEO Services: <a href="http://www.firstplaceingoogle.com" target="_blank">Firstplaceingoogle.com</a>
0

#6 User is offline   Diffraction Icon

  • Advanced Member
  • Icon
  • Group: Moderator
  • Posts: 279
  • Joined: 26-January 09
  • Gender:Male
  • Location:USA
  • Interests:Web Development, Reading, Writing, Computers in general...
  • Your specialities (detailed)::HTML 5
    CSS 3
    jQuery

Posted 31 January 2009 - 05:14 PM

QUOTE (Will Roberts @ Jan 30 2009, 11:46 PM) <{POST_SNAPBACK}>
Also, the rounded corners that are generated from these kits do not come close to image quality


Actually, not true. It depends on the browser. in Firefox 3.1 beta it looks awesome and very smooth.
Want to report something to a moderator? Use the 'report' button located on every post.
0

#7 User is offline   thinglie Icon

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 41
  • Joined: 25-October 08
  • Gender:Male
  • Location:House

Posted 04 February 2009 - 04:07 PM

A list apart have done articles on both of these. Man, I love that website.
<a href="http://www.gnu.org/" target="_blank"><img src="http://www.gnu.org/graphics/gnubanner-2.png" border="0" class="linked-sig-image" /></a>
<a href="http://www.fsf.org'" target="_blank">Free Software Foundation</a>
0

#8 User is offline   Will Roberts Icon

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 64
  • Joined: 23-October 08
  • Gender:Male
  • Location:Buckley, North Wales

Posted 06 February 2009 - 11:54 AM

QUOTE (Meshach @ Jan 31 2009, 05:14 PM) <{POST_SNAPBACK}>
Actually, not true. It depends on the browser. in Firefox 3.1 beta it looks awesome and very smooth.


The largest population doesn't use Firefox wink.gif

Also, as shameless as it is.... I have some menus up with tutorials on my site here http://www.fatbasturd.co.uk
My Portfolio: <a href="http://www.imagelimited.co.uk" target="_blank">I.M.A.G.E</a>
Submit Your Site: <a href="http://www.keepittidy.co.uk" target="_blank">K.I.T</a>
CSS & XHTML Tutorials: <a href="http://www.fatbasturd.co.uk" target="_blank">FatBasturd</a>
SEO Services: <a href="http://www.firstplaceingoogle.com" target="_blank">Firstplaceingoogle.com</a>
0

#9 User is offline   Diffraction Icon

  • Advanced Member
  • Icon
  • Group: Moderator
  • Posts: 279
  • Joined: 26-January 09
  • Gender:Male
  • Location:USA
  • Interests:Web Development, Reading, Writing, Computers in general...
  • Your specialities (detailed)::HTML 5
    CSS 3
    jQuery

Posted 06 February 2009 - 04:10 PM

QUOTE (Will Roberts @ Feb 6 2009, 04:54 AM) <{POST_SNAPBACK}>
The largest population doesn't use Firefox wink.gif


More people are using Firefox then you realize. wink.gif
Want to report something to a moderator? Use the 'report' button located on every post.
0

#10 User is offline   Will Roberts Icon

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 64
  • Joined: 23-October 08
  • Gender:Male
  • Location:Buckley, North Wales

Posted 06 February 2009 - 05:16 PM

IE still has more wink.gif
My Portfolio: <a href="http://www.imagelimited.co.uk" target="_blank">I.M.A.G.E</a>
Submit Your Site: <a href="http://www.keepittidy.co.uk" target="_blank">K.I.T</a>
CSS & XHTML Tutorials: <a href="http://www.fatbasturd.co.uk" target="_blank">FatBasturd</a>
SEO Services: <a href="http://www.firstplaceingoogle.com" target="_blank">Firstplaceingoogle.com</a>
0

#11 User is offline   Sam Granger Icon

  • Administrator
  • PipPipPip
  • Group: Root Admin
  • Posts: 431
  • Joined: 22-October 08
  • Gender:Male

Posted 06 February 2009 - 06:43 PM

Agreed with Will. Actually shamed to say I'm posting this in buggy IE8! But FF is still way under the % of IE users. Best to have sites working perfect in IE6+ and FF.
0

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users