Triks membuat header blog bergelombang menggunakan CSS dan SVG

Dan trend desain halaman web dari waktu ke waktu telah berubah, yang paling revolusioner adalah desain responsif peralihan dari dominasi desain web desktop menjadi desain mobile. 

Lalu beberapa jenis template kemudian memiliki ciri ciri desain khas, diantaranya dengan latar header bergelombang (wave header design) diantarnya bahkan dengan pola pola yang acak dan chaos, benar gak sih istilah itu? Maklum saya masih harus banyak banyak belajar.

1. Trik CSS

Trik CSS adalah yang paling sederhana dan ringan, ya CSS generasi ke 3, namun jika Anda telah menguasai trik SVG, tentu saja itu lebih baik secara estitika. Untuk membuat pengaturan CSS kita hanya perlu mengejas pengaturan nilai nilai (angka) nya agar setiap sisi pembatas tampak rapi. Bagaimana cara membuatnya?

Disini saya akan membahasnya secara terpisah, di mulai dari trik rekayasa CSS terlebih dahulu, kemudian di susul dengan trik menggunakan SVG.

Kita dapat meyiasati pembuatannya dengan trik CSS ini, menyulam dan mengayamnya menjadi sebuah pekerjaan seni yang indah. 

Sebenarnya trik 'menyulam' dan 'mengayam' ini sangat umum dilakukan oleh para desainer web. Melalui pelajaran mewarnai yang ada di halaman w3school saya mencoba melakukan eksprimen dan saya rasa itu bekerja dengan baik.

a. tambahkanCSS

Saya membuat pengaturan CSS berikut, dan mengikuti perubahan setiap perngaturan angka angka yang saya robah melalui form editorial HTML codepen, kode CSS-nya adalah:

#gelombang {
position: relative;
height: 71px;
width: 601px;
background: #CC00CC;
}
#gelombang:before {
content: "";
display: block;
position: absolute;
border-radius: 93% 60%;
width: 340px;
height: 83px;
background-color: white;
right: -12px;
top: 45px;
}
#gelombang:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 84px;
background-color: #CC00CC;
left: -10;
top: 28px;
}

b. Tambahkan HTML

Dan tentu saja masalahnya adalah background tidak boleh berada pada layer atas sehingga menutupi Text judul, tidak juga menggeser judul kebawahnya. Judul harus berada tepat di atas layer header. Untuk itu tidak perlu menggunakan pengaturan z-index, cukup dengan menuliskan ID dan classnya saja:

<div id="gelombang" class="judul">

  <h1><font color='white'>Judul:</font></h1></div>

Hasilnya adalah:

See the Pen header bergelombang by Sufyan Yaan (@sufyan-yaan) on CodePen.

Model di atas masih jauh dari kata sempurna, namun dapat diterapkan pada template template HTML/CSS.

2. Trik SVG + CSS

Atau jika menggunakan teknik SVG, teknik ini yang paling masuk akal dapat di praktikan dengan mudah karena memang sudah di lakukan oleh banyak para desainer web:

Kita dapat membentuk bagian header di dalam template sebagai berikut:

a. Tambahkan HTML

<header>

  <h1>Judul Blog</h1>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">

    <polygon class="svg--sm" fill="white" points="0,0 30,100 65,21 90,100 100,75 100,100 0,100"/>

    <polygon class="svg--lg" fill="white" points="0,0 15,100 33,21 45,100 50,75 55,100 72,20 85,100 95,50 100,80 100,100 0,100" />

  </svg>

</header>

Dan menambahkan pengaturan CSS:

b. Tambahkan CSS 

header {

  position: relative;

  height: 300px;

  background-image: linear-gradient(#FF00CC, #f1f1f1);

}

h1 {

  padding: 100px 0;

  font: 44px "Arial";

  text-align: center;

}

header h1 {

  color: white;

}

svg {

  position: absolute;

  bottom: 0;

  width: 100%;

  height: 90px;

}

@media (max-width: 699px) {

  .svg--lg {

    display: none;

  }

}

@media (min-width: 700px) {

  .svg--sm {

    display: none;

  }

}

Oleh karena penggunaan svg juga adalah dengan pengaturan CSS, maka pengaturan CSS-nya  SVG ini hampir tiada bedanya dengan cara CSS di atas.

Demo:

See the Pen GRNrvYL by Sufyan Yaan (@sufyan-yaan) on CodePen.

Atau lihat detail demo nya.:

DEMO

Kedua cara di atas sama simplenya.

Demikian sekilas triks membuat header blog dengan latar warna bergelombang menggunakan CSS yang dapat di terapkan pada template blogger.

3. Trik CSS dengan efek Gradasi Warna

Pada template editblogtema kami menggunakan trik yang hampir sama ke dalam header dan footer dengan cara pertama di atas: Memanfaatkan kombinasi warna CSS. Namun dengan pekerjaan yang jauh lebih simpel, perhatikan sumber kode CSS latar header-nya:

a. Bagian CSS-nya:

<style>

body {

  margin: 0;

  font-size: 28px;

  font-family: Arial, Helvetica, sans-serif;

}

.header {

  position: relative;

 text-align: center;

  padding: 30px;

  height: 120px;

  background-image: linear-gradient(#660033, #fff);

}

#navbar {

  overflow: hidden;

  background-color: #fff;

}

#navbar a {

  float: left;

  display: block;

  color: #555;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

}

#navbar a:hover {

  background-color: #ddd;

  color: black;

}

#navbar a.active {

  background-color: #ddd;

  color: #555;

}

.content {

  padding: 16px;

}

.sticky {

  position: fixed;

  top: 0;

  width: 100%;

}

.sticky + .content {

  padding-top: 60px;

}

</style>

b. Bagian HTMLnya:

<div class="header">
<h2>Judul Blog</h2>

</div>
<div id="navbar">
<a class="active" href="/">Beranda</a>
<a href="javascript:void(0)">Perihal</a>
<a href="javascript:void(0)">Blog</a>
</div>

DEMO: 

See the Pen LATAR HEDER DENGAN CSS by Sufyan Yaan (@sufyan-yaan) on CodePen.

Lihat selengkapnya: 

DEMO

Gaya atau style latar yang kami pergunakan ini juga lebih kurang telah di pakai oleh Google untuk homepage browser chrome..

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: