HTML - CSS - Javascript

Hướng dẫn tạo chia sẻ mạng xã hội có cửa sổ đóng mở

Trong bài này, mình sẽ hướng dẫn các bạn dùng javascript, css, html để tạo một bộ chia sẻ mạng xã hội có cửa sổ đóng mở.

Bài này có 2 phần:

- Vẽ HTML hiển thị
- Style CSS cho cửa sổ đóng mở
- Thư viện javascript sharethis.js

Giờ chúng ta cùng bắt đầu nhé:

HTML code:
<div class="button-frame">
  <div class="share">    
      <span class='st_twitter_hcount' displayText='Tweet'></span>
  </div>
  <input id="twitter" type="checkbox">
  <label for="twitter"><img src="twitter.png" alt=""></label>
</div>
CSS style cho phần button frame và label:
.button-frame {
  display: inline-block;
  text-align: center;
  background-color: #F2F2F2;
  border: 1px solid #E1E1E5;
  height: 72px;
  -webkit-perspective: 500px;
  -ms-perspective: 500px;
  perspective: 500px;
  position: relative;
  width: 144px;
}

.button-frame input {
  display: none;
}

.button-frame label {
  -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
  background-color: green;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transform-origin: center bottom 0;
  -ms-transform-origin: center bottom 0;
  transform-origin: center bottom 0;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  z-index: 999; //Đề phòng tweeter nó đè lên label.
}

.button-frame label img {
  display: block;
}

.button-frame input:checked + label {
  -webkit-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
Vậy là các bạn đã hoàn thành xong phần vẽ và style. Tiếp theo chúng ta cần include thư viện sharethis vào html. Phần này trong <head></head> các bạn thêm include thư viện như sau:

<head>
   <script src="http://baobinh.net/js/sharethis.js"></script>
</head>
Vậy là các bạn đã hoàn thành xong, và sẽ có kết quả như sau:



Bản full sau khi hoàn thiện của facebook, tweeter, google plus:



Pass giải nén: baobinh.net

Link download source code full: Tại đây

Link xem demo: Tại đây
  • Posted by
  • 2015-09-01 14:59:56