29 header dan footer CSS untuk blog atau situs Anda

Header dan footer adalah Elemen penting saat membuat halaman baru web atau blog, atau jika tidak ada lagi yang perlu kami perbarui untuk memenuhi standar desain web saat ini. Itu adalah ruang yang biasanya diperhatikan oleh pengunjung situs web kita, jadi kita harus merawat dan memanjakannya dengan cukup sehingga enak dipandang, selain fungsional.

Itulah mengapa kami akan berbagi 29 header dan footer CSS yang dapat Anda gunakan di blog atau situs web Anda, dan dengan demikian berikan poin kualitas yang Anda cari. Daftar ini terdiri dari header artikel layar penuh, serta ukuran standar, header tetap atau tetap, footer, dan beberapa header video untuk memberikan sudut pandang lain ke situs web Anda.

Header melengkung

Header yang diidentifikasi oleh gaya melengkung di bagian bawah yang menjadikannya tajuk yang sangat khusus untuk situs web atau blog. Ini adalah CSS murni, jadi perlu waktu untuk menguji di web Anda bagaimana tampilannya jika Anda memasukkannya ke dalam blog Anda.

Gambar header Parallax

Dengan efek gambar Parallax yang hebat, header ini mengidentifikasikan dirinya dengan gunakan posisi gambar latar belakang CSS. Gambar header akan diposisikan di bagian atas halaman untuk kode efek yang bagus.

Header tetap miring

Header ini dipasang dengan baik di bagian atas halaman web ke bedakan dengan garis diagonal itu yang melintasi seluruh horizontal tampilan pengguna. Ini menunjukkan bagaimana pseudo-elemen CSS dapat digunakan untuk membuat header tetap dengan gambar latar belakang.

Header miring

CSS dan HTML untuk tajuk ini yang dicirikan dalam contoh yang diberikan di sepanjang garis diagonal itu yang melintasi seluruh layar dari satu sisi ke sisi lainnya.

Header dengan animasi SVG

Sebuah header yang sangat sederhana, meskipun menggunakan animasi SVG untuk membedakan diri Anda dari yang kami miliki di daftar ini. Anda dapat mengakses banyak halaman web dengan animasi SVG dari sini.

Header tetap dengan Div

Dengan efek gambar Parallax, header tetap yang menonjol karena efeknya yang bagus dicapai dengan gambar latar belakang tetap sementara sisanya sedang bergulir saat kita menggulir dengan mouse.

Ilustrasi parallax multi-layer

Sebuah sundulan untuk menyelesaikan dengan baik HTML, CSS, dan JavaScript berlapis-lapis dan dapat digunakan dengan sempurna untuk situs web yang terkait dengan dunia video game. Hasil akhir yang bagus.

Memperbaiki header posting

Header tetap untuk setiap postingan yang dibuat dalam HTML, CSS, dan JavaScript. Saat kita berguling, header diminimalkan dan diperbaiki di atas.

Header layar penuh dengan animasi

Header yang menawarkan animasi itu bergerak kesamping dan itu menghasilkan efek relaksasi pada pengamat.

Gambar Pahlawan layar penuh

dengan efek zoomadalah header layar penuh itu terungkap sebagai salah satu orisinalitas yang hebat. Sempurna untuk situs web di mana pengunjung akan memanfaatkan gulir untuk bergerak di sekitarnya.

Flexbox dengan tombol 

Header yang mengambil seluruh lebar layar untuk menampilkan tombol. Sempurna untuk halaman arahan dengan CSS flexbox.

Tajuk Pahlawan Flexbox

Sebuah header dengan efek parallax dan flexbox cukup sederhana yang menonjol terutama karena keanggunan desainnya.

Sticky Header saat menggulir

Seperti namanya, header tetap ketika kami menggulir dengan mouse saat bergerak untuk melihat halaman web lainnya.

Scrolling Responsif Lengket

Header tetap lainnya yang memiliki efek hebat saat menu mencapai bagian atas halaman, mengapadan pada saat itu tetap dan kami dapat terus menggulir situs.

Gulir Header

Ini berbeda dari yang lain animasi yang tepat dan halus saat kita bergerak. Pada akhirnya, kepala tempat tidur tetap terpasang di bagian atas.

Header Scroll Responsif

Animasi hebat lainnya untuk membedakan tajuk ini dari yang lain dengan HTML, CSS dan JavaScript.

Header Masuk / Keluar

Tajuk yang dibedakan berdasarkan efeknya Masuk / keluar setelah menggulir dan itu menghasilkan sensasi pantulan.

Header memudar

Efek animasi lainnya penasaran dan sangat elegan dalam HTML, CSS dan JavaScript.

Header yang disembunyikan

Header yang berbeda saat bersembunyi menurut kami menggunakan scrolling dengan animasi yang tidak terlihat tetapi berkualitas tinggi.

Footer paralaks

Footer tetap atau tetap dengan HTML, CSS, dan JavaScript. Dari kualitas bagus dengan naungan berlaku.

Footer dengan skala konten

Kualitas tinggi dan footer asli untuk mengejutkan pengunjung untuk cara yang anggun dalam menampilkan ruang web ini.

Footer Media Sosial

Sebuah footer yang menonjol tombol yang mengarah ke jejaring sosial paling dikenal. Animasi yang muncul saat Anda meninggalkan penunjuk mouse di atas setiap jejaring sosial terlihat menonjol.

Menu footer seluler animasi

Dengan mengecilkan jendela browser web Anda untuk melihat footer ini, Anda bisa temukan 2-3 bagian yang dapat ditemukan pengguna di perangkat seluler. Itu ditampilkan pada 767px.

Footer Tetap Sederhana

Dibuat di HTML dan CSS adalah footer sederhana tanpa banyak gembar-gembor dan berkembang.

Tajuk Video Reaksi

Sebuah header dengan video sederhana React.js.

Header Video

Lain header dengan video sederhana dan berkualitas tinggi.

Header Video Layar Penuh dengan Mix-Blend

Tunjukkan a video layar penuh dengan teks pada lapisan menggunakan mode campuran-campuran.

Animasi Header Video

Animasi itu disesuaikan dengan Adobe After Effects agar kompatibel dengan semua browser. Ini tidak berfungsi di seluler.

Header video responsif dengan gradien

El gradien adalah yang menonjol ke header video ini dari yang lain.