101 hiệu ứng CSS3: Hiệu ứng khâu da ~ Wap Chia Sẻ

Xem demo Tải source

Mình rất thích một template HTML/CSS mang tên Jean. Một template khá sáng tạo, mình rất thích cách tác giả trang trí các đối tượng trên nền vải một cách hài hòa. Trong loạt bài hiệu ứng CSS3, kỳ này mình sẽ làm một hiệu ứng nhỏ, khâu chỉ và in chữ lên bề mặt da phuộc. Hiệu ứng CSS3 này đẹp nhưng khá đơn giản và dễ làm vô cùng.

Trước tiên mời bạn xem những gì mà chúng ta sẽ làm được trong bài viết này:

Demo

Bạn có thể xem Demo trực tuyến qua link “Xem Demo” ở đầu hoặc cuối bài. Như vậy sẽ chân thật hơn. Hoặc nếu lười, bạn có thể tải toàn bộ Source Code hiệu ứng này để về xem offline. Và sau đây là phần hướng dẫn.

HTML

Một ít HTML để ta có thể dùng CSS trên đó.

1

2

3

<div id="stitch">

   <div id="inner-stitch">Khâu lên da bằng CSS</div>

</div>

CSS

Chỉnh lại style cho cái div bên ngoài, mình dùng hình nền da có thể tìm thấy tại www.sxc.hu. Và đây là Code CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

#stitch{

    background: url(bg2.jpg) center center no-repeat;

    -webkit-box-shadow: 0 5px 20px #000 , -15px 25px 15px rgba(0, 0, 0, 0.3) , 0 0 100px 20px rgba(0, 0, 0, 0.5);

    -moz-box-shadow: 0 5px 20px #000 , -15px 25px 15px rgba(0, 0, 0, 0.3) , 0 0 100px 20px rgba(0, 0, 0, 0.5);

    box-shadow: 0 5px 20px #000 , -15px 25px 15px rgba(0, 0, 0, 0.3) , 0 0 100px 20px rgba(0, 0, 0, 0.5);

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    height: 200px;

    margin: 0 auto;

    padding: 10px;

    width: 400px;

}

Đây là hình nền bề mặt da mình dùng để làm nền:

Bề mặt da

Để có được đường viền bên ngoài, cho cảm giác như ta khâu từng mũi chỉ. Chỉ cần dùng 2 thuộc tính là outline và border là đủ làm nên trò. Tuy nhiên để đẹp hơn, ta sẽ thêm một ít tham số khác. Và chỉnh lại cho chữ có cảm giác như được in lên bề mặt da.

1

2

3

4

5

6

7

8

9

10

11

12

13

#inner-stitch {

    border: 1px dashed rgba(15, 18, 12, 1);

    outline: 1px dashed rgba(171, 128, 112, 0.7);

    height: 180px;

    line-height: 50px;

    padding: 45px 0 0 0;

    text-align: center;

    text-shadow: 0 1px 3px rgba(171, 128, 112, 0.5) , 0 -2px 4px rgba(5, 8, 2, 0.5);

    width: 380px;

    color: rgba(0, 0, 0, 0.53);

    font-size: 2.6em;

    font-weight: bold;

}

Khuyến cáo, nên dùng font chữ to. Như vậy sẽ làm chữ nhìn đẹp hơn. Chỉ cần 2 đoạn CSS ngắn ở trên là ta đã có được một hiệu ứng đơn giản bằng CSS3. Và cuối cùng, bạn đừng quên là có thể xem Demo trực tuyến hoặc tải về máy để từ từ nghiên cứu thông qua link ở cuối bài viết dưới đây.

Dịch và chỉnh sửa bởi Minh Nhựt, nguồn: sickdesigner.com

Xem demo Tải source

Xem bài viết trên phiên bản di động