Trình bày sản phẩm nhiều chi tiết với CSS3 và jQuery
Đăng nhập | Đăng ký 

Học lập trình | Kiếm tiền Online | SEO website

Chia sẻ kiến thức IT

loading
Trang chủ / Lập trình / Css / Trình bày sản phẩm nhiều chi tiết với CSS3 và jQuery

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

by


Đã đế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.

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

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>
                    <!-- item image -->
                    <div class="item-img">
                        <img src="images/shoe.jpg" width="260" height="260" />
                    </div>
                    <!-- end item image -->
                    <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>
                <!-- Social icons -->
                <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>
                <!-- end social icons -->
 </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{
  width: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;
  width: 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;
  width: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);
  width: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-width:1px;
  padding-top:10px;
}



/* Buttons */
.item-button{
  border-radius:3px;
  width: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-width: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{
  width: 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{
  width:70%;
  float:left;
}
.item-product-price{
  width: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-width:1px;
  margin-top:-11px;
  width: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;
  width: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-width: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:

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

Xin chào, diendanhocweb.com là nơi mình sẽ chia sẻ những thủ thuật, kiến thức về website mà mình tìm hiểu được. Hy vọng, nó sẽ giúp ích cho mọi người.

Tìm kiếm phổ biến

Giới thiệu

Diendanhocweb.com là trang blog chia sẻ kiến thức tâm đắc của nhiều lập trình viên Việt Nam đến từ các trường đại học TOP đầu về IT. Nơi chia sẻ thủ thuật thiết kế web – Sửa lỗi website -  thủ thuật SEO – thủ thuật Lập trình – Đồ họa – Hosting/Server - Kiến tiền Online và các bài học trực tuyến qua Video. Mỗi ngày chúng tôi luôn dành thời gian chia sẻ kiến thức trên cộng đồng. Chúng tôi hy vọng những chia sẻ kiến thức của mình sẽ giúp cho bạn đọc có thể tiếp cận được các thông tin về học lập trình Website, thiết kế Website, kiếm tiền Online và SEO Website. Nếu bạn mong muốn làm tác giả cho 1 khoá học nào về lập trình vui lòng gửi vào email : contact@diendanhocweb.com

Liên kết nhanh

Facebook

Thiết kế website chuyên nghiệp, chuẩn SEO, giá tốt - Igitech.vn
Liên hệ với chúng tôi