Created
January 2, 2019 17:44
-
-
Save pale2hall/6613782c0de6f1669bb0d3e56beb2849 to your computer and use it in GitHub Desktop.
PHP Function for CSS Gradients from Array of Colors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>PHP Color Gradient</title> | |
| <style media="screen"> | |
| .gradient{ | |
| width: 100%; | |
| height:2rem; | |
| padding-top:1rem; | |
| padding-bottom:1rem; | |
| text-align: center; | |
| color:rgba(255,255,255,.2); | |
| border:1px solid black; | |
| } | |
| .gradient:hover{ | |
| color:white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <?php | |
| function cssGradient($colors, $direction = "to right"){ | |
| $colorCount = count($colors); | |
| $css = ""; | |
| $i = 0; | |
| foreach($colors as $color){ | |
| $percent = round($i * (100/($colorCount - 1))); | |
| if($i > 0) $css .= ", "; | |
| $css .= "$color $percent%"; | |
| $i++; | |
| } | |
| return "linear-gradient($direction, $css );"; | |
| } | |
| $colors= [ '#32c6f4', '#2eb1e6', '#3880bf', '#20a760', '#108153', '#bad531', '#6db744'];?> | |
| <div class="gradient" style="background: <?=cssGradient($colors)?>"><?=cssGradient($colors)?></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment