Menu bordi arrotondati con effetto Fade

17 dicembre 2010

Css3 ci porta tantissime innovazione che ci permettono di realizzare determinati effetti e componeneti precedentemente creati con tecnologie poco accessibili come jquery e flash.

menu in css3 con effetto fade e angoli arrotondati

Oggi vedremo come realizzare un semplicissimo menu con effetto fade sui link con i bordi arrotondati come ho fatto sul mio sito personale www.blusite.net .

Qua troviamo il nostro codice html:

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

<!DOCTYPE>
<html>

<head>

<title>Css3 Menu tipo quello di Blusite</title>
<link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>

<nav>

<ul>
<li class='tondo'><a class="pre" href="#">HOME</a></li>
<li class='tondo'><a class='cara' href="#">CHI SONO</a></li>
<li class='tondo'><a class='cara' href="#">PORTFOLIO</a></li>
<li class='tondo'><a class='cara' href="#">BLOG</a></li>
<li class='tondo'><a class='cara' href="#">CONTATTI</a></li>
<li class='tondo'><a class='cara' href="#">PROGETTI</a></li>
</ul>
</nav>

</body>
</html>

Qui invece troviamo il nostro foglio di stile commentato:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

/* impostiamo i font */

* {
font: Normal 12px Arial;
color: #d8d8d8;
font-weight: bold;
}

/* impostiamo la larghezza del nav
che conterrà il nostro menu */

nav {
width: 880px;
height: 50px;
background-color: #176eff;
text-align: center;
margin: 0px auto;
padding: 0px;
border-radius: 8px;
}

/* impostiamo i margini e il padding
del menu */

nav ul {
margin: 0px auto;
padding: 0px;
height: 20px;
}

/* ora impostiamo ogni nostro
singolo menu in stato normale */

nav ul li {
float: left;
list-style: none;
margin-left: 40px;
margin-right: 40px;
border-radius: 3px 3px 3px 3px;
padding-left: 0px;
padding-right: 0px;
margin-top: 17px;
}

/* impostiamo il colore dei nostri menu */

nav ul li a {
color: #ffffff;
text-decoration: none;
}

nav ul li a:hover {
color: #ffffff;
text-decoration: none;
}

/* impostiamo l'effetto transizione dei
nostri menu per la durata di un secondo */

nav ul li a {
color:#ffffff;
background-color: rgba(23,110,255,0.0);
padding:5px;
-webkit-border-radius: 5px;
-webkit-transition-property: color, background;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
}
nav ul li a:hover{
color:#176eff;
background-color: rgba(255,255,255,1);
}

/* impostimo la voce del menu corrente */

nav ul li a.pre{
margin-left: 15px;
color:#176eff;
background-color: rgba(255,255,255,1);
}
nav ul li a.pre:hover{
color:#176eff;
background-color: rgba(255,255,255,1);
}

Ovviamente un esempio ci renderà più facile seguire il nostro tutorial. Alla prossima