Tulisan kali ini isinya adalah berbagi tentang contoh CSS gradasi warna untuk background color pada header pada blog. Jika bosan dengan warna polos, atau hendak mengganti background image pada header dengan CSS untuk meringankan loading blog, maka tulisan ini bisa membantu.
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.
CSS maximum compatibility dengan IE6+:
Semoga ada background-color gradasi untuk header yang cocok dengan selera Anda. Selamat mencoba.
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.
Sponsored Link
Sponsored Link
Sponsored Link
Bagikan ke:
Facebook, Twitter, WhatsApp, Telegram, Email. Print!.