Membuat Gradasi Dengan PHP
kali ini saya akan share tutorial cara membuat gradien atau gradasi warna dengan PHP, pengertian gradasi warna sendiri adalah corak warna yang bisa di kembangkan dari dua warna atau lebih
dengan kata lain gradasi warna adalah perkembangan warna atau perubahan warna yang terjadi jika dua warna atau lebih di gabungkan
ok langsung saja ke inti pembahasan, pertama buat lah projek dengan nama terserah anda kemudian buat file dengan nama function.php dan salin kode berikut
<?phpsetelah itu buat buat file lagi dengan nama index.php kemudian salin kode berikut
// convert hex to rgb
function hex2rgb($hex) {
$hex = str_replace('#', '', $hex);
// jika hex 3 digit
if(strlen($hex) == 3) {
$red = hexdec(substr($hex,0,1).substr($hex,0,1));
$green = hexdec(substr($hex,1,1).substr($hex,1,1));
$blue = hexdec(substr($hex,2,1).substr($hex,2,1));
// jika hex lebih dari 3 digit
} else {
$red = hexdec(substr($hex,0,2));
$green = hexdec(substr($hex,2,2));
$blue = hexdec(substr($hex,4,2));
}
// set data rgb
$rgb = array('red'=>$red, 'green'=>$green, 'blue'=>$blue);
return $rgb;
}
// set gradien
// $start type sting hex
// $end type sting hex
// $level type integer
function gradient($start, $end, $level) {
// convert hex $start to rgb
$start = hex2rgb($start);
// convert hex $end to rgb
$end = hex2rgb($end);
$step['red'] = ($start['red'] - $end['red']) / ($level - 1);
$step['green'] = ($start['green'] - $end['green']) / ($level - 1);
$step['blue'] = ($start['blue'] - $end['blue']) / ($level - 1);
// set response gradien
$gradient = array();
// loop color by level
for($i=0; $i<$level;$i++) {
$red = floor($start['red'] - ($step['red'] * $i));
$green = floor($start['green'] - ($step['green'] * $i));
$blue = floor($start['blue'] - ($step['blue'] * $i));
$hex['red'] = sprintf('%02x', $red);
$hex['green'] = sprintf('%02x', $green);
$hex['blue'] = sprintf('%02x', $blue);
// push to response gradien
array_push($gradient, implode(NULL, $hex));
}
return $gradient;
}
<?php require_once __DIR__.'/function.php'; ?>kemudian buka projek yang sudah anda buat dengan browser jika tidak terjadi error maka anda akan mendapatkan tampilan gradasi atau gradien dari warna Merah, Kuning, Hijau dan Biru
<!DOCTYPE html>
<html>
<head>
<title>MEMBUAT GRADIENT DENGA PHP</title>
</head>
<body>
<table border="1" width="600">
<thead>
<tr>
<td colspan="2"><center>MEMBUAT GRADIEN DI PHP</center></td>
</tr>
</thead>
<tbody>
<tr>
<td>
<?php
//
$gradients = gradient('#F7F7F7', '#B60000', 5);
foreach ($gradients as $gradient) {
echo '<div style="width: 100%; height: 35px; background-color: #'.$gradient.'"></div>';
}
?>
</td>
<td>
<?php
//
$gradients = gradient('#F7F7F7', '#F6D937', 5);
foreach ($gradients as $gradient) {
echo '<div style="width: 100%; height: 35px; background-color: #'.$gradient.'"></div>';
}
?>
</td>
</tr>
<tr>
<td>
<?php
//
$gradients = gradient('#F7F7F7', '#1A9809', 5);
foreach ($gradients as $gradient) {
echo '<div style="width: 100%; height: 35px; background-color: #'.$gradient.'"></div>';
}
?>
</td>
<td>
<?php
//
$gradients = gradient('#F7F7F7', '#344DAA', 5);
foreach ($gradients as $gradient) {
echo '<div style="width: 100%; height: 35px; background-color: #'.$gradient.'"></div>';
}
?>
</td>
</tr>
</tbody>
</table>
</body>
</html>
anda bisa merubah sendiri jumlah gradasi yang akan di tampilkan dengan mengubah jumlah $level, dalam tutorial ini saya hanya sampai level 5
Ok, sampai disini dulu tutorial kali ini, selamat mencoba dan semoga bisa bermanfaat
DONASI VIA PAYPAL
Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://apaitu10.blogspot.com/. Terima kasih.
Postingan Lebih Baru
Postingan Lebih Baru
Postingan Lama
Postingan Lama
Komentar