Tiêu đề của bạn là một trong những phần quan trọng nhất của trang chủ. Đây thường là những gì bạn nhìn thấy đầu tiên và do đó là những gì quyết định ấn tượng đầu tiên. Giống như bất kỳ ấn tượng đầu tiên nào khác, bạn muốn nó phải tốt. Bây giờ, nếu bạn đang tìm kiếm một cách sáng tạo để trình bày tiêu đề của mình, bạn sẽ thích hướng dẫn này vì chúng tôi sẽ chỉ cho bạn cách thêm hoạt ảnh khối văn bản CSS vào tiêu đề của bạn và bạn cũng có thể tải xuống tệp JSON bố cục miễn phí!
khảo sát
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem kết quả trên các kích thước màn hình khác nhau.
Hãy bắt đầu thiết kế
Thêm phần # 1
Nền Gradient
Bắt đầu bằng cách thêm một phần thông thường vào một trang mới hoặc vào trang bạn đang làm việc. Mở cài đặt phần và áp dụng nền gradient sau:
- Màu 1: # f0f2b
- Màu 2: # c10b1a
- Kiểu gradient: tuyến tính
- Hướng dốc: 63deg
khoảng cách
Chuyển sang tab thiết kế phần và áp dụng các giá trị điền trên cùng và dưới cùng tùy chỉnh sau trên các kích thước màn hình khác nhau:
- Phần đệm trên: 7vw (máy tính để bàn), 20vw (máy tính bảng), 25vw (điện thoại)
- Đệm dưới: 7vw (bàn), 20vw (máy tính bảng), 25vw (điện thoại)
biên giới
Ngoài ra, thêm một đường viền cho phần.
- Độ rộng đường viền: 2vw (trên cùng, bên trái, bên phải)
- Chiều rộng đường viền dưới cùng: 0vw
- Màu viền: #ffffff
Thêm một dòng mới
Cấu trúc cột
Tiếp tục thêm một dòng mới vào phần bằng cấu trúc cột sau:
kích thước
Mở các tham số dòng và sửa đổi các tham số kích thước phù hợp:
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
Thêm một mô-đun văn bản vào cột
Thêm nội dung H1
Sau đó thêm một mô-đun văn bản với tiêu đề H1 bạn chọn.
Thêm thẻ Div cho mỗi từ trong tiêu đề H1
Chuyển sang tab văn bản của bản sao tiêu đề của bạn và thêm một div khác cho mỗi từ trong tiêu đề của bạn. ID CSS phải khác nhau cho mỗi từ.
Sẵn sàng
tại
Xây dựng
Xinh đẹp
Các trang web?
Cài đặt văn bản H1
Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản H1 cho phù hợp:
- Phông chữ: Work Sans
- Trọng lượng phông chữ: trung bình
- Màu văn bản tiêu đề: #ffffff
- Kích thước văn bản tiêu đề: 4vw (máy tính để bàn), 5vw (máy tính bảng), 6vw (điện thoại)
- Chiều cao dòng đầu: 1,4 em
khoảng cách
Sau đó, thay đổi các giá trị lề trên các kích thước màn hình khác nhau.
- Lề trái: 20vw (bàn và máy tính bảng), 15vw (điện thoại)
- Lề phải: 35vw (máy tính để bàn), 20vw (máy tính bảng), 15vw (điện thoại)
Thêm một mô-đun mã vào cột
Chèn mã CSS
Để hoạt ảnh của khối văn bản áp dụng cho tiêu đề của chúng ta, chúng ta sẽ cần một số mã CSS. Chúng tôi sẽ thêm mã CSS này vào một mô-đun mã mới.
<style>
.display-state {display: inline
!important;}
#word-1
{-webkit-animation: slide-right
0.5s linear
0.3s both;animation: slide-right
0.5s linear
0.3s both;}
#word-2
{-webkit-animation: slide-right
0.5s linear
0.6s both;animation: slide-right
0.5s linear
0.6s both;}
#word-3
{-webkit-animation: slide-right
0.5s linear
0.9s both;animation: slide-right
0.5s linear
0.9s both;}
#word-4
{-webkit-animation: slide-right
0.5s linear
1.2s both;animation: slide-right
0.5s linear
1.2s both;}#word-5
{-webkit-animation: slide-right
0.5s linear
1.5s both;animation: slide-right
0.5s linear
1.5s both;}
@-webkit-keyframes slide-right
{0%
{background-color: #000;opacity: 0.5;color: transparent;}
1%
{opacity: 1;}}
</style>
khoảng cách
Chuyển sang tab thiết kế mô-đun và xóa tất cả phần đệm dưới cùng mặc định.
- Lề dưới: 0px
Thêm một mô-đun nút vào cột
Thêm một bản sao
Mô-đun tiếp theo chúng ta cần là mô-đun nút. Nhập một bản sao của sự lựa chọn của bạn.
Cài đặt nút
Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt nút cho phù hợp:
- Sử dụng kiểu tùy chỉnh cho nút: Có
- Kích thước văn bản nút: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Màu văn bản nút: #ffffff
- Màu nền của nút: # 000000
- Độ rộng đường viền nút: 0px
- Nút phông chữ: Work Sans
khoảng cách
Sau đó, chuyển đến cài đặt giãn cách và áp dụng các giá trị lề và đệm tùy chỉnh trên các kích thước màn hình khác nhau.
- Lề trên: 3vw (văn phòng),
- Lề trái: 20vw (bàn và máy tính bảng), 15vw (điện thoại)
- Phần đệm trên: 1.2vw (máy tính để bàn), 2vw (máy tính bảng), 4vw (điện thoại)
- Đệm dưới: 1.2vw (bàn), 2vw (máy tính bảng), 4vw (điện thoại)
- Lớp đệm bên trái: 1.8vw (máy tính để bàn), 3vw (máy tính bảng), 6vw (điện thoại)
- Đệm bên phải: 1.8vw (bàn), 3vw (máy tính bảng), 6vw (điện thoại)
Hoạt hình
Tùy chỉnh cài đặt hoạt ảnh.
- Phong cách hoạt hình: Lật
- Hướng hoạt ảnh: xuống
- Độ trễ hoạt ảnh: 2000 ms
- Cường độ hoạt ảnh: 100%
- Độ mờ bắt đầu hoạt ảnh: 100%
- Đường cong tốc độ hoạt ảnh: dễ vào-ra
- Lặp lại hoạt ảnh: một lần
Thêm phần # 2
Tiếp tục bằng cách thêm một phần thông thường mới ngay bên dưới phần trước.
khoảng cách
Mở cài đặt phần và loại bỏ phần đệm trên mặc định.
- Phần đệm trên: 0px
Thêm một dòng mới
Cấu trúc cột
Tiếp tục thêm một hàng mới bằng cấu trúc cột sau:
kích thước
Không thêm nhiều mô-đun, mở các tham số dòng và để dòng chiếm toàn bộ chiều rộng của phần chứa.
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
Thêm một mô-đun văn bản vào cột
Thêm nội dung
Tiếp theo, thêm một mô-đun văn bản có nội dung mô tả về sự lựa chọn của bạn.
Màu nền
Thêm một màu nền trắng.
- Màu nền: #ffffff
Cài đặt văn bản
Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản cho phù hợp:
- Phông chữ: Work Sans
- Màu văn bản: # 9b9b9b
- Kích thước văn bản: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Chiều cao của dòng văn bản: 2.6em
khoảng cách
Đồng thời thêm các giá trị khoảng cách tùy chỉnh trên các kích thước màn hình khác nhau.
- Lề trên: -5vw (máy tính để bàn), -20vw (máy tính bảng), -27vw (điện thoại)
- Lề trái: 20vw (bàn), 13vw (máy tính bảng), 8vw (điện thoại)
- Lề phải: 20vw (máy tính để bàn), 13vw (máy tính bảng), 8vw (điện thoại)
- Phần đệm trên: 5vw (máy tính để bàn), 7vw (máy tính bảng và điện thoại)
- Đệm dưới: 5vw (bàn), 7vw (máy tính bảng và điện thoại)
- Lớp đệm bên trái: 3vw (máy tính để bàn), 5vw (máy tính bảng), 6vw (điện thoại)
- Đệm bên phải: 3vw (bàn), 5vw (máy tính bảng), 6vw (điện thoại)
Hộp bóng
Và hoàn thành cài đặt mô-đun bằng cách áp dụng một bóng hộp tinh tế. Đó là nó!
- Sức mạnh bóng mờ của hộp: 50px
- Màu bóng: rgba (0,0,0,0,1)
khảo sát
Bây giờ chúng ta đã đi qua tất cả các bước, hãy xem xét lần cuối cùng xem nó trông như thế nào trên các kích thước màn hình khác nhau.
cuối cùng suy nghĩ
Trong bài viết này, chúng tôi đã hướng dẫn bạn cách thêm hình động khối văn bản CSS vào tiêu đề của bạn. Điều quan trọng là đảm bảo tiêu đề của bạn hiển thị và đọc được ngay từ đầu, thêm hoạt ảnh vào tiêu đề của bạn chắc chắn có thể hữu ích! Bạn cũng có thể tải xuống tệp JSON bố cục miễn phí. Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, đừng ngại để lại bình luận trong phần bình luận bên dưới.
Dịch từ: ElegantThemes