How to make a list with rounded corners, auto width and hover effect

So you want make a list with rounded corners..i hope this simple tutorial can help you.

list with rounded corners

This is the final result: demo.


First of all we ‘re gonna to design the corners with Photoshop:

  1. Create a new file: 335px * 110px, resolution 72px, rgb/8 bit
  2. draw with the tool (shift+U) a rounded rectangle (270px*30px = height of your item) and fill it with color: #cccccc
  3. duplicate the layer and fill the new rectangle with color: #333333
  4. make 4 slices with the tool (shift+K) on the corners of the same width, like in the image:

    two slices on the corners of the same width

  5. now save for web.. the 4 slices in .gif format (my files: crn_03.gif, crn_05.gif, crn_09.gif, crn_10.gif) and move it in the same directory of the .html file.

The html code is simple and semantic:

i make an item with only text and another with an icon 24px*24px.

Copy and paste the following Css code in the <head> tag of your page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* Deswign.com */
/* reset the element */
html, body, div, span, h1, h2, p, a, img, ul, li{
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline
}
body{
font: normal 80% Verdana
}
a:hover{
outline: none
}
ul.crn{
float: left;
list-style: none
}
ul.crn li{
background: #ccc url(crn_05.gif) no-repeat top right;
float: left;
height: 30px; /* same height of the image */
margin: 0 20px;
text-align: center
}
ul.crn li a:link, ul.crn li a:visited{
background: url(crn_03.gif) no-repeat top left;
color: #333;
float: left;
font-weight: bold;
height: 30px; /* same height of the image */
line-height: 30px;
padding: 0 10px;
text-decoration: none
}
ul.crn li:hover{
background: #333 url(crn_10.gif) no-repeat top right
}
ul.crn li a:hover, ul.crn li a:focus{
background: url(crn_09.gif) no-repeat top left;
color: #EBD938;
text-decoration: none
}

ul.crn li img{
float: left;
margin-top:2px;
}

I reset all the element of the page, then i add float:left to all tag of the list and at the end i use the image of the corners as background for the tag <li> and <a>.

Download here the tutorial: you ll find an extra code to make the same effect for the tag <p>.

If you want to customize it, just remember to use the same height and the same color to draw the rounded rectangle and for the tag <a>, <li>.

It is supported by IE7+, FF2+, Opera and Safari; you can help me to find an hack for support pseudoclass :hover in IE6.

Share your passion on del.icio.us
1 luglio, 2008 at 11:46 am, filed under Css, Tricks, Tutorial, Webdesign.
  1. guile
    Posted 8 luglio, 2008 at 9:50 am

    this method won’t work in ie6

  2. sw
    Posted 8 luglio, 2008 at 10:29 am

    @guile: i know ie6 doesn t support the pseudoclass :hover, but isn’ t it time to upgrade to ie7? Please ’save the developers’ :)

  3. George Antoniadis
    Posted 4 agosto, 2008 at 1:48 pm

    Very nice article :)

    Btw there are a few javascript snips that actually allow you to use :hover on anything at IE6…

    Two very usefull examples:
    http://www.xs4all.nl/~peterned/csshover.html
    http://www.danvega.org/blog/index.cfm/2008/1/1/CSS-hover-selector

    But in any case… IE6 sucks anyway :P

  4. aNieto2k
    Posted 5 agosto, 2008 at 7:49 am

    If you use links inside the <li /> elements, you can use :hover.

    Great manual

  5. sw
    Posted 5 agosto, 2008 at 5:31 pm

    @George Antoniadis: tanks a lot for the links, i never seen that tricks!

    @aNieto2k: what do you mean? also the pseudoclass :hover on tag < li > isn t supported by IE6.

  6. Thomas
    Posted 10 agosto, 2008 at 9:16 am

    Clear article! Thanks for sharing!

  7. linx
    Posted 21 agosto, 2008 at 5:17 pm

    for ie6 :hover issue you could try this

    http://code.google.com/p/ie7-js/

  8. Mia Rencontres
    Posted 24 giugno, 2009 at 10:41 am

    Hmm… ok, this is a complicated alternative to indeed childish but extremely easy Word or PowerPoint method :D

7 Trackbacks

  1. By Best of July 2008 | Life as a Web Designer on 31 luglio, 2008 at 11:25 pm

    [...] How to make a list with rounded corners, auto width and hover effect [...]

  2. By Websites you Shouldn´t have missed in JULY 2008 on 4 agosto, 2008 at 10:37 am

    [...] 17- How to make a list with rounded corners, auto width and hover effect [...]

  3. By 9 Top CSS Essential Skills That Every Web designer Should Learn - aComment.net on 21 agosto, 2008 at 12:37 pm

    [...] How to make a list with rounded corners, auto width and hover effect [...]

  4. By S A N D E E P [ I N D I A N I C ] » Blog Archive » Websites you Shouldn´t have missed in JULY 2008 on 1 settembre, 2008 at 3:53 am

    [...] 17- How to make a list with rounded corners, auto width and hover effect [...]

  5. By Websites you Shouldn´t have missed in JULY 2008 | POLPDESIGN on 10 settembre, 2008 at 2:23 am

    [...] 17- How to make a list with rounded corners, auto width and hover effect [...]

  6. By Package of the most cool and useful websites of this month | Design it on 17 dicembre, 2008 at 5:11 am

    [...] 17- How to make a list with rounded corners, auto width and hover effect [...]

  7. By Blog - FRHost Hospedagem de Site » Blog Archive » 9 Dicas de CSS que todo Designer deve Saber on 2 gennaio, 2009 at 11:28 am

    [...] Como fazer uma lista com cantos arredondados, tamanho automárico e efeito de mouse over [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*