Blog post 3: linear-gradient colors

I would like to try a color gradient on an area on my own website. So far, I only know how to create a division with the same color. An area with gradient colors creates natural boundary between different divisions. It can also highlight the division mildly and naturally.

This is a simple division from Wix.com, where I searched for good CSS functions’ effects. It’s quite simple but it elucidates well how I should set the color as linear-gradient.  Here is the final effect: The color of background goes from grey to white from left to right. Though the color is a bit light, the CSS codes reflected how linear-gradient works.

blog3.1

As the image above shows, the right parts of the div is white, and mixed naturally with the white background, while the left part of the division is grey, which creates a natural boundary from the white background. Overall, this small area is highlighted by the grey gradient background but not bold or distracting.

blog3

Here is the codes:

.socialButtons {
background: none repeat scroll 0 0;

background-image: linear-gradient(right , #FFFFFF 0%, #FCFCFC 23%);
background-image: -o-linear-gradient(right , #FFFFFF 0%, #FCFCFC 23%);
background-image: -moz-linear-gradient(right , #FFFFFF 0%, #FCFCFC 23%);
background-image: -webkit-linear-gradient(right , #FFFFFF 0%, #FCFCFC 23%);
background-image: -ms-linear-gradient(right , #FFFFFF 0%, #FCFCFC 23%);

background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0, #FFFFFF),
color-stop(0.23, #FCFCFC)
);

float: right;
height: 31px;
padding: 7px 0;
}

The core part determines the linear-gradient color is:

background-image: linear-gradient(right , #FFFFFF 0%, #FCFCFC 23%);

Background-image is a section of linear-gradient color. Starting from right, it will turn from white (#FFFFFF) to light grey (#FCFCFC). The white section starts from 0%, which means the right end of the division. The grey section starts from 23% length of the division, which means grey takes up over 70% length of the division.

W3School introduced more about gradient colors.

  • In this case, the gradient color goes horizontally. But in linear-gradient syntax, I can also set the angle.

background: -webkit-linear-gradient(30deg, #FFFFFF 0%, #FCFCFC 23%);

  • In this case, there are only two colors. But there can be multiple colors:

background: -webkit-linear-gradient(red, green, blue);

  • Besides linear-gradient colors, there can be radical-gradients, which is a circular pattern:

background: radial-gradient(shape size at position, start-color, …, last-color);

Advertisements

About Yizhu Wang

A second-year graduate student in Missouri School of Journalism. She studies print/digital journalism with a focus on business reporting. She is interested in utilizing multimedia and technology to strengthen the presentation of news stories. Yizhu is originally from Shanghai, China.

One thought on “Blog post 3: linear-gradient colors

  1. I think the gradient effect is pretty cool, and a really simple and effective way to add some design to a website. The simplicity of the coding makes it really practical too, and something that we can all integrate into our sites if we want too.

    I like how you included more info from W3Schools. I didn’t really think about whether or not you could try a gradient with more than two colors, at an angle or radially. This could be a neat effect to use on a header of a website, or a toolbar or something.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s