2 Semplici e pratiche liste CSS

Le liste sono fondamentali per ogni tipo di pagina web. In questo caso vi proponiamo alcuni esempi di liste verticali. La grafica adottata è minimale, tuttavia vi sono delle finezze di stile molto interessanti.

HelvetList

In questa lista si impone forte la bellezza della tipografia. Si farà uso di alcuni stili Helvetica con animazione al passaggio del mouse.

Demo: Troverai la demo ed il codice su CodePen.

HTML

L’html è molto semplice, si tratta di una lista con elementi <ul> e <li>, dove all’interno sono presenti testi con relativo link correlato <a>.

<div>
  <h2>HelvetiList</h2>
  <ul>
    <li><a href="#">Zurich</a></li>
    <li><a href="#">Geneva</a></li>
    <li><a href="#">Winterthur</a></li>
    <li><a href="#">Lausanne</a></li>
    <li><a href="#">Lucerne</a></li>
  </ul>
</div>

CSS

fdgertg

div {
  width: 200px;
}

h2 {
  font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}

li:last-child {
  border: none;
}

li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 200px;

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

li a:hover {
  font-size: 30px;
  background: #f6f6f6;
}

Thumbnail List

Ecco invece una configurazione base di lista con testo ed immagine.

Demo: Troverai la demo ed il codice su CodePen.

HTML

evrfev

<div>
  <ul>
    <li>
      <img src="http://lorempixum.com/100/100/nature/1" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/2" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/3" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/4" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
  </ul>
</div>

CSS

* {margin: 0; padding: 0;}

div {
  margin: 20px;
}

ul {
  list-style-type: none;
  width: 500px;
}

h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}

li img {
  float: left;
  margin: 0 15px 0 0;
}

li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}

li {
  padding: 10px;
  overflow: auto;
}

li:hover {
  background: #eee;
  cursor: pointer;
}

Conclusione

Per chi ha seguito questo articolo, ora ci saranno a sua disposizione codici HTML e CSS da poter utilizzare come base per i lavori futuri.

Se avete creato qualcosa di vostro, fatecelo sapere tramite il modulo commenti posto in fondo alla pagina.