Hôm nay chúng ta sẽ tìm hiểu về các mẫu header đẹp được xây dựng bằng HTML, CSS, JavaScript dành cho thiết kế và phát triển web
Tác giả
- Paolo Duzioni
- 27 Tháng Sáu, 2018
liên kết
- bản demo và mã
Làm với
- HTML (Pug) / CSS (SCSS)
Về mã
Tiêu đề không phải hình chữ nhật
Tiêu đề không phải hình chữ nhật với SVG nội tuyến
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Omar Dsoky
- 18 Tháng Giêng, 2018
liên kết
- bản demo và mã
Làm với
- HTML
- CSS
Về mã
Tiêu đề đường cong
Tiêu đề đường cong CSS thuần túy
Tác giả
- Web làm tốt
- 8 Tháng Giêng, 2018
liên kết
- bản demo và mã
Làm với
- HTML
- CSS
- JavaScript (jQuery. js)
Về mã
Hiệu ứng cuộn thị sai hình ảnh tiêu đề với CSS
Tạo hiệu ứng cuộn thị sai bằng CSS background-image position. Tập lệnh này hoạt động khi hình ảnh tiêu đề được đặt ở đầu trang
Tác giả
- George W. Công viên
- 6 Tháng Giêng, 2018
liên kết
- bản demo và mã
Làm với
- HTML
- CSS
Về mã
Tiêu đề góc cố định
Bút này cho biết cách sử dụng các biến đổi và phần tử giả CSS để tạo tiêu đề có góc, cố định với nền hình ảnh
Tác giả
- Arthur Camara
- 20 Tháng Chín, 2017
liên kết
- bản demo và mã
Làm với
- HTML/Pug
- CSS/Bút cảm ứng
Về mã
Tiêu đề nghiêng
Tiêu đề bị lệch với HTML và CSS
Tác giả
- cánh tay
- 16 Tháng Bảy, 2017
liên kết
- bản demo và mã
Làm với
- HTML
- CSS/SCSS
- JavaScript
Về mã
Hoạt hình nền SVG đường cong
Hoạt hình nền SVG cong cho tiêu đề
Tiêu đề động CSS
Hình nền tiêu đề blog hoạt hình, không có JavaScript
Thực hiện bởi Nodws
30 Tháng Năm, 2017
tải xuống bản demo và mã
Div nghiêng, tiêu đề cố định
Các div bị lệch và hiệu ứng thị sai được tạo bởi tiêu đề cố định. Bố cục đơn giản và hướng dẫn sửa đổi trong JS
Thực hiện bởi Andrew Bales
10 Tháng Giêng, 2017
tải xuống bản demo và mã
Tiêu đề CSS
HTML và CSS đã sửa tiêu đề cuộn biến mất
Thực hiện bởi Dudley Storey
3 Tháng Mười Hai, 2016
tải xuống bản demo và mã
Minh họa thị sai nhiều lớp
Minh họa thị sai nhiều lớp HTML, CSS và JavaScript
Thực hiện bởi Patryk Zabielski
27 Tháng Tư, 2016
tải xuống bản demo và mã
Ý tưởng anh hùng
Ý tưởng anh hùng trong HTML, CSS và JavaScript
Thực hiện bởi Jake Lundberg
6 Tháng Tư, 2016
tải xuống bản demo và mã
Tiêu đề/Hero Image Typography Sân chơi
Giải thích nằm ở đầu tệp CSS. Chỉ cần một số kiểu chữ, lớp trợ giúp và một số cài đặt trước để dễ dàng kiểm tra kiểu chữ tiêu đề
Thực hiện bởi Mirko Zorić
18 Tháng Ba, 2016
tải xuống bản demo và mã
Anh hùng phóng to khi cuộn
Hiệu ứng thu phóng đơn giản bằng cách sử dụng cuộn cửa sổ để điều chỉnh một số CSS
Thực hiện bởi Derek Palladino
ngày 8 tháng 10 năm 2015
tải xuống bản demo và mã
Hiệu ứng anh hùng thị sai gọn gàng
Một số phép thuật JavaScript để biến anh hùng thị sai nhỏ tiện lợi này
Thực hiện bởi Dominic Magnifico
22 Tháng Chín, 2015
tải xuống bản demo và mã
Đã sửa tiêu đề bài viết
Đã sửa tiêu đề cho mỗi bài đăng với HTML, CSS và JavaScript
Được thực hiện bởi White Wolf Wizard
5 Tháng Tám, 2015
Tải xuống
Hình ảnh tiêu đề CSS Parallax
Hình ảnh tiêu đề thị sai HTML và CSS
Thực hiện bởi Bennett Feely
18 Tháng mười một 2014
tải xuống bản demo và mã
Tiêu đề toàn màn hình
Tác giả
- Olivia Ng
- 25 Tháng hai, 2019
liên kết
- bản demo và mã
Làm với
- HTML (Pug) / CSS (SCSS)
Về mã
Hiệu ứng di chuột cho tiêu đề
8 hiệu ứng hover cho header trong HTML và CSS
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Jorge Reyes
- 12 Tháng hai, 2019
liên kết
- bản demo và mã
Làm với
- HTML/CSS (SCSS)
Về mã
Tiêu đề / Trang giới thiệu
Tiêu đề đơn giản
Trình duyệt tương thích. Chrome, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Gerardo Valencia
- 27 Tháng hai, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về mã
Tiêu đề cho trang đích
Tiêu đề cho trang đích sử dụng clip-path
Tác giả
- Jeffrey Bennett
- Tháng Chín 4, 2017
liên kết
- bản demo và mã
Làm với
- HTML
- CSS
Về mã
Tiêu đề sóng cầu vồng hoạt hình gợi cảm
Chỉ là một thử nghiệm giao diện người dùng nhỏ phía trước
Giới thiệu hình ảnh anh hùng
Trưng bày hình ảnh anh hùng với HTML, CSS và JS
được thực hiện bởi nghệ thuật
27 Tháng Năm, 2017
tải xuống bản demo và mã
Hero Effect–Tạp chí
Một hình ảnh anh hùng sử dụng chiều cao. 100vh để che toàn bộ màn hình cho hiệu ứng bìa tạp chí. Khi cuộn, nó có hình ảnh động tinh tế tương tự như khi mở một tạp chí
Thực hiện bởi Cameron Campbell
15 Tháng mười một 2016
tải xuống bản demo và mã
Tiêu đề anh hùng Flexbox
Tiêu đề anh hùng thị sai đơn giản với flexbox
Thực hiện bởi Ana Vicente
5 Tháng Tư, 2016
tải xuống bản demo và mã
Tiêu đề thị sai đơn giản
Tiêu đề thị sai đơn giản HTML, CSS và JS bị mờ
Thực hiện bởi tsimenis
5 Tháng Tư, 2016
tải xuống bản demo và mã
Anh hùng OnScroll
Anh hùng HTML, CSS và JS khi cuộn
Thực hiện bởi verdzik
9 Tháng Mười Một, 2015
tải xuống bản demo và mã
Tiêu đề toàn màn hình với chu kỳ màu nền
Tiêu đề toàn màn hình với chu kỳ màu nền trong CSS thuần túy
Thực hiện bởi Kenny Sing
17 Tháng mười một 2014
tải xuống bản demo và mã
Nền cuộn liên tục của tiêu đề dính
Nền cuộn liên tục của tiêu đề cố định trong HTML, CSS và JavaScript
Thực hiện bởi Robert Borghesi
17 Tháng Chín, 2014
tải xuống bản demo và mã
Tiêu đề cố định (dính)
Tác giả
- Luciano Felix
- ngày 1 tháng 7 năm 2020
liên kết
- bản demo và mã
Làm với
- HTML (Pug) / CSS (Sass)
Về một mã
Tiêu đề mờ
Thử nghiệm làm mờ phông nền lũy tiến
Trình duyệt tương thích. Chrome, Edge, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Taco 🌮 (タコス)
- Tháng Giêng 27, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Chỉ cần một thanh tiêu đề đơn giản
Chỉ là một thanh tiêu đề CSS thuần túy thực sự đơn giản
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- phường Joshua
- 9 Tháng hai, 2019
liên kết
- bản demo và mã
Làm với
- HTML (Pug) / CSS (SCSS) / JavaScript
Về mã
Tiêu đề dính
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Marco Biedermann
- 1 Tháng Bảy, 2017
liên kết
- bản demo và mã
Làm với
- HTML
- CSS/PostCSS
- JavaScript/Babel
Về mã
Tiêu đề dính khi cuộn
Tiêu đề cố định hiệu suất cao với bóng khi cuộn
Responsive Scrolling Stick Header
Sử dụng các truy vấn phần tử để cung cấp năng lượng cho bố cục có ảnh bìa và điều hướng dính vào đầu trang khi cuộn
Thực hiện bởi Tommy Hodgins
9 Tháng Tư, 2017
tải xuống bản demo và mã
Tiêu đề cuộn
Thực sự mượt mà trên các thiết bị hỗ trợ di động/cảm ứng
Thực hiện bởi Blake Bowen
11 Tháng hai, 2017
tải xuống bản demo và mã
Tiêu đề cuộn đáp ứng
Tiêu đề cuộn đáp ứng trong HTML, CSS và JavaScript
Thực hiện bởi Dylan Macnab
28 Tháng Mười Hai, 2015
tải xuống bản demo và mã
Animate Header In/Out Sau khi cuộn
Sử dụng jquery-waypoints, chúng tôi sẽ kiểm tra xem khi nào thì data-animate-header (phần này) ở phía trên cùng của màn hình, sau đó tạo hiệu ứng cho ____2_______ (tiêu đề cố định) vào/ra tương ứng. Chúng tôi có thể thực hiện điều này với các chuyển đổi css và tổ hợp 3 lớp (.header-past, .header-show, .header-hide) - mà không cần phải sao chép hoặc thực hiện bất kỳ thao tác dom nào
Thực hiện bởi Antwon
16 Tháng sáu 2015
Tải xuống
Làm mờ tiêu đề
Tiêu đề HTML, CSS và JavaScript mờ dần
Thực hiện bởi Emmanuel Pilande
7 Tháng Ba, 2015
tải xuống bản demo và mã
Đã sửa hiệu ứng cuộn tiêu đề và điều hướng thông minh cho các trang web một trang
Sự kết hợp thô sơ của tiêu đề cố định jQuery khi cuộn và hiệu ứng lớp phần hoạt động của điều hướng
thực hiện bởi mùa hè
2 Tháng Hai, 2015
tải xuống bản demo và mã
Tự động ẩn tiêu đề dính
Đặt các lớp trên tiêu đề bằng JavaScript
thực hiện bởi jasper
21 Tháng Một, 2015
tải xuống bản demo và mã
Chuyển đổi CSS tiêu đề dính
Ví dụ thú vị về tiêu đề cố định sử dụng một số chuyển tiếp CSS3
Thực hiện bởi Brady Sammons
23 Tháng mười 2014
tải xuống bản demo và mã
Điều hướng trượt trên cùng
Điều hướng ẩn trượt từ trên xuống sau khi trang được cuộn
Thực hiện bởi Chris Gruber
ngày 20 tháng 10 năm 2014
tải xuống bản demo và mã
Responsive Stick Header Navigation
Điều hướng thú vị với HTML, CSS và JS
Thực hiện bởi MarcLibunao
8 Tháng sáu 2014
tải xuống bản demo và mã
Tiêu đề cố định (Hack nhanh)
Tiêu đề không cố định với màu nền đồng nhất và có một div cố định nhỏ ở trên cùng. Sau đó, có một div không được cố định trong tiêu đề với tiêu đề. Chỉ đơn giản là muốn thử và thử nghiệm ý tưởng. Hoạt động theo cách khá hack-ish
Thực hiện bởi Darcy Voutt
21 Tháng Ba, 2014
tải xuống bản demo và mã
Tiêu đề dính đánh lừa thị giác
Tạo tiêu đề dính icky dính bằng CSS mà không cần tạo trình xử lý sự kiện cuộn
được thực hiện bởi michael
19 Tháng bảy 2013
tải xuống bản demo và mã
Tiêu đề video
Tiêu đề video phản ứng
Phản ứng đơn giản. tiêu đề video js
Thực hiện bởi Mark Sarpong
2 Tháng Sáu, 2017
tải xuống bản demo và mã
Tiêu đề video
Tiêu đề video với HTML, CSS và JavaScript
thực hiện bởi alex
6 Tháng Hai, 2017
tải xuống bản demo và mã
Video anh hùng
Một cây bút hướng dẫn cách tạo anh hùng bằng video nền
Được thực hiện bởi Chris Simeone
20 Tháng Mười
tải xuống bản demo và mã
Video nền toàn màn hình với văn bản lớp phủ chế độ kết hợp hòa trộn
Hiển thị video toàn màn hình với lớp phủ văn bản dễ đọc, hiệu quả bằng cách sử dụng mix-blend-mode
Thực hiện bởi Dudley Storey
8 Tháng Chín, 2016
tải xuống bản demo và mã
Hoạt hình tiêu đề video
Hoạt hình đã được tùy chỉnh bằng Adobe After Effects và được hiển thị để tương thích trên tất cả các trình duyệt với. ogv và. tập tin webm. Không hoạt động trên thiết bị di động (cố ý). Khung Bootstrap cho HTML được sử dụng, không cần JavaScript
Thực hiện bởi Sylvia Maguia
ngày 4 tháng 10 năm 2015
tải xuống bản demo và mã
Tiêu đề video đáp ứng
Tiêu đề video đáp ứng với độ dốc trong HTML và CSS
Được thực hiện bởi Jacob Davidson
29 Tháng Năm, 2015
tải xuống bản demo và mã
Chân trang
Tác giả
- Swarup Kumar Kuila
- 2 Tháng Tư, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Thiết kế chân trang
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. khởi động. css, phông chữ tuyệt vời. css
Tác giả
- Zed Dash
- 28 Tháng mười hai, 2019
liên kết
- bản demo và mã
Làm với
- HTML (Pug) / CSS (SCSS)
Về một mã
Chân trang CSS Goey
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Ananya Neogi
- 13 Tháng Tám, 2019
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Chân trang luôn ở dưới cùng - Flexbox
Khi một trang web không có đủ nội dung để vừa với màn hình, phần chân trang không nằm ở cuối trang khiến nó trông rất kỳ lạ. Giải pháp. Thực hiện bố cục bằng cách sử dụng các cột flex. Ngoài ra, hãy thêm 100vh0 vào khu vực nội dung, đây là 100vh1. Hoặc thêm 100vh2 vào phần tử mà bạn muốn nó luôn ở dưới cùng, đây là 100vh3
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Sheelah Brennan
- 8 Tháng Hai, 2019
liên kết
- bản demo và mã
Làm với
- HTML (Pug) / CSS (SCSS) / JavaScript (Babel)
Về mã
Chuyển đổi chân trang động
Mở rộng/thu gọn chân trang bằng hình ảnh động
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. phông chữ tuyệt vời. css
Tác giả
- Jules Forrest
- 3 Tháng Giêng, 2019
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về mã
Chân trang với CSS Grid
Liên kết không gian đồng đều với CSS Grid. Không cần ký quỹ hoặc đệm
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Ryan Mulligan
- 24 Tháng hai, 2018
liên kết
- bản demo và mã
Làm với
- HTML (Pug) / CSS (SCSS)
Về mã
Chân trang dính Flexbox
Một ví dụ đơn giản về việc sử dụng 100vh4 để tạo bố cục trang chân trang cố định
Chân thị sai
Trang web cố định footer với HTML, CSS và JavaScript
Thực hiện bởi Austin Paquette
7 Tháng Giêng, 2017
tải xuống bản demo và mã
Footer với quy mô nội dung
Chân trang HTML, CSS và JavaScript với quy mô nội dung
Thực hiện bởi Mātthīas
3 Tháng Mười Hai, 2016
tải xuống bản demo và mã
Chân trang mạng xã hội
Chỉ là một hiệu ứng di chuột cho các liên kết truyền thông xã hội ở cuối trang
Thực hiện bởi Andrew Canham
22 Tháng Chín, 2016
tải xuống bản demo và mã
Tác giả
- Pete Lloyd
- 20 Tháng Giêng, 2016
liên kết
- bản demo và mã
Làm với
- HTML
- CSS/SCSS
- JavaScript (jQuery. js)
Về mã
Menu chân trang di động hoạt hình
Menu chân trang di động hoạt hình để hiển thị 2-3 hành động chính mà người dùng có thể thực hiện trên thiết bị di động. Hiển thị ở 767px (dành cho người dùng bootstrap)