Beberapa Contoh untuk Membuat Kombinasi Warna Background

Silahkan bagikan :

۞ السَّــــــلاَمُ عَلَيْــــــكُمْ وَرَحْمَــةُ اللــــهِ وَبَرَكَاتُــــــــــهُ ۞

۞ بســـــــــــــم اللّـــه الرّحمٰن الرّحيـــــــــــــم ۞

-----------------------------------------------------------------------

Kode CSS

height: 35px;
width: 100px;
border: 1px solid #ff0000;
background: #ff0000; 
background: -moz-linear-gradient( center top, white 20%, #ff0000 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ff0000) );

Kode HTML

<div style="height: 35px; width: 100px; border: 1px solid #ff0000; background: #ff0000;background: -moz-linear-gradient( center top, white 20%, #ff0000 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ff0000) );"></div>

Kode CSS

height: 35px; 
width: 100px;
border: 1px solid #ff9900;
background: #ff9900; 
background: -moz-linear-gradient( center top, white 20%, #ff9900 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ff9900) );

Kode HTML

<div style="height: 35px; width: 100px; border: 1px solid #ff9900; background: #ff9900;background: -moz-linear-gradient( center top, white 20%, #ff9900 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ff9900) );"></div>

Kode CSS

height: 35px; 
width: 100px;
border: 1px solid #ffff00;
background: #ffff00; 
background: -moz-linear-gradient( center top, white 20%, #ffff00 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ffff00) );

Kode HTML

<div style="height: 35px; width: 100px; border: 1px solid #ffff00; background: #ffff00;background: -moz-linear-gradient( center top, white 20%, #ffff00 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ffff00) );"></div>

Kode CSS

height: 35px; 
width: 100px;
border: 1px solid #00ff00;
background: #00ff00; 
background: -moz-linear-gradient( center top, white 20%, #00ff00 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #00ff00) );

Kode HTML

<div style="height: 35px; width: 100px; border: 1px solid #00ff00; background: #00ff00;background: -moz-linear-gradient( center top, white 20%, #00ff00 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #00ff00) );"></div>

Kode CSS

height: 35px; 
width: 100px;
border: 1px solid #00ffff;
background: #00ffff; 
background: -moz-linear-gradient( center top, white 20%, #00ffff 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #00ffff) );

Kode HTML

<div style="height: 35px; width: 100px; border: 1px solid #00ffff; background: #00ffff;background: -moz-linear-gradient( center top, white 20%, #00ffff 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #00ffff) );"></div>

Kode CSS

height: 35px; 
width: 100px;
border: 1px solid #0000ff;
background: #0000ff; 
background: -moz-linear-gradient( center top, white 20%, #0000ff 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #0000ff) );

Kode HTML

<div style="height: 35px; width: 100px; border: 1px solid #0000ff; background: #0000ff;background: -moz-linear-gradient( center top, white 20%, #0000ff 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #0000ff) );"></div>

Kode CSS

height: 35px; 
width: 100px;
border: 1px solid #9900ff;
background: #9900ff; 
background: -moz-linear-gradient( center top, white 20%, #9900ff 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #9900ff) );

Kode HTML

<div style="height: 35px; width: 100px; border: 1px solid #9900ff; background: #9900ff;background: -moz-linear-gradient( center top, white 20%, #9900ff 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #9900ff) );"></div>

Kode CSS

height: 35px; 
width: 100px;
border: 1px solid #ff00ff;
background: #ff00ff; 
background: -moz-linear-gradient( center top, white 20%, #ff00ff 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ff00ff) );

Kode HTML

<div style="height: 35px; width: 100px; border: 1px solid #ff00ff; background: #ff00ff;background: -moz-linear-gradient( center top, white 20%, #ff00ff 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ff00ff) );"></div>

Kode CSS

height: 35px; 
width: 100px;
border: 1px solid #000000;
background: #000000; 
background: -moz-linear-gradient( center top, white 20%, #000000 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #000000) );

Kode HTML

<div style="height: 35px; width: 100px; border: 1px solid #000000; background: #000000;background: -moz-linear-gradient( center top, white 20%, #000000 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #000000) );"></div>

۞ الحمد لله ربّ العٰلمين ۞

-----------------------------------------------------------------------