5 bước tạo miếng dán màn hình với HTML5 và CSS3

26/12/2013

Chắc hẳn là các bạn đã quá quen thuộc với những miếng dán ghi chú được gắn trên các tường , hộc tủ, tủ lạnh nhà bạn , khi bạn cần phải nhắn nhủ điều gì đó cho bản thân hay người thân trong nhà. Hôm nay , chúng ta sẽ tạo ra những miếng dán này ngay trên website của mình, với những hiệu ứng đẹp mắt nhờ sợ hỗ trợ của CSS3 Transform và Transition , chỉ với 5 bước đơn giản.

5 bước tạo miếng dán màn hình với HTML5 và CSS3

Xem Demo | Download

Bước 1 : HTML

Đầu tiên chúng ta cần có bộ khung chuẩn HTML cho từng miếng dán như sau:

<ul>
	<li><a href="#">
</a>
<h2>Title #1</h2>
<a href="#">
Text Content #1

 </a></li>
	<li><a href="#">
</a>
<h2>Title #2</h2>
<a href="#">
Text Content #2

 </a></li>
	<li><a href="#">
</a>
<h2>Title #3</h2>
<a href="#">
Text Content #3

 </a></li>
	<li><a href="#">
</a>
<h2>Title #4</h2>
<a href="#">
Text Content #4

 </a></li>
	<li><a href="#">
</a>
<h2>Title #5</h2>
<a href="#">
Text Content #5

 </a></li>
	<li><a href="#">
</a>
<h2>Title #6</h2>
<a href="#">
Text Content #6

 </a></li>
	<li><a href="#">
</a>
<h2>Title #2</h2>
<a href="#">
Text Content #2

 </a></li>
	<li><a href="#">
</a>
<h2>Title #7</h2>
<a href="#">
Text Content #7

 </a></li>
	<li><a href="#">
</a>
<h2>Title #8</h2>
<a href="#">
Text Content #8

 </a></li>
</ul>

Kế tiếp, chúng ta định dạng CSS cơ bản để tạo những miếng dán sơ khai đầu tiê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;
    }

Lúc này, kết quả mà chúng ta nhận được sẽ thế này :

5 bước tạo miếng dán màn hình với HTML5 và CSS3

Bước 2 : Drop Shadows và Scribbly Font

Để miếng dán thêm thực, chúng ta sẽ làm cho từng miếng dán có thêm hiệu ứng bóng đổ và sử dụng font chữ dạng viết tay trên từng miếng dán với  Google Fonts API.

5 bước tạo miếng dán màn hình với HTML5 và CSS3

Để sử dụng Google Font, các bạn chèn đoạn code sau vào ngay bên trong cặp thẻ <head>….</head>

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

Sau đó chúng ta chèn thêm padding và font chữ vào.

    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%;
    }

Kế tiếp là hiệu ứng bóng đổ.

    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);
    }

Nếu thành công, các bạn sẽ nhận được kết quả như thế này :

5 bước tạo miếng dán màn hình với HTML5 và CSS3

Bước 3 : Làm nghiêng miếng dán

Để có thể làm nghiêng miếng dán, các bạn chỉ cần sử dụng thuộc tính  transform:rotate có trong CSS3. Nhớ thêm các tiền tố cần thiết cho từng trình duyệt.

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

Đoạn css bên trên sẽ làm tất cả miếng dán đều bị nghiêng, tuy nhiên, chúng ta sẽ làm miếng dán nghiêng ngẫu nhiên bằng cách tận dụng thuộc tính 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;
    }

Và đây là kết quả chúng ta nhận được :

5 bước tạo miếng dán màn hình với HTML5 và CSS3

Bước 4 : Phóng to miếng dán với sự kiện Hover và Focus

Để hiệu ứng thêm phần hấp dẫn, các bạn copy đoạn css bên dưới để phóng to miếng dán, mỗi khi người dùng rê hay click chuột vào.

    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;
    }

5 bước tạo miếng dán màn hình với HTML5 và CSS3

Bước 5 : Chèn thêm màu và Transitions cho từng miếng dán.

Bước cuối cùng là chúng ta chèn thêm hiệu ứng transition và màu nền khác nhau cho từng miếng dán.

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);
	   -webkit-transform:rotate(-6deg);
  -o-transform:rotate(-6deg);
  -moz-transform:rotate(-6deg);
/* Chèn thêm tại đây */
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}

Và màu nền :

    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;
    }

Bây giờ, chúng ta đã có kết quả cuối cùng :

5 bước tạo miếng dán màn hình với HTML5 và CSS3

Các bạn thấy đó, chỉ cần kiên nhẫn thực hành từng bước là chúng ta đã có ngay một hiệu ứng đẹp , có thể là các bạn sẽ cảm thấy những miếng dán này không quá cần thiết cho website hay blog của mình. Nhưng tin mình đi, rồi sẽ có lúc các bạn sẽ thấy bài viết này rất hữu ích.

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

Chuyên Mục:

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

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !