Come stilizzare le liste con CSS. Esempi semplici e belli di personalizzazione.

Liste sono una serie di elementi che formano un blocco e allineati sulla sinistra. Elementi nelle liste o elenchi, un altro nome usato per questa struttura HTML,  vengono formati con  tag <li></li> che possono contenere altri elementi, come ad esempio i collegamenti <a>, immagini <img>, paragrafi  <p>, etc.

In questo articolo vorrei mostrare esempi di come è possibile stilizzare le liste tramite linguaggio CSS, vediamo di creare varie fogli di stili Css che potrete semplicemente copiare e usare nel tuo sito web e a questo punto sarebbe anche opportuno di creare una libreria di snipet dove inserire questi frammenti del codice per utilizzo rapido come per esempio descritto nel nostro corso dedicato ad PHPdesigener.

Non andro tanto profondo nella spiegazione del codice CSS ma mostrero semplicemente esempi gia  finiti e pronti all'uso.

Esempio 1.  Lista numerata o ordinata.

Prima vediamo il codice e puoi il risultato finale. Il nostro codice  avrà due sezioni la prima che riguarda proprio formattazione del elenco in HTML e puoi stili CSS che cambierano il suo aspetto.

Esempio1

cliccare per aprire e vedere il codice

<ol class="rounded">
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
</ol>
.rounded {
counter-reset: li; 
list-style: none; 
font: 14px "Trebuchet MS", "Lucida Sans";
padding: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.rounded a {
position: relative;
display: block;
padding: .4em .4em .4em 2em;
margin: .5em 0;
background: #DAD2CA;
color: #444;
text-decoration: none;
border-radius: .3em;
transition: .3s ease-out;
}
.rounded a:hover {background: #E9E4E0;}
.rounded a:hover:before {transform: rotate(360deg);}
.rounded a:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #8FD4C1;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid white;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
  1. Elemento
  2. Elemento
  3. Elemento
  4. Elemento
  5. Elemento

Esempio 2.Un può di fantasia e il gli stili CSS fanno la magia...

 

cliccare per aprire e vedere il codice

<ol class="rectangle">
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
</ol>
.rectangle {
counter-reset: li; 
list-style: none; 
font: 14px "Trebuchet MS", "Lucida Sans";
padding: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.rectangle a {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
margin: .5em 0 .5em 2.5em;
background: #D3D4DA;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
}
.rectangle a:hover {background: #DCDDE1;}       
.rectangle a:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #9097A2;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.rectangle a:after {
position: absolute;
content: "";
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.rectangle a:hover:after {
left: -.5em;
border-left-color: #9097A2;
}
  1. Elemento
  2. Elemento
  3. Elemento
  4. Elemento
  5. Elemento

Esempio 3.

cliccare per aprire e vedere il codice

<ul class="border">
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
</ul>
.border {
list-style: none;
padding: 0;
}
.border li {
font-family: "Trebuchet MS", "Lucida Sans";
padding: 7px 20px;
margin-bottom: 10px;
border-radius: 5px;
border-left: 10px solid #f05d22; 
box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1),
     -2px -2px 5px 0 rgba(0,0,0,.1),
    2px 2px 5px 0 rgba(0,0,0,.1),
    -2px 2px 5px 0 rgba(0,0,0,.1);
font-size: 20px;
letter-spacing: 2px;
transition: 0.3s all linear;
}
.border li:nth-child(2){border-color: #8bc63e;}
.border li:nth-child(3){border-color: #fcba30;}
.border li:nth-child(4){border-color: #1ccfc9;}
.border li:nth-child(5){border-color: #493224;}
.border li:hover {border-left: 10px solid transparent;}
.border li:nth-child(1):hover {border-right: 10px solid #f05d22;}
.border li:nth-child(2):hover {border-right: 10px solid #8bc63e;}
.border li:nth-child(3):hover {border-right: 10px solid #fcba30;}
.border li:nth-child(4):hover {border-right: 10px solid #1ccfc9;}
.border li:nth-child(5):hover {border-right: 10px solid #493224;}
  • Elemento
  • Elemento
  • Elemento
  • Elemento
  • Elemento

Esempio 4.

cliccare per aprire e vedere il codice

<ul class="first">
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
</ul>
.first  {
list-style: none;
padding: 0;
}
.first li {
padding: 10px 30px;
background: linear-gradient(to left, #f8ab8d 0%, white, #f8ab8d);
border-bottom: 1px solid grey;
color: #506a6b;
font-size: 20px;
box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);
margin-bottom: 5px;
}
.first li:last-child {border-bottom: none;}
  • Elemento
  • Elemento
  • Elemento
  • Elemento
  • Elemento

Esempio 5.

cliccare per aprire e vedere il codice

<ul class="Menu">
  <li>Insalata</li>
  <li><span>"Greco"</span><em>320</em></li>
  <li><span>"Napoli"</span><em>430</em></li>
  <li><span>"Di olive"</span><em>300</em></li>
  <li><span>"Mista"</span><em>350</em></li>
  <li><span>"Frutti di mare"</span><em>450</em></li>
</ul>
.menu {
list-style: none;
padding: 0;
border: 1px solid rgba(0,0,0, .2);
}
.menu li {
overflow: hidden;
padding: 6px 10px;
font-size: 20px;
}
.menu li:first-child {
font-weight: bold;
padding: 15px 0 10px 15px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(0,0,0, .2);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
color: #679bb7;
font-size: 24px;
box-shadow: 0 10px 20px -5px rgba(0,0,0, .2);
}
.menu li:first-child:before {
content: "\2749";
margin-right: 10px;
}
.menu span {
float: left;
width: 75%;
color: #7C7D7F;
}
.menu em {
float: right;
color: #9c836e;
font-weight: bold;
}

A proposito, quando chiedete come modificare un tema Joomla o WP . Non dimenticate che qualsiasi menu sul vostro sito è un semplice elenco con dei elementi mesi in orizzontale o verticale come lo stiamo facendo noi. Quindi per modificare il vostro menu di Joomla o WP potrete semplicemente utilizzare il  foglio CSS da questo articolo e applicarlo tramite rispettive classi alle vostre voci del menu  tutto è  semplice. Come farlo nel nostro corso “CSS pratica

 animatedDude

video prevui

 

Esempio 6.

cliccare per aprire e vedere il codice

<ul class="dbl-border">
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
</ul>
.dbl-border {
list-style: none;
margin: 0;
}
.dbl-border li {
margin: 10px 0;
position: relative;
}
.dbl-border a {
width: 100%;
color: #808285;
text-decoration: none;
border-left: 6px solid #ABC7EA;
display: block;
padding-left: 25px;
height: 44px;
line-height: 44px;
font-size: 20px;
position: relative;
transition: 0.3s linear;
}
.dbl-border a:before {
content: "";
width: 6px;
height: 70%;
background: #EE997C;
position: absolute;
top: 15%;
left: -12px;
}
.dbl-border li:before {
content: "";
width: 6px;
height: 40%;
background: #EFDD89;
position: absolute;
top: 30%;
left: -12px;
}
.dbl-border a:hover {background: #D4D8D9;}

 

Esempio 7.

 

cliccare per aprire e vedere il codice

<ol class="ball">
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
</ol>
.ball {
list-style: none;
margin: 0;
}
.ball a {
width: 100%;
color: #808285;
text-decoration: none;
display: inline-block;
padding-left: 25px;
height: 44px;
line-height: 44px;
font-size: 20px;
position: relative;
transition: .3s linear;
}
.ball a:before {
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background: #425273;
position: absolute;
left: -30px;
top: 7px;
}
.ball li {position: relative;}
.ball li:before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background: #EC351D;
position: absolute;
top: 12px;
left: -30px;
z-index: 2;
transition: .4s ease-in-out;
}
.ball li:hover:before {left: -20px;}
  1. Elemento
  2. Elemento
  3. Elemento
  4. Elemento
  5. Elemento

 

Esempio 8.

 

cliccare per aprire e vedere il codice

<ul class="beads">
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
</ul>
.beads {
list-style: none;
background: #EEE3DB;
margin: 0;
padding-left: 40px;
border-radius: 5px;
}
.beads li {
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
line-height: 40px;
border-bottom: 1px solid #D4D7D6;
position: relative;
}
.beads a {
text-decoration: none;
color: #464643;
display: block;
line-height: 40px;
position: relative;
}
.beads a:before {
content:"";
position: absolute;
left: -20px;
top: 6px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #A58063;
}
.beads li:last-child {border-bottom: none;}
.beads li:before, 
.beads li:after {
content:"";
position: absolute;
border-radius: 50%;
}
.beads li:before {
top: calc(50% - 5px);
background: #E0926E;
left: -22px;
width: 10px;
height: 10px;
transition: 0.5s linear;
}
.beads li:after {
bottom: 6px;
left: -20px;
width: 6px;
height: 6px;
background: #A58063;
}
.beads li:hover:before {background: #FFCE08;}

 

Esempio 9.

 

cliccare per aprire e vedere il codice

<ul class="dotted">
<li><span>Napoletana</span><span>10 Euro</span></li>
<li><span>Al diavolo</span><span>11 Euro</span></li>
<li><span>Margerita</span><span>7 Euro</span></li>
<li><span>Coca Cola 0,25</span><span>2 euro</span></li>
<li><span>Cafe</span><span>1 Euro</span></li>
</ul>
.dotted {
list-style: none;
font-family: 'Marck Script', cursive;
}
.dotted li {
margin-bottom: 5px;
border-bottom: 2px #404B51 dotted;
font-size: 26px;
line-height: 1;
}
.dotted li span:nth-child(odd) {
padding-right: 6px; 
color: #404B51;
}
.dotted li span:nth-child(even) {
float: right; 
padding-left: 6px;
color: #35D1CE;
}
.dotted span {
background: white;
position: relative;
bottom: -7px;
}
  • Napoletana10 Euro
  • Al diavolo11 Euro
  • Margerita7 Euro
  • Coca Cola 0,252 euro
  • Cafe1 Euro

 

Esempio 10.

 

cliccare per aprire e vedere il codice

<ol class="bullet">
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
</ol>
.bullet {
margin-left: 0;
list-style: none;
counter-reset: li;
}
.bullet li {
position: relative;
margin-bottom: 1.5em;
border: 3px solid #CADFCF;
padding: 0.6em;
border-radius: 4px;
background: #FEFEFE;
color: #231F20;
font-family: "Trebuchet MS", "Lucida Sans";
}
.bullet li:before {
position: absolute;
top: -0.7em;
padding-left: 0.4em;
padding-right: 0.4em;
font-size: 16px;
font-weight: bold;
color: #DCC24B;
background: #FEFEFE;
border-radius: 50%;
counter-increment: li;
content: counter(li);
}

  1. Elemento
  2. Elemento
  3. Elemento
  4. Elemento
  5. Elemento

Esempio 11.

cliccare per aprire e vedere il codice

<ol class="pills">
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
</ol>
.pills {
  margin-left: 0;
  list-style: none;
  counter-reset: li;
  font-family: calibri;
}
.pills li {
  padding: 10px 0;
  position: relative;
  left: 1.5em;
  margin-bottom: 0.75em;
  padding-left: 1em;
  background: #E3DEDC;
}
.pills li:before {
  padding: 10px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.5em;
  width: 1.875em;
  text-align: center;
  color: white;
  font-weight: bold;
  background: #D66786;
  border-bottom-left-radius: 70em;
  border-top-left-radius: 70em;
  counter-increment: li;
  content: counter(li);
}
  1. Elemento
  2. Elemento
  3. Elemento
  4. Elemento
  5. Elemento

 

Esempio 12.

 

cliccare per aprire e vedere il codice

<ol class="square">
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
</ol>
.square {
  margin: 0;
  counter-reset: li;
  list-style: none;
  background:#E8E8E8;
  padding: 10px;
}
.square li {
  position: relative;
  margin: 0 0 10px 2em;
  padding: 4px 8px;
  border-top: 2px solid #787A77;
  transition: .3s linear;
}
.square li:last-child {margin-bottom: 0;}
.square li:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: -2px;
  left: -2em;
  width: 2em;
  box-sizing: border-box;
  margin-right: 8px;
  padding: 4px;
  border-top: 2px solid #787A77;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  background: #787A77;
  color: white;
  font-weight: bold;
  text-align: center;
  transition: .3s linear;
}
.square li:hover {border-top: 2px solid #389F70;}
.square li:hover:before {
  border: 2px solid #389F70;
  background: #98EABA;
}
  1. Elemento
  2. Elemento
  3. Elemento
  4. Elemento
  5. Elemento

Esempio 13. Lista alla Zebra.

cliccare per aprire e vedere il codice

<ul class="zebra">
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
</ul>
.zebra {
  list-style: none;
  border-left: 10px solid #FC7574;
  padding: 0;
  font-family: "Lucida Sans";
}
.zebra li {padding: 10px;}
.zebra li:nth-child(odd) {background: #E1F1FF;}
.zebra li:nth-child(even) {background: white;}
  • Elemento
  • Elemento
  • Elemento
  • Elemento
  • Elemento

 

Esempio 14.

 

cliccare per aprire e vedere il codice

<ul class="push">
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento</li>
</ul>
.push {
  list-style: none;
  font-family: "Lucida Sans";
}
.push li {
  position: relative;
  padding: 20px 0 20px 40px;
  color: #D29D25;
  font-variant: small-caps;
  font-weight: bold;
  cursor: pointer;
}
.push li:before {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4F5151;
  content: "";
  left: 0;
  transition: .3s ease-in-out;
  top: 27px;
}
.push li:after {
  position: absolute;
  border-left: 1px dotted #4F5151;
  width: 1px;
  bottom: -12px;
  content: "";
  left: 3px;
  top: 48px;
}
.push li:hover:before{box-shadow: 0 0 0 10px rgba(0,0,0,.2)}
.push li:last-child:after {content: none;}
  • Elemento
  • Elemento
  • Elemento
  • Elemento
  • Elemento

Esempio 15. Lista con definizione.

 

cliccare per aprire e vedere il codice

<dl class="holiday">
  <dt>1.04.15</dt>
    <dd>Giorno del papa</dd>
  <dt>4.04.15</dt>
    <dd>Giorno del webmaster</dd>
  <dt>5.04.15</dt>
    <dd>Giorno del ciclista</dd>
  <dt>7.04.15</dt>
    <dd>Compleano di Marta</dd>
</dl>
.holiday {
  overflow: hidden;
  font-size: 16px;
}
.holiday dt, .holiday dd {
  height: 2.5em;
  line-height: 2.5em;
  padding: 0 0.625em 0 0.875em;
  color: #4C565C;
  box-sizing: border-box;
}
dt {
  width: 30%;
  float: left;
  clear: right;
  background: #D3E6DD;
  font-weight: bold;
}
dd {
  width: 70%;
  float: right;
  margin-left: 0;
  margin-bottom: .3125em;
  border: 1px solid #BECFC7;
  border-left: none;
}
1.04.15
Giorno del papa
4.04.15
Giorno del webmaster
5.04.15
Giorno del ciclista
7.04.15
Compleano di Marta

 

Esempio 16. Stilizzazione della lista in versione retro.

 

cliccare per aprire e vedere il codice

<ul class="older">
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
</ul>
@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great|EB+Garamond);
.older {
  list-style: none;
  margin: 0 auto;
  width: 660px;
  counter-reset: li;
}
.older li {
  border-bottom: dashed 1px #006699;
  margin-top: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  padding: 5px;
}
.older a {
  text-decoration: none;
  padding: 10px;
  display: block;
  line-height: 30px;
  color: #3A3A3A;
  font-family: 'EB Garamond', serif;
  font-size: 20px;
}
.older a:before {
  display: inline-block;
  content: counter(li);
  counter-increment: li;
  height: 30px;
  width: 30px;
  text-align: center;
  border: solid 1px #dedede;
  margin-right: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
  font-family: 'Fredericka the Great', cursive;
  font-size: 24px;
  -webkit-transition: .4s linear;
  transition: .4s linear;
}
.older a:hover:before {
  color:#D72F2C;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Esempio 17.

 

cliccare per aprire e vedere il codice

<ul class="category-list">
  <li><a href="/">Video</a><span>5</span></li>
  <li><a href="/">Fotoshop</a><span>3</span></li>
  <li><a href="/">Design</a><span>2</span></li>
  <li><a href="/">Viago</a><span>2</span></li>
  <li><a href="/">Musica</a><span>2</span></li>
</ul>
.category-list * {transition: .4s linear;}
.category-list {
  background: white;
  list-style-type: circle;
  list-style-position: inside;
  padding: 0 10px;
  margin: 0;
}
.category-list li {
  font-family: "Trebuchet MS", "Lucida Sans";
  border-bottom: 1px solid #efefef;
  padding: 10px 0;
}
.category-list a {
  text-decoration: none;
  color: #555;
}
.category-list li span {
  float: right;
  display: inline-block;
  border: 1px solid #efefef;
  padding: 0 5px;
  font-size: 13px;
  color: #999;
}
.category-list li:hover a {color: #c93961;}
.category-list li:hover span {
  color: #c93961;
  border: 1px solid #c93961;
}

 

Letto 975 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso