Maybe you'd like the animation to last for a while, then finally settle on the last gradient. ![]() Just go into the code and change them to what you want. But don't feel you need to be limited to them. You'll see that the tool presets the duration of the animation to 30s, i.e., thirty seconds, with "ease" as the animation timing function, and "infinite" as the animation iteration count. The tool automatically sets the rule, so you don't need to worry about that. The length and type of animation will have more of an effect. Just get the general direction right: top, bottom, right, left. The gradient and scroll angles are worth playing with, but don't worry about them too much. Simply choose the colors you want, plus gradient angle and scroll angle. Ian Forrest's CSS Gradient Animator is an excellent tool that should be all you need. Let's say the colors are orange, yellow, and red. For your gradient you would want the color order to be yellow, orange, and red. That way there is a sense of a coherent sweep, instead of just a confusing mess of colors. Generally speaking, you'll want the colors in the middle of the gradient (if there are more than two colors) to lie in between the ones on the outside on the color spectrum. On the other hand, if you're going for big, popping and dramatic, this might be a good time to go for it.Īlso, think about where the colors you're choosing fall on the color spectrum. Just two well-chosen colors suffice to add some drama, while preserving the sense that you have things under control. Be wary of using too many colors unless you have a specific idea. That way you reinforce your brand and give the site a sense of coherence. I recommend choosing colors that match or complement the color palette you use on your site. In most cases you'll add CSS to your Squarespace site by going to Design > Custom CSS in the Style Editor. If, for example, you have an index page section in the Brine template named "grandma", the code would look like this: It works exactly the same as I outlined in the earlier post on CSS background patterns: just put the code in between the curly brackets that follow the page or block identifier. You'll need to identify the page or block you want to add the animated color gradient to. The main ones are the rule to govern the animation, the angles, and the background size. I use an animated color gradient as a background for a section on the Marksmen Studio homepage.Īdding an animated gradient background is similar to adding a gradient background that is not animated, except that we have to throw in some extra elements. But the sweeping animated gradient, which utilizes the color palette from the image at the top of the index page, gives it a cool, sophisticated look. It's just a contact form with some CSS styling. Check out the footer on this Squarespace website by Pocketknife. (Note: sometimes color gradients are called ombré, though that refers to gradations within the same color family.)ĭone properly, animated gradients can add a nice touch to an otherwise unremarkable page, or even completely alter how it's perceived. What are animated gradients?Īnimated color gradients are gradients that shift along a background according to a defined formula, either infinitely or for a specified number of iterations. ![]() Now it's time to play with a different kind of background: animated gradients. I've also posted on adding a color gradient border with CSS, changing Squarespace's announcement bar's background to a color gradient. ![]() ![]() In an earlier post, we covered adding CSS background patterns in Squarespace.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |