Hướng dẫn tạo hiệu ứng ảnh trùng với chữ trong website

Hoàng Anh

Ban Quản Trị
Tham gia
1/2/17
Bài viết
21
Xếp hạng
16
#1

:IF:​
Chào mọi người, trong thiết kế website chúng ta sẽ rất chú tâm đến thiết kế giao diện cho web, và trong bài viết này, tôi sẽ hướng dẫn cho các bạn tạo một hiệu ứng chữ đẹp mắt, thú vị mà không cần dùng đến các phần mềm chỉnh sửa ảnh.
:tt:​
Bước 1: Chúng ta xây dựng cấu trúc "HTML" cơ bản, sau đó chúng ta sẽ thêm phần text ở trong "body", ở đây tôi đặt phần text đó trong thẻ "h1" bên trong "body".
Mã:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Itrum</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Itrum<br>Forum</h1>
</body>
</html>
Bước 2: Chuyển qua phần style cho "CSS", ta sẽ thiết lập một vài style cơ bản cho phần body và thẻ h1.
Mã:
body {
    padding: 0;
    margin: 0;
    background: #fff;
}

h1 {
    font-family: sans-serif;
    font-size: 10em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin: 200px auto;
}
Bước 3: Bước này là bước chủ chốt của bài viết này ta chỉ style chủ yếu ở thẻ "h1", phần này ta sẽ thiết lập background làm sao cho nó khớp với text bằng thuộc tính: -webkit-background-clip: text; và phần color: transparent; để tạo chữ thành trong suốt để nhìn thấy phần ảnh phía sau, ta sẽ được cấu trúc như sau
Mã:
h1 {
    font-family: sans-serif;
    font-size: 10em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin: 200px auto;
    color: transparent;
    background: url('background.jpg');
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-clip: text;
}
 

Thành viên trực tuyến

Không có thành viên trực tuyến.

Group TechViews

Chủ Đề Tương Tự

Thống kê diễn đàn

Chủ đề
1,407
Bài viết
2,939
Thành viên
6,532
Thành viên mới nhất
maygiatlg
Top Bottom