Blog. Just Blog

Градиентный фон на PHP

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Градиентный фон на PHP
Градиентный фон на PHP

Продолжаем работать с графикой на PHP. Сегодня будем рисовать градиентную заливку фона, когда один цвет плавно перетекает в другой.

Для горизонтального градиента у меня получился следующий скрипт. Размеры фона, а также начальные и конечные цвета задаются в первых строчках.
  1. // Размеры изображения
  2. $width=600;
  3. $height=225;
  4. // Начальный цвет градиента
  5. $start_color=0x55FFFF;
  6. // Конечный цвет градиента
  7. $end_color=0xFF0000;
  8.  
  9. $R1=($start_color >> 16) & 0xFF;
  10. $G1=($start_color >> 8) & 0xFF;
  11. $B1=$start_color 0xFF;
  12.  
  13. $R2=($end_color >> 16) & 0xFF;
  14. $G2=($end_color >> 8) & 0xFF;
  15. $B2=$end_color 0xFF;
  16.  
  17. $im=ImageCreateTrueColor($width$height);
  18.  
  19. // Нарисовать горизонтальный градиент
  20. for ($x=0$x<$width$x++) {
  21.     $R=$R1-round(($R1-$R2)/$width*$x);
  22.     $G=$G1-round(($G1-$G2)/$width*$x);
  23.     $B=$B1-round(($B1-$B2)/$width*$x);
  24.     $color=ImageColorAllocate($im,$R,$G,$B);
  25.     ImageLine($im,$x,0,$x,$height,$color);
  26. }
После этого готовое изображение можно вывести в браузер или использовать для дальнейшей работы, накладывая на него нужные элементы. Чтобы нарисовать вертикальный градиент, немного меняется основной цикл, остальные параметры остаются прежними:
  1. // Нарисовать вертикальный градиент
  2. for ($y=0$y<$height$y++) {
  3.     $R=$R1-round(($R1-$R2)/$height*$y);
  4.     $G=$G1-round(($G1-$G2)/$height*$y);
  5.     $B=$B1-round(($B1-$B2)/$height*$y);
  6.     $color=ImageColorAllocate($im,$R,$G,$B);
  7.     ImageLine($im,0,$y,$width,$y,$color);
  8. }
Градиентный фон можно использовать, например, для создания эффектной рамки вокруг превьюшки на основании усредненного цвета верхней и нижней границы изображения. Также можно сделать более сложный вариант, например, тройной градиент, в этом случае фон до половины заливается градиентом от Цвета1 до Цвета2, а от половины до конца от Цвета2 до Цвета3. Это вы уже можете сделать самостоятельно.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 328 | Комментариев: 0

Метки: PHP, графика

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2019
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0034 сек.) / Память: 4.75 Mb
Наверх