Monday, March 25, 2013

Gradient Background (3 Colors)

Hey guys! Sorry for not posting in a while; too much schoolwork! But don't worry, I promise to start posting at least twice a week again. Now, I've been getting a lot of questions on how to make gradient backgrounds. I use a pretty advanced code that can get confusing, since it can include really up to 10 colors. But here's a simpler one that allows for 3 (one color fading into another, fading into another):

;background-image: -webkit-gradient(linear, 0% 11%, 66% 100%, from(#4799c9), color-stop(0.6, #20a3bd), to(#14f5cf));"


Now, in order for this code to work, you must insert it directly after the height and width of your presentation. So, it should come out looking something like this:

<p id="&copy; StitchdTogether" style="margin: auto; padding: 10px; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; text-align: center; width: 550px; background-image: -webkit-gradient(linear, 0% 11%, 66% 100%, from(#4799c9), color-stop(0.6, #20a3bd), to(#14f5cf));" title="&copy; StitchdTogether">

And remember that anything highlighted you can edit and change. Definitely experiment with this code, it can come out looking amazing if you put a little bit of effort into it!

Thanks guys, and please be sure to leave credit to the blog!

♪ αυтυми

No comments:

Post a Comment