Category Archives: css

Effetto drop shadow con i css

In questo tutorial vedremo come realizzare l'effetto drop shadow per una immagine con l'utilizzo dei css.

Supponiamo di avere una immagine iniziale come quella in figura:

La prima cosa che vogliamo fare è utilizzare l'attributo "background" il quale ci permette di modificare il colore di sfondo e assegnare i bordi.

img {
padding: 5px;
background: white;
}

Cosi facendo abbiamo dato alla nostra immagine un bordo bianco. (Non si vede perchè lo sfondo di questa pag è bianco)

Fatto ciò vediamo che codice utilizzare per l'effetto desiderato:

#shadow {
background: #b4afa3;
padding: 0 1px;
border-left: 1px solid #dcd7c8;
border-right: 1px solid #dcd7c8;
}

Il risultato sarà:

Approfondisci leggendo: http://theshapeofdays.com/2005/11/my_contribution.html

Creare un menu a navigazione stile tab con i css e le immagini

In questo tutorial vedremo come creare un menu a navigazione stile tab con i css e le immagini. Creiamo il file css:

#navigation {
   float:left;  /* necessario per il menu, crea un menu inline */
   width: 100%; /* puoi definire la larghezza in px qui */
   background: transparent;
   font-size: 14px;
   line-height:normal;
   font-family: Trebuchet MS;
}
#navigation ul {
   margin:0;
   padding:10px 10px 0 0;
   list-style:none; /* rimuove puntini della lista */
}
#navigation li {
   float:left;
   background:url(img/left.gif) no-repeat left top; /* parte sinistra del tab in figura sotto*/
   margin:0px 0px 0px 4px;
   padding:0 0 0 6px;
}
#navigation a {
   display:block; /* Crea il tab link,non solo text :) */
   background:url(img/right.gif) no-repeat right top; /* corpo e bordo destro e corner -> vedi figura sotto */
   padding:5px 15px 4px 6px;
   text-decoration: none;   
color: white;
}

left.gif

right.gif

Ecco il codice da mettere nel file html

<div id='navigation'>
<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  <li><a href="#">Link 7</a></li>
  <li><a href="#">Link 8</a></li>
  <li><a href="#">Link 9</a></li>
</ul>
</div>

Creare un menu di navigazione stile tabs con i css

<style type="text/css">
#tabs{
    padding:0;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#FFF;
    font-weight:bold;
}
#tabs ul{
    list-style:none;
    margin:0;
    padding:0;
}
#tabs ul li{
    display:inline;
    margin:0;
    text-transform:capitalize;
}
#tabs ul li a{
    padding:5px 16px;
    color:#FFF;
    background:#E7A272;
    float:left;
    text-decoration:none;
    border:1px solid #D17B40;
    border-left:0;
    margin:0;
    text-transform:capitalize;
}
#tabs ul li a:hover{
    background:#EAEAEA;
    color:#7F9298;
    text-decoration:none;
    border-bottom:1px solid #EAEAEA;
}
#tabs ul li a.active{
    background:#EAEAEA;
    color:#7F9298;
    border-bottom:1px solid #EAEAEA;
}
#content{   
    background:#EAEAEA;
    clear:both;
    font-size:11px;
    color:#000;
    padding:10px;
    font-family:Arial, Helvetica, sans-serif;
}
</style>

Dopodiche creiamo il file che conterrà il menu:

<div id='tabs'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Forums</a></li>
<li><a href='#' class='active'>Tutorials</a></li>
<li><a href='#'>Downloads</a></li>
<li><a href='#'>Links</a></li>
</ul>
</div>
<div id='content'>Contenuto della pagina!</div>

Il risultato è questo: