29 Đầu trang và chân trang CSS cho blog hoặc trang web của bạn

Chân trang CSS

Đầu trang và chân trang là Các yếu tố cần thiết khi tạo một trang mới web hoặc blog, hoặc nếu không có gì khác, chúng tôi cần cập nhật chúng để đáp ứng các tiêu chuẩn hiện tại của thiết kế web. Chúng là không gian mà khách truy cập vào trang web của chúng tôi thường rất chú ý, vì vậy chúng tôi phải chăm sóc chúng và nuông chiều chúng đủ để chúng hài lòng ngoài chức năng.

Đó là lý do tại sao chúng tôi sẽ chia sẻ 29 Đầu trang và chân trang CSS mà bạn có thể sử dụng trên blog hoặc trang web của mìnhvà do đó cung cấp cho nó điểm chất lượng mà bạn đang tìm kiếm. Danh sách này bao gồm các tiêu đề bài viết toàn màn hình, cũng như kích thước chuẩn, đầu trang cố định hoặc cố định, chân trang và một số tiêu đề video để cung cấp cho trang web của bạn một góc nhìn khác.

Tiêu đề cong

Tiêu đề cong

Tiêu đề được xác định bởi kiểu cong của nó ở phía dưới điều này làm cho nó trở thành một tiêu đề rất đặc biệt cho một trang web hoặc blog. Nó là CSS thuần túy, vì vậy, đã mất thời gian để kiểm tra dàn trang web của bạn vì nó sẽ trông như thế nào nếu bạn đưa nó vào blog của mình.

Hình ảnh tiêu đề Thị sai

Thị sai

Với hiệu ứng Hình ảnh thị sai tuyệt vời, tiêu đề này tự nhận dạng bằng sử dụng vị trí hình nền-CSS. Hình ảnh tiêu đề sẽ được đặt ở đầu trang để có mã hiệu ứng tuyệt vời.

Tiêu đề có góc cố định

Tiêu đề góc

Tiêu đề này được cố định tốt ở đầu trang web để phân biệt với đường chéo đó vượt qua toàn bộ chiều ngang của chế độ xem của người dùng. Nó chỉ ra cách các phần tử giả CSS có thể được sử dụng để tạo tiêu đề cố định với hình nền.

Tiêu đề xiên

Xiên

CSS và HTML cho tiêu đề này được mô tả trong ví dụ đã cho dọc theo đường chéo đó xuyên qua toàn bộ màn hình từ bên này sang bên kia.

Tiêu đề với hoạt ảnh SVG

Svg cong

Một tiêu đề rất đơn giản, mặc dù nó sử dụng một hoạt ảnh SVG để phân biệt chính bạn mà chúng tôi có trong danh sách này. Bạn có thể truy cập một danh sách lớn các trang web với hoạt ảnh SVG từ đây.

Tiêu đề cố định với Div

Div cố định

Với hiệu ứng hình ảnh thị sai, một tiêu đề cố định nổi bật cho hiệu ứng tuyệt vời đạt được với hình nền cố định trong khi phần còn lại đang cuộn khi chúng ta cuộn bằng chuột.

Hình minh họa nhiều lớp thị sai

Nhiều lớp

Một cú đánh đầu kết thúc tuyệt vời trong HTML nhiều lớp, CSS và JavaScript và điều đó có thể được sử dụng hoàn hảo cho một trang web liên quan đến thế giới trò chơi điện tử. Kết thúc tuyệt vời trong suốt.

Đã sửa tiêu đề bài đăng

Bài đã sửa

Một tiêu đề cố định cho mỗi bài đăng được tạo bằng HTML, CSS và JavaScript. Thời điểm chúng tôi lăn xuống, tiêu đề được thu nhỏ và cố định ở trên cùng.

Tiêu đề toàn màn hình với hoạt ảnh

Sóng hoạt hình

Tiêu đề cung cấp hoạt ảnh di chuyển ngang và điều đó tạo ra hiệu ứng thư giãn cho người xem.

Hình ảnh anh hùng toàn màn hình

Hình ảnh anh hùng

với một hiệu ứng thu phóngĐiều này tiêu đề toàn màn hình nó được tiết lộ như một trong những độc đáo tuyệt vời. Hoàn hảo cho một trang web mà trong đó khách truy cập sẽ sử dụng rất nhiều thao tác cuộn để di chuyển xung quanh nó.

Flexbox có nút 

Flexbox có nút

Tiêu đề chiếm toàn bộ chiều rộng của màn hình để hiển thị một nút. Hoàn hảo cho các trang đích với CSS flexbox.

Tiêu đề anh hùng Flexbox

Anh hùng Flexbox

Tiêu đề có hiệu ứng parallax và flexbox khá đơn giản chủ yếu làm nổi bật sự sang trọng của thiết kế.

Tiêu đề cố định khi cuộn

Tiêu đề cố định

Như tên gọi của nó, một tiêu đề cố định khi chúng tôi cuộn bằng chuột khi di chuyển để xem phần còn lại của trang web.

Dính cuộn đáp ứng

Cuộn đáp ứng

Một tiêu đề cố định khác có tác dụng tuyệt vời khi menu lên đầu trang, tại saovà tại thời điểm đó nó vẫn cố định và chúng tôi có thể tiếp tục cuộn trang web.

Đầu trang cuộn

Tiêu đề cuộn

Nó khác với phần còn lại bởi hoạt hình thích hợp và tinh tế khi chúng ta di chuyển. Vào cuối của nó, đầu giường vẫn cố định ở trên cùng.

Tiêu đề cuộn đáp ứng

Tiêu đề cuộn đáp ứng

Một hoạt ảnh tuyệt vời khác cho phân biệt tiêu đề này với phần còn lại với HTML, CSS và JavaScript.

Đầu vào / ra

tiêu đề hoạt hình

Một tiêu đề được phân biệt bởi hiệu ứng Vào / ra sau khi cuộn và điều đó tạo ra cảm giác hồi phục.

Tiêu đề mờ dần

Tiêu đề mờ dần

Một hiệu ứng hoạt hình khác tò mò và rất thanh lịch trong HTML, CSS và JavaScript.

Tiêu đề bị ẩn

Tự động ẩn

Một tiêu đề khác khi ẩn theo chúng tôi sử dụng cuộn với hoạt ảnh không được chú ý nhưng có chất lượng tuyệt vời.

Chân trang thị sai

Chân trang thị sai

Chân trang cố định hoặc cố định với HTML, CSS và JavaScript. Của chất lượng tuyệt vời với bóng có hiệu lực.

Chân trang với tỷ lệ nội dung

Tỷ lệ chân trang

Chân trang gốc và chất lượng cao cho làm kinh ngạc du khách cho cách hiển thị không gian web này một cách duyên dáng.

Chân trang mạng xã hội

MẠNG XÃ HỘI

Chân trang nổi bật cho các nút dẫn đến mạng xã hội biết tốt nhất. Hoạt ảnh được tạo ra khi để con trỏ chuột qua từng mạng xã hội sẽ nổi bật.

Menu chân trang trên thiết bị di động động

Animated footer trên thiết bị di động

Bằng cách giảm cửa sổ trình duyệt web để xem chân trang này, bạn sẽ có thể tìm 2-3 phần mà người dùng có thể tìm thấy trên thiết bị di động. Nó được hiển thị ở 767px.

Chân trang cố định đơn giản

Cố định đơn giản

Được tạo bằng HTML và CSS là một chân trang đơn giản không có nhiều phô trương và phát triển.

React Video Header

React Video Header

Một tiêu đề với video đơn giản React.js.

Tiêu đề Video

Tiêu đề Video

khác tiêu đề với video đơn giản và có chất lượng tuyệt vời.

Tiêu đề video toàn màn hình với Mix-Blend

Toàn màn hình

Hiển thị một video toàn màn hình với văn bản trên lớp bằng cách sử dụng chế độ pha trộn.

Hoạt ảnh đầu trang video

Hoạt ảnh tiêu đề video

Hoạt hình là tùy chỉnh với Adobe After Effects tương thích với tất cả các trình duyệt. Nó không hoạt động trên điện thoại di động.

Tiêu đề video đáp ứng với gradient

Responsive

El gradient là những gì nổi bật đến tiêu đề video này từ phần còn lại.


Nội dung bài viết tuân thủ các nguyên tắc của chúng tôi về đạo đức biên tập. Để báo lỗi, hãy nhấp vào đây.

2 bình luận, để lại của bạn

Để lại bình luận của bạn

địa chỉ email của bạn sẽ không được công bố.

*

*

  1. Chịu trách nhiệm về dữ liệu: Miguel Ángel Gatón
  2. Mục đích của dữ liệu: Kiểm soát SPAM, quản lý bình luận.
  3. Hợp pháp: Sự đồng ý của bạn
  4. Truyền thông dữ liệu: Dữ liệu sẽ không được thông báo cho các bên thứ ba trừ khi có nghĩa vụ pháp lý.
  5. Lưu trữ dữ liệu: Cơ sở dữ liệu do Occentus Networks (EU) lưu trữ
  6. Quyền: Bất cứ lúc nào bạn có thể giới hạn, khôi phục và xóa thông tin của mình.

  1.   Technoku dijo

    Tất cả đều thuyết phục tôi. Cảm ơn

    1.    Manuel Ramirez dijo

      Không có gì!

bool (đúng)