Skip to content

Instantly share code, notes, and snippets.

@quisido
Created August 2, 2018 17:10
Show Gist options
  • Save quisido/7c9122f8ad2b0dd42e7d93997b045ec4 to your computer and use it in GitHub Desktop.
Save quisido/7c9122f8ad2b0dd42e7d93997b045ec4 to your computer and use it in GitHub Desktop.
Creating a Dynamic Vertical Gradient in PHP
<style type="text/css">
#my-site-header {
background-color: #FFFFFF;
/* gradient: 16px height, #ffffff start, #404080 end */
background-image: url("http://i.imgur.com/4L3aj.gif");
background-position: left bottom;
background-repeat: repeat-x;
}
#my-site-header h1 {
padding: 6pt 0;
text-align: center;
}
#my-site-header h1,
#my-site-navigation ul {
margin: 0;
text-align: center;
}
#my-site-navigation {
background-color: #404080;
padding: 3pt 0 6pt 0;
}
#my-site-navigation a {
color: #ffffff;
text-decoration: none;
}
#my-site-navigation li {
display: inline;
list-type: none;
padding: 0 6pt;
}
</style>
<div id="my-site-header">
<h1>Charles Stover's Website</h1>
</div>
<div id="my-site-navigation">
<ul>
<li><a href="https://charlesstover.com/" title="CharlesStover.com">Charles Stover</a></li>
<li><a href="https://twitter.com/charlesstover" title="Charles Stover (charlesstover) on Twitter">Twitter</a></li>
<li><a href="https://mtgeni.us/" title="MTGeni.us">MTGeni.us</a></li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment