Spritz Logo

Weaving the Power of the Web into Your Business!

Gradients / Vertical Centering of Text

The most common and useful type of gradient is the linear-gradient(). The gradients "axis" can go from left-to-right, top-to-bottom, or at any angle you choose. Not declaring an angle will assume top-to-bottom. The new gradient syntax uses angle, direction and color-stops, and is supported in most modern browsers.

An online presence is your single most important marketing tool. Use a firm that has the right knowledge, tools, and techniques for maximizing your website's effectiveness; use a firm that can design and develop the website that your business needs and deserves. Our web design and development services are versatile.

An online presence is your single most important marketing tool. Use a firm that has the right knowledge, tools, and techniques for maximizing your website's effectiveness; use a firm that can design and develop the website that your business needs and deserves. Our web design and development services are versatile.

An online presence is your single most important marketing tool. Use a firm that has the right knowledge, tools, and techniques for maximizing your website's effectiveness; use a firm that can design and develop the website that your business needs and deserves. Our web design and development services are versatile.

/* Tilted 45 degrees, going from blue to red */
linear-gradient(45deg, blue, red);

/* Going from bottom right to top left corner,
starting blue and finishing red */
linear-gradient(to left top, blue, red);

/* A gradient going from bottom to top,
starting blue, turning green at 40% of its length, and finishing red */
linear-gradient(0deg, blue, green 40%, red);

The paragraphs in the boxes above are centered using flexbox.  For more info on centering, see CSS Tricks. To use a gradient generator with old CSS syntax, see Colorzilla.


CSS3 Animations

Text Fade In

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eu metus. Sed auctor elementum odio. Pellentesque posuere rutrum tortor. Pellentesque sed ligula quis ligula porttitor elementum. Nam hendrerit blandit mi. Aliquam magna nibh, tincidunt quis, dignissim nec, facilisis vitae, lectus. Quisque eget quam sit amet turpis varius adipiscing.

For more text animations, see scrolling-text.html.


HTML Characters/Symbols

Click here for a complete list of all HTML symbols and entities.

© = ©

® = ®

∘ = ∘

™ = ™

ũ = ũ

℉ = ℉