Come presentare al meglio un prodotto in un negozio online

Oggi vediamo altri due possibilità di presentare al meglio il nostro prodotto in un negozio online. Vorei aggiungere che per questi esempi stiamo utilizzando font-family: "FontAwesome", per realizzazine di  varie icone tipo carrello, aggiungere ai preferiti e cosi via.

Quindi per poter copiare e realizzare la stessa cosa sulla vostra pagina dovete prima di tutto scaricare questo font e collegarlo alla vostra pagina o sito web. Se per esempio state utilizzando joomla potrebbe essere che esso sia stato gia aggiunto. Basta verificare il codice sorgente della pagina,

cliccando con il tasto destro sulla vostra pagina  nel browser e scegliere vedere il codice sorgente della pagina. Puoi abbiamo utilizzato anche  pseudo calasse del CSS  :hover per realizzare lo stato al passaggio del mouse. Abbiamo toccato questo argomento anche nel nostro corso dedicato al CSS, video corso CCS, e CSS pratica. Ed in oltre proprietà transform di qui nelle lezioni precedenti e transition.

Un modo migliore per visualizzare un prodotto in un negozio online.
markup HTML

<ul class="product-wrap">
  <li>
    <div class="product-item">
      <img src="/black-dress.jpg">
      <div class="product-buttons">
        <div class="info">
          <a href="/" class="button">
            <i class="fa fa-shopping-cart"></i>al carrello </a>
        </div>
      </div>
    </div>
    <h3 class="product-title"><a href="/">Piccolo vestito nero</a></h3>
    <span class="product-price">22 Euro</span>
  </li>
</ul>

Stili CSS
* {
  box-sizing: border-box;
}
.product-wrap {
  width: 300px;
  margin: 0 auto;
  background: white;
  padding: 0 0 20px;
  list-style: none;
}
.product-wrap li {
  position: relative;
}
.product-item {
  position: relative;
  overflow: hidden;
}
.product-wrap img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}
.product-buttons {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .8);
  opacity: 0;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.info {
  position: relative;
  top: calc(50% - 20px);
}
.button {
  font-family: Lora;
  width: 140px;
  height: 40px;
  line-height: 35px;
  display: block;
  border: 2px solid #c0a97a;
  margin: 0 auto;
  font-size: 12px;
  color: #c0a97a;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.product-title {
  color: #5e5e5e;
  text-align: center;
  font-size: 14px;
  font-family: Lora;
}
.product-title a {
  text-decoration: none;
  color: #2e2e2e;
  text-transform: uppercase;
  font-weight: 600;
  margin: 15px 0 5px;
  padding-bottom: 5px;
  display: block;
  position: relative;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.product-title a:after{    
  content: "";
  position: absolute;
  width: 40px;
  height: 2px;
  background: #2e2e2e;
  left: 50%;
  margin-left: -20px;
  bottom: 0;
}
.product-title a:hover {
  color: #c0a97a;
}
.product-price {
  font-size: 15px;
  color: #c0a97a;
  font-weight: 700;
  text-align: center;
  display: block;
  margin-bottom: .5em;
}
.product-item:hover .product-buttons {
  opacity: 1;
}
.product-item:hover .info >.button {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform:scale(1);
  transform: scale(1);
}
.info:hover .button {
  background: black;
}
.button .fa {
  margin: 0 16px;
}

Esempio 4

Vediamo subito la struttura html

<div class="product-inner">
  <div class="product-wrap">
    <img src="/black-dress.jpg">
    <div class="actions">
      <a href="/" class="add-to-cart"></a>
      <a href="/" class="quickview"></a>
      <a href="/" class="wishlist"></a>
  </div>
  </div>
  <div class="product-info">
    <h3 class="product-title"><a href="/">Piccolo vestito nero</a></h3>
    <span class="price">22 Euro</span>
  </div>
</div>

E dai fogli di stili CSS il codice

*{
 box-sizing: border-box;
}
.product-inner {
  width: 300px;
  margin: 0 auto;
  background: white;
  position: relative;
  border-bottom: 2px solid #ebebec;  
}
.product-wrap {
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
}
.product-wrap img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}
.actions {
  position: absolute;
  left: 0;
  bottom: -20%;
  z-index: 100;
  width: 100%;
  background: rgba(59,62,67,0.75);
  -webkit-transition: .4s linear;
  transition: .4s linear;
}
.actions a {
  display: block;
  float: left;
  width: 33.33333333333333%;
  text-decoration: none;
  position: relative;
  color: white;
  padding: 15px 0;
  text-align: center;
  -webkit-transition: .4s linear;
  transition: .4s linear;
}
.actions a:hover {
  background: rgba(59,62,67,0.85);
}
.actions a:before {
  position: relative;
  display: inline-block;
  font-family: "FontAwesome";
  line-height: 1;
}
.product-inner:hover {
  border-bottom: 2px solid #bca480;
}
.product-inner:hover .actions {
  bottom: 0;
}
.add-to-cart:before {
  content: "\f07a"; // dal font FontAwesome il numero del <em>Glyphicon</em> con disegno di carrello
}
.quickview:before {
  content: "\f002";
}
.wishlist:before {
  content: "\f08a";
}
.product-info{
  padding-bottom: 10px;
  text-align: center;
  font-family: 'Noto Sans', sans-serif;
}
.product-title2 {
  margin: 0;
}
.product-title a {
  text-decoration: none;
  color: #1e1e1e;
  font-weight: 400;
  font-size: 16px;
}
.price {
  display: block;
  font-weight: 700;
  color: #bca480;
  margin-top: 10px;
}

Puoi cambiare l'altezza e tipo del font utilizzati per le scritte tipo prezzo o il nome del articolo, come farlo puoi scoprire nei nostri corsi dedicati a CSS

Letto 687 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