Hướng dẫn tạo trang giới thiệu sản phẩm ấn tượng với CSS3

Hướng dẫn tạo trang giới thiệu sản phẩm ấn tượng với CSS3
     

Tài liệu thiết kế web về cách tạo ra trang giới thiệu sản phẩm ấn tượng với CSS3

Một trang giới thiệu sản phẩm là một trang trên thiết kế web có nội dung giới thiệu các sản phẩm của công ty, đi kèm với các mô tả tính năng, nhận xét hay một số hình ảnh. Tạp chí thiết kế web xin được chia sẻ một tài liệu thiết kế web về cách tạo ra trang giới thiệu sản phẩm ấn tượng với CSS3.


Một trang giới thiệu sản phẩm là một trang trên thiết kế web có nội dung giới thiệu các sản phẩm của công ty, đi kèm với các mô tả tính năng, nhận xét hay một số hình ảnh. Tạp chí thiết kế web xin được chia sẻ một tài liệu thiết kế web về cách tạo ra trang giới thiệu sản phẩm ấn tượng với CSS3.

huong dan tao trang web an tuong voi css3
Hướng dẫn tạo trang giới thiệu sản phẩm ấn tượng với CSS3

Trang giới thiệu sản phẩm có vai trò quan trọng trong việc thu hút cũng như tạo ấn tượng với khách hàng, tuy nhiên với việc cập nhật hàng trăm [website] hàng ngày, người dùng cảm thấy nhàm chán với các trang giới thiệu sản phẩm chung chung. Vậy làm sao để có thể tạo ấn tượng được với khách hàng của mình thông qua trang giới thiệu sản phẩm? Một thư viện [Javascript] nhỏ gọn sẽ giúp bạn thực hiện điều này.

impress.js là một thư viện độc lập làm cho nó dễ dàng để thiết kế một trang trình chiếu bằng CSS3 tiên tiến với những hiệu ứng đẹp mắt. Và dưới đây là điều chúng ta sẽ làm đối với trang giới thiệu sản phẩm bằng một chút phép thuật nho nhỏ từ [CSS3].

[HTML]

Chúng ta hãy bắt đầu với một tài liệu HTML5 đơn giản dưới đây

index.html


Div #impress giữ slide, điều này được yêu cầu để có thể sử dụng impress.js. Trên trang, chúng ta cũng có cả mã nguồn JavaScrip, tuy impress.js không cần đến jQuery để làm việc nhưng chúng ta cần nó để xử lý các lần nhấn chuột vào mũi tên trên slide.

xem demo
Xem demo về trang giới thiệu sản phẩm bằng CSS3 
http://demo.tutorialzine.com/2012/02/css3-product-showcase/ 

Mỗi trang trình bày bao gồm 3 yếu tố: tiêu đề, đoạn văn bản, hình ảnh. Trên hình là những vị trí dành riêng cho chúng. Những hình ảnh trong ví dụ này được lấy trên trang Galaxy Nexus của Google. Xem thêm: http://www.google.com/nexus/

Các phần tử của slide được nhóm lại thành từng “step” div bên trong #impress. Chúng ta chuẩn bị tất cả những thứ này là để dành cho impress.js.

impress.js

Với thư viện nhỏ này, chúng ta có thể tạo ra quá trình chuyển đổi CSS3 “mượt mà” giữa những slide trình bày sản phẩm. Để làm được điều này, chúng ta cần khai báo các định hướng slide cho impress.js. Đó là lý do mà chúng tôi nhóm các thuộc tính vào các “step” div khác nhau. Những thuộc tính này chuyển thành các biến đổi CSS3 dựa trên bộ thư viện, tùy thuộc vào trình duyệt được sử dụng mà hiệu ứng của slide cũng bị ảnh hưởng.

Impress.js hỗ trợ một số thuộc tính:
xem demo
Xem demo về trang giới thiệu sản phẩm bằng CSS3 
http://demo.tutorialzine.com/2012/02/css3-product-showcase/ 

- data-x, data-y, data-z sẽ di chuyển slide trong không gian 3 chiều.

- data-rotate, data-rotate-x, data-rotate-y: yếu tố xung quanh các trục chính chỉ định (tính bằng độ)

- data-scale: thay đổi kích thước các slide.


Các bạn có thể xem cách nó được sử dụng ở dưới đây:


- data-x, data-y, data-z sẽ di chuyển slide trong không gian 3 chiều.

- data-rotate, data-rotate-x, data-rotate-y: yếu tố xung quanh các trục chính chỉ định (tính bằng độ)

