Hero image merupakan sebuah gambar dengan text tepat diatas gambarnya, yang mana sering di letakkan pada bagian bawah header menu sebuah website.
Hero image juga sering digunakan sebagai sarana untuk menampilkan artikel terpopuler pada sebuah website ataupun sebuah produk unggulan mereka.
Selain bisa ditempati oleh text, hero image juga bisa dicustom sesuai kebutuhan, kalian bisa menambahkan button, ataupun link.
Penempatan hero image pada sebuah website.
Seperti yang saya sebutkan diatas, biasanya hero image ini diletakkan tepat di bagian atas sebuah website lebih spesifiknya dibawah header menu.
Namun tidak jarang hero image juga di letakkan pada bagian tengah ataupun akhir website, namun menurut saya pribadi untuk bagian bawah yaitu footer sangat tidak direkomendasikan.
Alasan penempatan hero image pada bagian footer tidak disarankan karena letakknya yang diakhir menjadikan hero image lebih kurang pas, apalagi jika kalian menambahkan CSS position:fixed pada baground gambar pada hero image.
Website apa saja yang menggunakan hero image.
Mungkin kalian berpikir bahwa semua website bagus untuk memasang hero image.
Yap, tidak salah jika sebuah websiet menambahkan fitur hero image agar lebih awesome. Jadi tidak masalah website atau blog apapun bisa dipasang dengan hero image ini.
Namun dri pengalaman saya hero image sering digunakan sebuah web portofolio atau web biodata seseorang.
Nah tertarik untuk memasang hero image?
Membuat hero image full height dan width.
Berikut ini merupakan source kode membuat hero image. Source kode hero image berikut ini memiliki text, button, background image, fixed position.
Langsung saja berikut ini sourcenya.
Pembuat HTML.
- Buatlah file dengan format .html
- Copy dan pastekan markup HTML berikut.
- Simpan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero image 1</title>
</head>
<body>
<section class="hero">
<div class="hero-inner">
<h1>Kenscripts Awesome Website</h1>
<h2>Look at this hero image!</h2>
<a href="https://kenscripts.blogspot.com/" class="btn">Go ahead...</a>
</div>
</section>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec nibh molestie, efficitur leo sed, viverra nunc. Donec vehicula accumsan erat facilisis ullamcorper. Donec commodo quis dui nec placerat. Donec mi orci, scelerisque eget nisl ac, hendrerit condimentum odio. Nam dictum odio eget quam tempus, a mattis odio ornare. Nullam auctor libero ut libero suscipit, ut accumsan nunc condimentum. Donec ullamcorper maximus sapien quis egestas.</p>
<p>Mauris viverra scelerisque lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ultrices enim sit amet elit tincidunt maximus. Suspendisse vitae pellentesque lectus. Duis commodo leo suscipit augue mollis, non venenatis dolor ullamcorper. Duis tincidunt scelerisque lacus, vel vehicula leo consectetur vel. Duis posuere nisl non odio consequat ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Etiam a leo nec mi blandit euismod. Etiam fringilla odio vitae risus ornare, id bibendum velit consequat. Fusce posuere risus sollicitudin condimentum ultrices. Fusce gravida, purus eget laoreet mattis, velit sapien ultrices diam, id dapibus erat leo id quam. Maecenas quis risus convallis, placerat elit non, iaculis tortor. Nullam porttitor magna risus, quis bibendum metus tincidunt in. Etiam vel ligula ac risus mattis tincidunt vel sit amet ante. Morbi et viverra ligula. Ut ac dignissim nisi, condimentum imperdiet mauris. Pellentesque ut ipsum vel diam tristique faucibus eu et lectus. Maecenas posuere neque non lacus bibendum, sit amet pharetra justo semper. Sed mi risus, tempor sit amet ligula eget, varius pretium est. Sed a odio in orci accumsan pretium suscipit ut quam.</p>
</main>
</body>
</html>
Baca Juga : Pasang widget recent atau artikel terbaru blogger keren
Memasang CSS3 untuk hero image.
Pemasangan CSS3 di hero image ini saya menggunakan external css, jadi bagian CSSnya akan saya pisahkan dan dihubungkan dengan link pada index.html
Beriku ini source style untuk hero image.
- Buatlah file CSS dengan format .CSS.
- Copy dan pastekan source kode style berikut ini kedalam file CSS yang kalian buat.
- Done dan simpan.
/* Ini merupakan reset CSS */
body {
margin: 0;
font-family: sans-serif;
}
/* TEXT STYLE */
/* Ini merupakan style dari text hero image */
.hero {
/* Ukuran */
width: 100vw;
height: 100vh;
/* Tampilan */
display: flex;
justify-content: center;
align-items: center;
/* Style text */
text-align: center;
color: white;
/* Background style dari hero image*/
background-image: url(../img/rias.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.hero h1 {
/* Style text */
font-size: 5em;
/* Margin */
margin-top: 0;
margin-bottom: 0.5em;
}
/* BTN atau TOMBOL STYLE */
.hero .btn {
/* Ukuran dan posisi */
display: block;
width: 200px;
/* Padding dan margin */
padding: 1em;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
/* Style text */
color: white;
text-decoration: none;
font-size: 1.5em;
/* Style border */
border: 3px solid white;
border-radius: 20px;
background-color: rgba(147, 112, 219, 0.8);
}
/* Background color dari text */
.hero-inner{
background: rgba(207, 0, 0, 0.5);
padding: 20px;
}
Catatan.
Perhatikan bagian link background yang saya tandai, kalian bisa menggantinya dengan URL gambar yang kalian punya.
Baca juga :Cara memasang footer 3 kolom pada blog
Nah setelah membuat file CSSnya,kita lanjutkan bagaimana menghubungkan file css3 dengan html.
Menghubungkan file CSS dan HTML hero Image.
Menghubungkan file CSS dengan HTML bisa dilakukan dengan pemanggilan file CSS dengan atribut link pada bagan HTML.
Berikut ini caranya.
- Buka dan edit file HTML yang kalian buat.
- Kalian tuliskan atau copy atribut link eksternal CSS berikut.
- Perhatikan yang saya tandai, kalian ubah sesuai nama file CSS yang ingin dihubungkan dengan file HTML.
- Lalu kalian pastekan atribut tersebut pada markup HTML diantara <head> ... </head>, atau lihat contoh berikut.
- Done dan simpan.
<link rel="stylesheet" href="style.css">
<head>
<link rel="stylesheet" href="style.css">
</head>
Baca : Pasang download box responsif pada blogger
Begitulah cara mudah membuat gambar dengan text diatasnya. Sekian dari saya.