Tạo sticky-notes trên website thật đơn giản

09/07/2014
1982
0

Sticky notes là một tính năng khá thú vị trong hệ điều hành win 7 trở lên. Vậy tại sao bạn không đem ứng dụng này lên cho website của mình.

1. HTML VÀ HÌNH VUÔNG CƠ BẢN

Hãy bắt đầu với phiên bản đơn giản nhất, có thể chạy trên tất cả các trinh duyệt. Ngoài việc sử dụng HTML5 để tăng hiệu ứng, cơ bản về HTML ứng dụng ghi chú của chúng ta là một danh sách không có thứ tự chứa tất cả các thành phần trong mỗi mục.

<ul>
  <li>
    <a href="#">
      <h2>Title #1</h2>
      <p>Text Content #1</p>
    </a>
  </li>
  <li>
    <a href="#">
      <h2>Title #2</h2>
      <p>Text Content #2</p>
    </a>
  </li>
  […]
</ul>

Chú ý rằng mỗi ghi chú được bao quanh bởi một liên kết luôn là yếu tốt bởi vì nó có thể truy cập tự động bởi bàn phím. Nếu chúng ta muốn sử dụng danh sách một cách hiệu quả thì chúng ta cần phải thiết lập một tabindex property để lấy các truy cập giống nhau.

Về CSS để biến ghi chú của chúng ta thành màu vàng thì quá đơn giản.

*{
  margin:0;
  padding:0;
}
body{
  font-family:arial,sans-serif;
  font-size:100%;
  margin:3em;
  background:#666;
  color:#fff;
}
h2,p{
  font-size:100%;
  font-weight:normal;
}
ul,li{
  list-style:none;
}
ul{
  overflow:hidden;
  padding:3em;
}
ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;
}
ul li{
  margin:1em;
  float:left;
}

Chúng ta cần thực hiện kĩ thuật reset CSS để lấy được chỉ số margin và padding giống nhau trên mọi trình duyệt, bạn có thể xem thêm tại: Series 5 file reset css cực kì quan trọng dành cho thiết kế web

Sau đóm chúng ta thiết lập padding cho các phần tử được hiển thị và thiết lập thuộc tính overflow của nó ở dạng ẩn, điều này đảm bảo khi chúng ta sử dụng float thì danh sách sẽ được tự động thiết lập và tránh bị tràn ra khỏi contained.

Chúng tôi thiết kế các liên kết là một hình chữ nhật màu vàng nổi float sang trái. Kết quả là một loạt các hộp màu vàng trong danh sách:

step1

Điều này làm việc trên mọi trình duyệt, kể cả IE6. Đây cũng là nơi chúng ta thực hiện việc hỗ trợ mọi trình duyệt. Đặt một công nghệ hiện đại vào một trình duyệt lỗi thời.

BƯỚC 2: ĐỔ BÓNG VÀ PHÔNG CHỮ

Bây giờ là lúc làm cho ghi chú của chúng ta trở nên nổi bật cũng như sử dụng phông chữ viết tay như một kiểu lưu ý dành cho người dùng. Để làm được điều này, chúng tôi sử dụng Google Fonts API, cụ thể là "Reenie Beanie". Cách đơn giản nhất là sử dụng Google font previewer:

googlefontpreviewer

Sử dụng ứng dụng này, chúng ta có thể thêm phông chữ vào trang web một cách nhanh chóng cũng như nó hỗ trợ tất cả các trình duyệt hiện tại.

1

2

3

4

<link  href="http://fonts.googleapis.com/css?
family=Reenie+Beanie:regular" 
rel="stylesheet"
type="text/css">

Chúng ta có thể đặt một tí padding cho tiêu đề của ghi chú, và đặt phông chữ theo phông chữ chúng ta vừa thêm vào site. Nói trước là phông Reenie Beanie cần phải to để có thể đọc dễ dàng.

ul li h2{
  font-size:140%;
  font-weight:bold;
  padding-bottom:10px;
}
ul li p{
  font-family:"Reenie Beanie",arial,sans-serif;
  font-size:180%;
}

Để làm nổi bật ghi chú bằng việc đổ bóng, ta cần áp dụng box-shadow. Đối với cái này, chúng ta nên thêm một dòng cho mỗi trình duyệt để chúng có khả năng hiển thị cao nhất đối với style của liên kết.

ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;
  /* Firefox */
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  /* Safari+Chrome */
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  /* Opera */
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
}

Cũng may là cú pháp khá giống nhau: offset, spread và colour – trong trường hợp này là màu xám đen với độ trong suốt khoảng 70%. Cùng với phông chữ mới, ghi chú của chúng ta trông sẽ như thế này:

3. SẮP XẾP GHI CHÚ.

Ghi chú mà xếp thẳng hàng thế kia thì chán quá nhỉ, chúng ta làm cho chúng nghiêng nghả một chút. Để làm nghiêng các phần tử, ta cần dùng transform:rotate của CSS3, và lại thêm mỗi dòng cho từng trình duyệt.

1

2

3

4

5

ul li a{
  -webkit-transform:rotate(-6deg);
  -o-transform:rotate(-6deg);
  -moz-transform:rotate(-6deg);
}

Cái này chỉ làm các ghi chú nghiêng sang trái, chúng ta cần làm cho chúng nghiêng ngẫu nhiên. Chúng ta sẽ sử dụng property nth-child của CSS3.

ul li:nth-child(even) a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
}
ul li:nth-child(3n) a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
}
ul li:nth-child(5n) a{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}

Giờ thì chúng đã trông khá thực tế rồi.

step3

4. PHÓNG TO GHI CHÚ KHI DI CHUỘT ĐẾN

Để làm một ghi chú nổi bật lên so với những cái khác, chúng ta cần sử dụng đổ bóng nhiều hơn cũng như dùng câu lệnh biến đổi kích thước trong CSS3. Lại lần nữa, thiết lập cho từng trình duyệt.

ul li a:hover,ul li a:focus{
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}

Việc này có nghĩa, khi con trỏ chuột di chuyển tới ghi chú nào thì cái đó sẽ được đẩy lên trên và nổi bật hơn so với những ghi chú còn lại:

step4

5. THÊM VÀO HIỆU ỨNG BIẾN ĐỔI MƯỢT MÀ VÀ MÀU SẮC.

Bước cuối cùng là làm cho ghi chú khi chuyển đổi trở nên mượt hơn. Để làm được điều này chúng ta sẽ sử dụng CSS3 transition module cho mỗi cách hiển thị khác nhau của từng trình duyệt.

ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}

Không chỉ là chuyển từ trạng thái này sang trạng thái khác mà chúng ta còn cần đặt khoảng thời gian chuyển đổi cho nó trong khoảng ¼ giây. Ngoài ra, hãy thêm vào một số màu sắc cho mỗi ghi chú như xanh lá, xanh lam....

ul li:nth-child(even) a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
ul li:nth-child(3n) a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}

Xong rồi. Hãy cùng chiêm ngưỡng kết quả từ nãy giờ của chúng ta nào:

step5

Thông qua bài viết này. Hy vọng bạn đã có các khái niệm cơ bản cũng như nắm được cách để làm website trở thành một bức tường với những ghi chú được dán trên đó. Đây là một cách rất hay trong việc khách hàng để lại các nhận xét tốt cho website của bạn để cho mọi người chú ý.

Trước khi rời đi, có thể bạn sẽ muốn xem qua bài viết: Tạo trang giới thiệu sản phẩm cực đẹp với CSS3

Ý kiến bạn đọc

Bạn cần trở thành thành viên của nhóm để có thể bình luận bài viết này. Nhấn vào đây để đăng ký làm thành viên nhóm!