- data-scale: thay đổi kích thước các slide.

Các bạn có thể xem cách nó được sử dụng ở dưới đây:


Android 4.0
Super Amoled 720p Screen
< img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />

Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..

Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing..

Your photos upload themselves with Instant Upload, which makes ..

Google Music makes discovery, purchase, and listening effortless and..

Khi bắt đầu trình chiếu, impress.js sẽ bù đắp vào những chuyển đổi cũng như sử dụng các luật đối với #impress div khiến hiệu ứng biến đổi bằng CSS3 được mượt mà. Tất nhiên là điều này còn phụ thuộc bạn tinh chỉnh các thuộc tính của mỗi slide như thế nào để đạt được kết quả tốt nhất.

CSS

Để thực hiện việc trình chiếu, chúng ta cần áp dụng một số luật trong CSS. Bước đầu tiên là tạo phong cách trình chiếu cho container cũng như thiết lập phong cách mặc định cho các phần tử slide.

assets/css/style.css

/*----------------------------      Styling the presentation  -----------------------------*/    #impress:not(.impress-not-supported) .step{      opacity:0.4;  }    #impress .step{      width:700px;      height: 600px;      position:relative;      margin:0 auto;        -moz-transition:1s opacity;      -webkit-transition:1s opacity;      transition:1s opacity;  }    #impress .step.active{      opacity:1;  }    #impress h2{      font: normal 44px/1.5 'PT Sans Narrow', sans-serif;      color:#444648;      position:absolute;      z-index:10;  }    #impress p{      font: normal 18px/1.3 'Open Sans', sans-serif;      color:#27333f;      position:absolute;      z-index:10;  }    #impress img{      position:absolute;      z-index:1;  }  
Như bạn có thể thấy trong các quy tắc trên, và trong đoạn mã HTML ban đầu. Phần tử #impress chỉ là một lớp .impress-not-supported. Lớp này chỉ được loại bỏ khi trình duyệt hỗ trợ các thư viện này và có thể chạy thành công.

Bây giờ chúng ta cần phải tạo style cho các slide cá nhân. Ở đây sẽ chỉ tạo các lớp cho slide đầu tiên, bạn có thể tìm thấy các phần còn lại trong assets/css/styles.css

/*----------------------------      Slide 1 - Intro  -----------------------------*/    #impress #intro{      width: 500px;  }    #intro h2{      text-align: center;      width: 100%;  }    #intro p{      font-size: 22px;      left: 290px;      line-height: 1.6;      top: 220px;      white-space: nowrap;  }    #intro img{      top: 120px;  }  
jQuery

Để khởi tạo một thư viện của impress.js, chúng ta cần phải gọi các phương thức cùng tên. Điều này tất nhiên là sẽ trả về một đối tượng mới là các phương thức để hiển thị các trang slide trước/sau.

script.js

$(function(){        var imp = impress();        $('#arrowLeft').click(function(e){          imp.prev();          e.preventDefault();      });        $('#arrowRight').click(function(e){          imp.next();          e.preventDefault();      });    });  
Hoàn thành!

Kết luận

Bạn có thể sử dụng ví dụ này để xây dựng một trang sản phẩm, landing page, trưng bày tính năng hay thậm chí là trang thư viện hình ảnh. Tất cả sẽ rất ấn tượng và thu hút. Hy vọng tài liệu hướng dẫn thiết kế web trên sẽ hữu ích cho bạn. 

Như bạn có thể thấy trong các quy tắc trên, và trong đoạn mã HTML ban đầu. Phần tử #impress chỉ là một lớp .impress-not-supported. Lớp này chỉ được loại bỏ khi trình duyệt hỗ trợ các thư viện này và có thể chạy thành công.

Bây giờ chúng ta cần phải tạo style cho các slide cá nhân. Ở đây sẽ chỉ tạo các lớp cho slide đầu tiên, bạn có thể tìm thấy các phần còn lại trong assets/css/styles.css

jQuery

Để khởi tạo một thư viện của impress.js, chúng ta cần phải gọi các phương thức cùng tên. Điều này tất nhiên là sẽ trả về một đối tượng mới là các phương thức để hiển thị các trang slide trước/sau.

script.js

Hoàn thành!

Kết luận

Bạn có thể sử dụng ví dụ này để xây dựng một trang sản phẩm, landing page, trưng bày tính năng hay thậm chí là trang thư viện hình ảnh. Tất cả sẽ rất ấn tượng và thu hút. Hy vọng tài liệu hướng dẫn thiết kế web trên sẽ hữu ích cho bạn.