Trình bày sản phẩm nhiều chi tiết với CSS3 và jQuery

Đã đến lúc các bạn thiết kế lại những trang bán hàng quá cũ kỹ cho khách hàng của mình. Trong bài viết này, mình sẽ chia sẻ cho các bạn một mẫu sắp đặt chi tiết sản phẩm cùng với khả năng chia sẻ sản phẩm đó trên mạng xã hội ngay lập tức chỉ với vài cú click chuột. Và hơn hết là các bạn sẽ học thêm rất rất nhiều về cách sử dụng CSS cho những thiết kế sáng tạo của các bạn sau này.

Xem Demo | Download

HTML

Đầu tiên, các bạn chèn thư viện font để tạo icon.

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

Và đoạn html dưới đây tổng hợp các chi tiết mà một sản phẩm thường có.

<div class="container-item">
                <div class="item">
                    <div class="item-overlay">
                        <a href="#" class="item-button info"><i class="fa fa-info"></i></a>
                        <a href="#" class="item-button share share-btn">
                            <i class="fa fa-share-alt"></i></a>
                        <div class="sale-tag"><span>SALE</span></div>
                    </div>
                     
                    <div class="item-img">
                        <img src="images/shoe.jpg" awidth="260" height="260" />
                    </div>
                     
                    <div class="item-content">
                        <div class="item-top-content">
                            <div class="item-top-content-inner">
                                <div class="item-product">

                                    <div class="item-top-title">
                                        <h2>Ipath lowrunner</h2>
                                        <p class="subdescription">
                                            Low skateshoes - Grey
                                        </p>
                                    </div>
                                </div>
                                <div class="item-product-price">
                                    <span class="price-num">$17</span>
                                    <p class="subdescription">$36</p>
                                    <div class="old-price"></div>
                                </div>
                            </div>  
                        </div>
                        <div class="item-add-content">
                            <div class="item-add-content-inner">
                                <div class="section">
                                    <h4>Sizes</h4>
                                    <p>40,41,42,43,44,45</p>
                                </div> 
                                <div class="section">
                                    <a href="#" class="btn buy expand">Buy now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                 
                <div class="item-menu popout-menu">
                    <ul>
                        <li><a href="#" class="popout-menu-item"> <i class="fa fa-twitter"></i></a></li>
                        <li><a href="#" class="popout-menu-item"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#" class="popout-menu-item"> <i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#" class="popout-menu-item"> <i class="fa fa-tumblr"></i></a></li>
                        <li><a href="#" class="popout-menu-item"> <i class="fa fa-envelope"></i></a></li>
                    </ul>
                </div>
                 
 </div>

Mình có ghi lại ghi chú của từng mục rất tiện cho các bạn tham khảo.

CSS

Và đây là toàn bộ đoạn css giúp các bạn sắp xếp những thông tin theo trình tự.

/* Actual content */
.container-item{
  position: relative;
  margin-top:40px;
  float:left;
  margin-right:50px;
}

.item{
  awidth:260px;
  height:260px;
  position: relative;
  top:0;
  left:0;
  z-index:5;
  overflow: hidden;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
          box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.item-img{
  z-index: -99999;
}

.item-overlay{
  position: absolute;
  top: 0;
  left: 0;
  awidth: 100%;
  height: 100%;
  border-radius: 3px;
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */

  -webkit-transition: background-color 0.3s ease-in-out;
     -moz-transition: background-color 0.3s ease-in-out;
      -ms-transition: background-color 0.3s ease-in-out;
       -o-transition: background-color 0.3s ease-in-out;
          transition: background-color 0.3s ease-in-out;
}
.item:hover .item-overlay{
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */
  background-color: rgba(0,0,0,0.4);
}
.item-content{
  position: absolute;
  awidth:100%;
  bottom: 0;
  -webkit-transform: translate(0,100%);
     -moz-transform: translate(0,100%);
      -ms-transform: translate(0,100%);
       -o-transform: translate(0,100%);
          transform: translate(0,100%);
  
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  
}
.item:hover .item-content{
  -webkit-transform: translate(0,0);
     -moz-transform: translate(0,0);
      -ms-transform: translate(0,0);
       -o-transform: translate(0,0);
          transform: translate(0,0);
      
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}

.item-top-content{
  position: relative;
}
.item-top-content-inner{
  position: absolute;
  bottom: 0;
  padding:10px 15px 10px 15px;
  background: rgba(255,255,255,.85);
  awidth:100%;
}
.item-add-content{
  padding:0 15px 15px 15px;
  opacity:0;
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}
.item:hover .item-add-content{
  opacity:1
}
.item-add-content-inner{
  border:0px solid #dadada;
  border-top-awidth:1px;
  padding-top:10px;
}



/* Buttons */
.item-button{
  border-radius:3px;
  awidth:30px;
  height:30px;
}
.item-button.info{
  background-color:#40c781;
  position: absolute;
  top: 15px;
  left: 15px;
  opacity:0;
  color:#fff;
  padding:5px 0 0 12px;
  
}
.item-button.info:hover{
  background-color:#34a46c;
  }
.container-item:hover .item-button.info{
  opacity:1;
}

.item-button.share{
  background-color:#4f4f4f;
  position: absolute;
  top: 50px;
  left: 15px;
  opacity:0;
  color:#fff;
  padding:5px 0 0 7px;
}
.item-button.share:hover{
  background-color:#333333;
  cursor:pointer;
  }
.container-item:hover .item-button.share{
  opacity:1;
}
.btn.buy{
  background-color: #40c781;
  text-align:center;
  line-height:42px;
  font-weight:700;
  color:#fff;
  border-radius:3px;
  text-decoration:none;
  opacity:1;
  border:0px solid #35a76e;
  border-bottom-awidth:2px;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
.btn.buy:hover{
  background-color:#34a46c;
}
.expand{
  display:block;
}

/* Tags */
.sale-tag{
  awidth: 50px;
  height: 100px;
  background: #40c781;
  position: absolute;
  top:-45px;
  right:-10px;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.sale-tag span{
  position:absolute;
  top:48px;
  left:2px;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  font-size:11px;
  color:#fff;
}

/* content */

.item-product{
  awidth:70%;
  float:left;
}
.item-product-price{
  awidth:30%;
  float:right;
  text-align: right;
}
/* Style / Theming */

body{
  /* IE10 Consumer Preview */ 
  background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #E3E3E3 100%);

  /* Mozilla Firefox */ 
  background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #E3E3E3 100%);

  /* Opera */ 
  background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #E3E3E3 100%);

  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, #FFFFFF), color-stop(1, #E3E3E3));

  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #E3E3E3 100%);

  /* W3C Markup, IE10 Release Preview */ 
  background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #E3E3E3 100%);
}

/*Prduct title*/
h2{
  font-size:1em;
  font-weight:400;
  color:#222;
}

.subdescription{
  font-family: 'helvetica neue';
  font-size:0.8em;
  font-weight:400;
  color:#7d7d7d;
}

/*product price*/
.item-product-price{
  color:#40c781;
  font-size:1em;
  font-weight:700;
  position:relative;
  font-family:'helvetica neue'
}
.item-product-price .subdescription{
  color:#7d7d7d;
}
.old-price{
  border:0 solid #7d7d7d;
  border-bottom-awidth:1px;
  margin-top:-11px;
  awidth:30px;
  position:absolute;
  right:-2px;
  bottom:10px;
  -webkit-transform: rotate(-30deg);
     -moz-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
       -o-transform: rotate(-30deg);
          transform: rotate(-30deg);
}

.item-content{
  background: rgba(255,255,255,.85);
}
.item-add-content{
  font-family: 'Lato', sans-serif;
  font-weight:400;
  color:#7d7d7d;
}
.item-add-content .section{
  margin-bottom:5px;
}
.item-add-content .section:last-of-type{
  margin-bottom:0;
}
.item-add-content h4{
  font-weight:600;
  color:#222;
  font-size:0.8em;
}
.item-add-content p{
  font-size:0.8em;
}


/* Item menu */
.item-menu{
  position: absolute;
  top:3px;
  left:30px;
  height:254px;
  awidth:50px;
  border-radius:3px 0 0 3px;
  background:#4f4f4f;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
          box-shadow: 0 1px 5px rgba(0,0,0,0.3);
  -webkit-transform: translate(0,0);
     -moz-transform: translate(0,0);
      -ms-transform: translate(0,0);
       -o-transform: translate(0,0);
          transform: translate(0,0);
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;  
}
.item-menu.visible{
  -webkit-transform: translate(-70px,0);
     -moz-transform: translate(-70px,0);
      -ms-transform: translate(-70px,0);
       -o-transform: translate(-70px,0);
          transform: translate(-70px,0);
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}
.item-menu:hover{
  -webkit-transform: translate(-70px,0);
     -moz-transform: translate(-70px,0);
      -ms-transform: translate(-70px,0);
       -o-transform: translate(-70px,0);
          transform: translate(-70px,0);
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
    
}
/*List*/
.popout-menu ul{
  list-style-type:none;
}
.popout-menu ul li{
  -webkit-box-shadow: inset 0px 1px rgba(255,255,255,0.1);
          box-shadow: inset 0px 1px rgba(255,255,255,0.1);
  border-bottom:1px solid #434343;
}
.popout-menu ul li:first-of-type{
  -webkit-border-radius: 3px 0;
          border-radius: 3px 0;
}
.popout-menu ul li:last-of-type{
  border-bottom-awidth:0px;
}
.popout-menu ul li:hover{
  background:#434343;
}
.popout-menu ul li a{
  color:#eaeaea;
  font-weight:600;
  font-size:0.8em;
  text-decoration:none;
  line-height: 36px;
  padding:0 15px;
  display:block;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  cursor:pointer;
}

jQuery

Và đừng quên chèn thêm đoạn script đưới đây để nút chia sẻ mạng xã hội có thể hoạt động.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
    
<script type="text/javascript">
   $(document).ready(function() {

        $(".share-btn").mouseenter(function() {

            // find the closest class .item-menu
            
            $(this).closest("div.container-item").find(".item-menu").addClass("visible")
        });
        $(".share-btn").mouseleave(function() {
            setTimeout(function() {
            $(".item-menu").removeClass("visible")
            }, 500);
        });

        

        $(".container-item").hover(function() {
            setTimeout(function() {
            $(".container-item").css("z-index","1000")
            }, 500);
        });


});

</script>   

Mình mong là các bạn sẽ áp dụng ngay mẫu thiết kế này cho những trang bán hàng của các bạn. Và đừng quên chia sẻ bài viết cho bạn bè của mình nhé.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster