Introduction to Gradient Colors Instead of one uniform color, you can paint a box or element with a set of transitioning colors. The combination of colors is referred to as gradient. To support this, you can use the background style. The value of this style is given by a call to a function that takes specific arguments.
A Linear Gradient With Two Colors The linear gradient is a one-directional change of colors. The color can change from one border or corner to another border or corner. To do this, you can call a function named linear-gradient and assign to the background style. The function uses different formulas. One syntax is as follows: linear-gradient(start-color, end-color); This color arguments are required. The first color specifies the color by which to start. The second color specifies the ending color. Here is an example: <html>
<head>
<title>Project Management</title>
<style>
#whole { background: linear-gradient(Navy, LightBlue); }
#head-portion {
position: relative;
top: 0;
left: 0;
right: 0;
height: 2.60em;
width: auto;
text-align: center;
background: Brown; }
.main-title {
text-align: center;
font-weight: bold;
color: Yellow;
font-size: 0.86cm;
text-shadow: 0.10cm 0.10cm 0.02cm Black;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif; }
#central {
position: relative;
top: 0.05em;
left: 0;
height: auto;
width: auto;
right: 0;
bottom: 5.5em; }
#bottom-part {
position: relative;
top: auto;
left: 0;
width: auto;
right: 0;
height: 4.5em;
bottom: 0;
background: Maroon; }
.description {
text-align: justify;
word-break: keep-all;
color: Yellow;
font-family: Georgia, Garamond, Times New Roman, serif; }
.references {
color: #FFF;
text-align: center; }
</style>
</head>
<body id="whole">
<header id="head-portion">
<p class="main-title">Project Management</p>
</header>
<div id="central">
<p class="description">A project is an adventure that creates an object or
accomplishes a specific purpose. To meet its ends, a project must be described
(mentally or written down). It is conducted by one person or a team. It must have
a begining. Although it should have an end, the majority of projects do not. A
project can be personal, social, technical, business-based, or
government-oriented.</p>
<p class="description">Project management is the process by which a project is
conducted from begining to end, or until it is suspended, as it happens to
many projects. Project management involves planing the adventure, gathering the
appropriate team, getting or designing the necessary resources, conducting the
project, overviewing the project based on its defined scope, and ending it.</p>
</div>
<footer id="bottom-part">
<p class="references">About PM | Types of Projects | Training | Resources</p>
<p class="references">Copyright © 2015</p>
</footer>
</body>
</html>
<style>
This would produce:
The above code applied the color gradient to the whole page. If you want, you can apply the gradient color to only a box. Here is an example: <html>
<head>
<title>Project Management</title>
<style>
#whole { background-color: AntiqueWhite; /*linear-gradient(Navy, LightBlue);*/ }
#head-portion {
position: relative;
top: 0;
left: 0;
right: 0;
height: 2.60em;
width: auto;
text-align: center;
background: Brown; }
.main-title {
text-align: center;
font-weight: bold;
color: Yellow;
font-size: 0.86cm;
text-shadow: 0.10cm 0.10cm 0.02cm Black;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif; }
#central {
background: linear-gradient(Navy, LightBlue);
position: relative;
top: 0.05em;
left: 0;
height: auto;
width: auto;
right: 0;
bottom: 5.5em; }
#bottom-part {
position: relative;
top: auto;
left: 0;
width: auto;
right: 0;
height: 4.5em;
bottom: 0;
background: Maroon; }
.description {
text-align: justify;
word-break: keep-all;
color: Yellow;
font-family: Georgia, Garamond, Times New Roman, serif; }
.references {
color: #FFF;
text-align: center; }
</style>
</head>
<body id="whole">
<header id="head-portion">
<p class="main-title">Project Management</p>
</header>
<div id="central">
<p class="description">A project is an adventure that creates an object or
accomplishes a specific purpose. To meet its ends, a project must be described
(mentally or written down). It is conducted by one person or a team. It must have
a begining. Although it should have an end, the majority of projects do not. A
project can be personal, social, technical, business-based, or
government-oriented.</p>
<p class="description">Project management is the process by which a project is
conducted from begining to end, or until it is suspended, as it happens to
many projects. Project management involves planing the adventure, gathering the
appropriate team, getting or designing the necessary resources, conducting the
project, overviewing the project based on its defined scope, and ending it.</p>
</div>
<footer id="bottom-part">
<p class="references">About PM | Types of Projects | Training | Resources</p>
<p class="references">Copyright © 2015</p>
</footer>
</body>
</html>
This would produce:
A Linear Gradient With an Angle As you can see from these previous screenshots, the default gradient direction is from top to bottom. If you want a different direction, the linear-gradient() function uses another syntax that is used to specify the direction of the gradient: linear-gradient(angle, start-color, end-color); The direction is provided as an angle:
A Linear Gradient With Three Colors Instead of one color, you can specify as many colors as you want. For example, you can create a linear gradient that takes three colors. In this case, the linear-gradient() function that uses three colors follows the following syntax: linear-gradient(color-1, color-2, color-3); Provide the colors separated by commas. Here is an example: <html>
<head>
<title>Linguistics</title>
<style>
body { margin: 0;
background: linear-gradient(180deg, Green, Red, Yellow); }
.main-title {
font-weight: bold;
color: Yellow;
font-size: 0.86cm;
text-align: center;
text-shadow: 0.18cm 0.18cm 0.02cm Black;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif; }
p { color: Yellow; }
p {
text-align: justify;
word-break: keep-all;
font-family: Georgia, Garamond, Times New Roman, serif;
}
</style>
</head>
<body>
<p class="main-title">Linguistics</p>
<p>Linguistics is the study of one or a family of languages. Linguistics studies the
science, the technology, the mechanical, and physical aspects that rule a language.
Linguistics scientifically describes the sound produced when a particular language
is spoken, how, and usually why a certain sound is produced. Linguistics does not
present or boast the beauties of a language, but linguistics can present some
lacking features or describes some strengths. These aspects would lead to bias,
deceiving the purpose of this science</p>
<p>Linguistics studies all aspects of a language, from humans, from animals, or
towards objects. When it comes to humans, linguistics studies the characteristics
by which the people who speak a certain language speak, or speak it, that way.
Linguistics is interested in any form of human communication, from one person to
another person.</p>
</body>
</html>
This would produce:
A linear gradient with two colors is used to create an effect of one color that transitions to another color. If you want to create a bump effect, provide three arguments to the linear-gradient() funtion where the first and the third arguments are the same color. Here is an example: <html>
<head>
<title>Social Science: Philosophy</title>
<style type="text/css">
.main-title
{
font-weight: bold;
color: Black;
font-size: 1.26cm;
text-align: center;
text-shadow: 0.14cm 0.14cm 0.12cm Silver;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
#title-banner, #central, #bottom-banner { width: 600px }
.description
{
font-size: 12pt;
text-align: justify;
font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator { width: 600px }
.link-box
{
float: left;
text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
display: inline-block;
height: 35px;
text-decoration: none;
width: 90pt;
line-height: 2.00em;
outline: 1pt solid #99F;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
color: #FFCC00;
background: linear-gradient(#00254A, #8CC6FF, #00254A);
}
#navigator a:active { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
color: #FFFF99;
background: linear-gradient(#004080, #3399FF, #004080);
}
#navigator p
{
width: 90pt;
color: #FFFF99;
}
.philosophic {
display: table;
outline: 3pt gray groove;
}
.philo-heading { display: table-row }
.philo-field, .philo-topic, .philo-issues,
.philo-value1, .philo-value2
{
height: 20pt;
line-height: 20pt;
display: table-cell
}
.philo-field, .philo-topic, .philo-issues
{
background-color: #333333;
outline: 1pt solid Gray;
}
.philo-field { width: 110pt }
.philo-topic { width: 70pt }
.philo-issues2 { width: 200pt }
.philo-title
{
height: 26pt;
line-height: 26pt;
font-weight: bold;
color: white;
font-family: "Comic Sans MS", Tahoma, sans-serif;
}
.philo-value2 { background-color: Silver;
outline: 1pt solid #FFF;
}
#bottom-banner
{
background: linear-gradient(#004080, #0066FF);
outline: 2pt solid #FFBE00;
}
#copyright
{
line-height: 2.00em;
text-align: center;
color: #FFCC00;
outline: 1pt solid orange;
}
#branches, #history, #resources { float: left }
#branches a:link, #branches a:active, #branches a:visited, #branches a:hover,
#history a:link, #history a:active, #history a:visited, #history a:hover,
#resources a:link, #resources a:active, #resources a:visited, #resources a:hover
{
height: 26px;
font-size: 12pt;
line-height: 26px;
text-decoration: none;
display: inline-block;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches, #branches a:link, #branches a:active,
#branches a:visited, #branches a:hover { width: 170px }
#history, #history a:link, #history a:active,
#history a:visited, #history a:hover { width: 150pt }
#resources, #resources a:link, #resources a:active,
#resources a:visited, #resources a:hover { width: 165pt }
#branches a:link, #history a:link, #resources a:link { color: #FFFF00 }
#branches a:active, #history a:active, #resources a:active { color: #CC99FF }
#branches a:visited, #history a:visited, #resources a:visited { color: #FFCC99 }
#branches a:hover, #history a:hover, #resources a:hover
{
color: #FFCCFF;
background-color: #0066CC;
display: inline-block;
outline: 1pt solid #CCFF33;
}
.clearance { clear: left }
</style>
</head>
<body>
<div id="title-banner">
<p class="main-title">Philosophy</p>
</div>
<div id="navigator">
<p class="link-box"><a href="index1.htm">Home</a></p>
<p class="link-box"><a href="research.htm">Research</a></p>
<p class="link-box"><a href="resources.htm">Resources</a></p>
<p class="link-box"><a href="aboutus.htm">About Us</a></p>
<p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>
<div class="clearance"></div>
<div id="central">
<p class="description">Philosophy is the study of existense (or being),
knowledge (or reasoning), and truth. Philosophy seeks to comprehend what
truth is, how to evaluate it, and how it influences thoughts and ethics.
Like other social science topics such as sociology or psychology, philosophy
examines both personal and crowd behavior but only as they relate to the
mind. An example is the thinking process that results in someone taking one
action rather than another (another person taking the same action or another
person taking a different action). Unlike the other social science fields,
philosophy doesn't concentrate on what is good or bad, or what is practical
or weird, or on how something should (is supposed to) be. Instead,
philosophy delves into the logic and the ethical reasons of what it (such
as something or a behavior) is.</p>
<p class="description">Some of the most regular fields of study in philosophy
are:</p>
</div>
<div class="philosophic">
<div class="philo-heading">
<div class="philo-field philo-title">Philosophic Field</div>
<div class="philo-topic philo-title">Topic</div>
<div class="philo-issues philo-title">Issues</div>
</div>
<div class="philo-heading">
<div class="philo-value1">Epistemology</div>
<div class="philo-value1">Knowledge</div>
<div class="philo-value1">Truth, perception, belief, justification</div>
</div>
<div class="philo-heading">
<div class="philo-value2">Logic</div>
<div class="philo-value2">Reason</div>
<div class="philo-value2">Deduction (deductive reasoning)<br>
Induction (inductive reseaning)</div>
</div>
<div class="philo-heading">
<div class="philo-value1">Metaphysics</div>
<div class="philo-value1">Reality</div>
<div class="philo-value1">Existence, time, causality</div>
</div>
<div class="philo-heading">
<div class="philo-value2">Aesthetics</div>
<div class="philo-value2">Beauty</div>
<div class="philo-value2">Art, beauty, taste</div>
</div>
</div>
<footer id="bottom-banner">
<div id="branches">
<p><a href="natural.htm">Natural Philosophy</a><br>
<a href="physical.htm">Physical Philosophy</a><br>
<a href="moral.htm">Moral Philosophy</a></p>
</div>
<div id="history">
<p><a href="philosophers.htm">Philosophers</a><br>
<a href="comparisons.htm">Ancient/Contemporary</a><br>
<a href="majors.htm">Universities</a></p>
</div>
<div id="resources">
<p><a href="philosophers.htm">Philosophers</a><br>
<a href="comparisons.htm">Ancient/Contemporary</a><br>
<a href="majors.htm">Universities/Colleges/Majors</a></p>
</div>
<p id="copyright">Copyright ©, 2015</p>
</footer>
</body>
</html>
This would produce:
A Linear Gradient With Many Colors A linear gradient can be created with as many colors as possible. In this case, the linear-gradient() function uses the following syntax: linear-gradient(angle, color-1, color-2, color-n, end-color); Here is an example that uses 5 colors: body { background: linear-gradient(180deg, Navy, Red, LightBlue, Maroon, Yellow); }
This would produce:
The Relative Length of a Gradient Color When creating a gradient color, if you specify two colors, they split the length of the area they must cover and each color covers half of that length. If you use three colors, each color would cover a third. If you specify 4 colors, each would cover a quarter of the length. You can specify a portion of the length that a color must cover. The portion or length that a color must cover is provided as a percentage. That is, after specifying the color, put a space, followed by a number and the % symbol. The formula is: color number% For example, for a gradient that uses two colors, you may want one of the colors to cover a 5th of the length and the other color would cover the rest. You would express the first color with 20% and the other color with 100%. Here os an example: <html>
<head>
<title>Sociology</title>
<style>
#central {
left: 0;
right: 0;
bottom: 0;
height: auto;
width: auto;
top: 4.80em;
position: absolute;
background: linear-gradient(270deg, Bisque 20%, #400 100%); }
#whole {
left: 0;
top: 0;
width: auto;
height: auto;
background: Bisque; }
#head-portion {
position: absolute;
top: 0;
left: 0;
right: auto;
height: 4.80em;
width: 100%;
text-align: center;
background: #000; }
.main-title {
font-weight: bold;
color: Yellow;
font-size: 0.86cm;
}
.paragraph-title {
color: Aqua;
font-size: 0.62cm; }
.main, .paragraph-title
{
font-family: Times New Roman, Garamond, Georgia, serif;
}
.description {
color: Lime;
font-family: Georgia, Garamond, Times New Roman, serif;
}
</style>
</head>
<body id="whole">
<header id="head-portion">
<p class="main-title">Sociology</p>
</header>
<div id="central">
<p class="paragraph-title">Introduction</p>
<p class="description">Sociology is in the social science group of academic
studies. Sociology is the study of human behavior, the origins of that behavior,
and the actual characteristics of such a behavior. Sociology analyzes the
person as one but also the influences of the group(s) in which the personal
behavior manifests itself.</p>
<p class="paragraph-title">Sociology and its Environment</p>
<p class="description">Sociolgy as an academic venture takes many factors in
consideration because various aspects shape a personality, from birth to
adulthood, from family to career, from opinions to affirmations. The study of
sociology considers the person's family, gender, ethnicity, social class,
religion, education, health, etc. Sociology also consider various aspects
of deviance, law, and societal interactivity.</p>
</div>
</body>
</html>
This would produce:
The second color doesn't have to cover the whole area left by the first color. As done for the first color, you can make the second color cover only a portion. Here is an example where a gradient of the second color covers only half of the remaining are: #central {
left: 0;
right: 0;
bottom: 0;
height: auto;
width: auto;
top: 4.80em;
position: absolute;
background: linear-gradient(180deg, Bisque 1%, #400 10%); }
This would produce:
You can use this feature to create a transitioning background. Consider the following example: <html>
<head>
<title>Social Science Studies</title>
<style>
#head-portion {
position: absolute;
top: 0;
left: 0;
right: auto;
height: 6.80em;
width: 100%;
text-align: center;
background: linear-gradient(Gray, Black) }
#head-bar {
position: absolute;
top: 4.60em;
left: 0;
right: auto;
height: 2.20em;
width: 100%;
text-align: center;
background: linear-gradient(180deg, Navy, CornflowerBlue, Navy); }
.main-title {
text-align: center;
font-weight: bold;
color: Navy;
font-size: 0.86cm;
text-shadow: 0.08cm 0.08cm 0.2cm White;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif; }
#central {
position: absolute;
top: 6.80em;
left: 8.90em;
height: auto;
width: auto;
right: 1.20em;
bottom: 5.5em; }
#studies-left {
position: absolute;
left: 0;
top: 6.80em;
width: 4.250em;
height: auto;
bottom: 5.5em;
background: linear-gradient(90deg, Maroon 0%, BurlyWood 15%);
}
#studies-right {
position: absolute;
left: 4.250em;
top: 6.80em;
width: 4.250em;
height: auto;
bottom: 5.5em;
background: linear-gradient(270deg, Maroon 0%, BurlyWood 15%);
}
.topics-title {
position: absolute;
top: 5.05em;
left: 0.55em;
color: Maroon;
font-size: 14pt;
font-family: Comic Sans MS, Helvetica, Arial, sans-serif; }
.topics {
position: absolute;
top: 9.25em;
left: 1em;
color: Yellow;
font-size: 10pt;
font-family: Comic Sans MS, Helvetica, Arial, sans-serif; }
#bottom-part {
position: absolute;
top: auto;
left: 0;
width: 100%;
right: 0;
height: 5.5em;
bottom: 0;
background: linear-gradient(180deg, Black, Gray); }
.introduction {
text-align: justify;
word-break: keep-all;
color: Black;
font-family: Georgia, Garamond, Times New Roman, serif; }
.sub-title {
text-align: left;
color: Blue;
font-size: 0.64cm;
font-family: Georgia, Times New Roman, serif; }
.references {
color: #FFF;
font-weight: bold;
text-align: center; }
</style>
</head>
<body>
<header id="head-portion">
<p class="main-title">Social Science Studies</p>
</header>
<div id="central">
<p class="sub-title">Introduction</p>
<p class="introduction">Social sciences cover a wide range of studies that
address all types of topics about human beings, their behaviors, their
history, their societies, and their environments. Some social science topics
are grouped in categories, such as individual or crowd, where studies tend
to address the same categorical isssues. Still, social sciences are highly
interchangeable. Sometimes.</p>
<p class="contribution">Social sciences are not strictly confined to the
above list. Studies in chemistry borrow concepts from sociology, anthropology,
and economy. Mathematics and medicine, that are sometimes said not to be a
science, regularly share theories with philosophy, psychology, or criminology.
In the same way, it is practically impossible to study computer science,
which includes computer languages and application programming, without
referring to linguistics.</p>
</div>
<div id="studies-left"></div>
<div id="studies-right"></div>
<p class="topics-title">Topics</p>
<dl class="topics">
<dt>Sociology
<dt>Psychology
<dt>Philosoply
<dt>Linguistics
<dt>Communication
<dt>History
<dt>Geography
<dt>Demography
<dt>Ethnicity
<dt>Anthropology
<dt>Archaeology
<dt>Political Science
<dt>Law
<dt>Education
<dt>Criminology
<dt>Economy
</dl>
<footer id="bottom-part">
<p class="references">Schools | Majors | Minors</p>
<p class="references">Copyright © 2015</p>
</footer>
</body>
</html>
This would produce:
If you are using many colors, apply the desired length to each. Here are examples: #central {
left: 0;
right: 0;
bottom: 0;
height: auto;
width: auto;
top: 4.80em;
position: absolute;
background: linear-gradient(0deg, Bisque 10%, #400 30%, Blue 50%, Red 100%); }
This would produce:
A Repeating Linear Background If you create a linear gradient where the color(s) after the first don't cover 100% of the remaining area, you can ask the browser to keep repeating the gradient scheme to the end of the area. To support this, CSS provides the repeating-linear-gradient() function. Here is an example of calling: background: repeating-linear-gradient(180deg, Bisque 1%, #400 100%); }
This would produce:
| ||||||
