Sebagaimana terlihat, ketika tulisan ini dibuat, blog ini sedang menggunakan gradasi warna latar untuk header, yang sebelumnya berwarna polos satu warna saja. Gradasi warna juga digunakan di bagian paginasi, yaitu taut sebelum dan sesudah tulisan, dan pada footer.
Halaman blog yang sebelumnya terlihat datar saja, kini ada sedikit warna, dan bagi sebagian orang mungkin lebih enak dilihat. Ya, ini memang soal selera, yang sering tak bisa diperdebatkan dan tak ada benar salah. Yang ada hanya suka, lebih suka, sangat suka, atau kebalikannya.
Berikut ada contoh gradasi warna untuk background color pada header, dan kode CSS-nya.
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: -moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(189,195,199,1) 0%, rgba(44,62,80,1) 100%);
CSS maximum compatibility dengan IE6+:
background: rgb(2,0,36);
background: -moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(44,62,80,1) 0%, rgba(189,195,199,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(44,62,80,1) 0%, rgba(189,195,199,1) 100%);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(44,62,80,1) 0%, rgba(189,195,199,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#bdc3c7",GradientType=1);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(33,147,176,1) 0%, rgba(70,194,223,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(73,50,64,1) 0%, rgba(189,10,117,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(238,156,167,1) 0%, rgba(255,194,201,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(147,41,30,1) 0%, rgba(237,33,58,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(78,84,200,1) 0%, rgba(126,131,222,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(17,153,142,1) 0%, rgba(50,207,109,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(134,168,231,1) 0%, rgba(138,223,217,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(185,29,115,1) 0%, rgba(235,79,187,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(241,39,17,1) 0%, rgba(227,163,26,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(101,78,163,1) 0%, rgba(224,170,193,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,75,43,1) 0%, rgba(255,65,108,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,131,176,1) 0%, rgba(4,169,205,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,94,98,1) 0%, rgba(242,147,100,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(47,128,237,1) 0%, rgba(84,197,233,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(228,77,38,1) 0%, rgba(241,101,41,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(231,56,39,1) 0%, rgba(248,80,50,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(106,48,147,1) 0%, rgba(152,66,241,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(31,28,24,1) 0%, rgba(142,14,0,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(244,107,69,1) 0%, rgba(238,168,73,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(240,152,25,1) 0%, rgba(226,211,88,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(35,37,38,1) 0%, rgba(65,67,69,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(194,21,0,1) 0%, rgba(250,197,16,1) 100%);
aroengbinang.com
CSS standar:background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(6,23,0,1) 0%, rgba(80,182,52,1) 100%);
Lihat Video
Semoga ada background-color gradasi untuk header yang cocok dengan selera Anda. Selamat mencoba.Diubah: Mei 26, 2020.
Label: CSS, Tutorial
Bagikan ke: WhatsApp, Email. Print!.