***** On Monday, 9/3/18, I started learning the fundamentals of CSS on sololearn.com. *****
***** On Tuesday, 1/15/19, I completed the CSS Fundamentals course and was issued the certificate. *****
TAKE NOTE THAT THIS IS NOT A .CSS FILE BECAUSE IT WILL BE A PLAIN TEXT FILE. INSTEAD, CSS WILL BE IMPLEMENTED INTO A .HTML FILE. THIS CAN BE DONE VIA A LINK, EMBED, IMPORT AND/OR INLINE STYLES.
Creating Linear Gradients
CSS3 gradients enable you to display smooth transitions between two or more specified colors.
CSS3 defines two types of gradients: Linear and Radial.
To create a linear gradient, you must define at least two color stops. Color stops are the
colors among which you want to render smooth transitions. You can also set a starting
point and a direction - or an angle - along with the gradient effect.
In the example below, the colors blue and black are used to create a linear gradient
from top to bottom.
The CSS: (Code)
div {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-moz-linear-gradient(DeepSkyBlue, Black);
}
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.1! ←
This syntax works in Mozilla (-moz). If you work with a different browser, add the corresponding prefix, so that the browser understands the gradient.
Take note that you can use color names, Hex values, RGB, or HSL colors to define the gradient color.
Color Stops
Colors can be added one after the other, separated with a comma. The browser will then
determine each color stop position.
In the example below, the linear gradient has multiple color stops and runs from top to bottom.
Syntax:
background:-moz-linear-gradient(blue, yellow, green, pink, white);
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.2! ←
Color stop positions can be specified for each color.
Syntax:
background:-moz-linear-gradient(blue 20%, yellow 30%, green 85%);
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.3! ←
Take note that in addition to percentages, you can also use px, em, and so on,
to specify the color stops.
If you use the same color stop position for two colors, a sharp line will be created between them.
Direction of the Gradient
The direction of the gradient can be changed.
In the example below, the first gradient starts at left, moving right;
the second one runs from bottom to top.
The CSS: (Code)
div.first {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-moz-linear-gradient(left, blue, green, white);
}
div.second {
float: left;
width: 300px;
height: 100px;
margin: 4px;
background:-moz-linear-gradient(bottom, blue, green, white);
}
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.4! ←
Take note that left, right, top, and bottom are supported values for the gradient direction. You can also use their various combinations to specify direction (e.g., bottom right).
Angle of the Gradient
As an alternative to predefined directions (bottom, top, right, left, bottom right, etc.), you can control the gradient's direction by specifying an angle.
The angle is specified as an angle extending between a horizontal line and the gradient line. In other words, 0deg creates a left-to-right gradient, while 90deg generates a bottom-to-top gradient.
The CSS: (Code)
div.first {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-moz-linear-gradient(bottom left, blue, green, white);
}
div.second {
float: left;
width: 300px;
height: 100px;
margin: 4px;
background:-moz-linear-gradient(100deg, blue, green, white);
}
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.5! ←
Repeating a Linear-Gradient
The repeating-linear-gradient() function is used to repeat a linear gradient:
Syntax:
background: -moz-repeating-linear-gradient(blue, green 20px);
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.6! ←
Radial Gradients
To create a radial gradient, you must define at least two color stops.
The radial gradient is defined by its center.
Syntax:
background: radial-gradient(position, shape or size, color-stops);
The first value defines the gradient position. We can use a descriptive keyword, such as top, bottom, center, or left; or we can specify, for example, 50% 50% to set gradient at the center or 0% 0% to set the gradient to start at top left.
The second value defines the shape and the gradient size. There are two arguments to shape gradients:
Lastly, the third value defines the color combination.
Setting the Shapes
The shape parameter defines the shape. If you do not define the shape of the radial gradient, it will take the ellipse value by default.
In the example below, we didn't specify the shape of the first div's radial gradient, but for the second, we set the value to circle.
The CSS: (Code)
div.first {
height: 150px;
width: 200px;
color: #FFF;
background:-moz-radial-gradient(green, yellow, blue);
}
div.second {
height: 150px;
width: 200px;
color: #FFF;
background:-moz-radial-gradient(circle, green, yellow, blue);
}
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.7! ←
Radial Gradient Position
Essentially, we can use the same method used to specify the location of a background image with the background-position CSS property to specify the location of the ellipse's center. We specify the horizontal position of the background, and - optionally - the vertical position using either keywords (left, center right, or top, center, bottom), length values, percentage values, or some combination of these.
In the example below, the first gradient starts from the top left corner; in the second, we set 5% to the green, 15% to the yellow, and 60% to the blue.
The CSS: (Code)
div.first {
height: 150px;
width: 200px;
color: #FFF;
background:-moz-radial-gradient(top left, green, yellow, blue);
}
div.second {
height: 150px;
width: 200px;
color: #FFF;
background:-moz-radial-gradient(green 5%, yellow 15%, blue 60%);
}
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.8! ←
Take note that in addition to percentages, you can use pixels or ems.
Setting the Color Stops
As with linear gradients, a color stop is specified with a color, plus an optional stop position, which is a length or percentage value.
Here's a simple circular gradient with color stops:
Syntax:
background: -moz-radial-gradient(circle, green 40%, yellow 50%, blue 70%);
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.9! ←
The background-size Property
The background-size property adds new functionality to CSS that allows us to specify the size of background images, using either lengths or percentages.
For example:
The CSS: (Code)
div {
height: 150px;
width: 200px;
border: 1px solid #000;
background: url("css_logo.png") no-repeat 50% 50%;
background-size: 100px 100px;
}
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.10! ←
Take note that the current versions of most popular browsers - including Firefox, Safari, Chrome, Internet Explorer, and Opera - now support background-size, without the need for vendor prefixes.
The background-size Values
The two other possible values for background size are the keywords contain and cover.
The contain keyword scales the image so that it fits the container.
In other words, the image will grow or shrink proportionally, but the width and height will
not exceed the container's dimensions:
Syntax:
background-size: contain;
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.11! ←
background-size also accepts the cover keyword. The image is scaled to fit the entire container; however, if that has a different aspect ratio, the image will be cropped:
Syntax:
background-size: cover;
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.12! ←
The background-clip Property
The background-clip property specifies the painting area of the background.
The property takes three different values:
In the example below, the first div with background-clip is set to padding-box; in the second div, it's set to content-box.
The CSS: (Code)
#first {
border: 2px dotted black;
padding: 20px;
background: LightBlue;
background-clip: padding-box;
}
#second {
border: 2px dotted black;
padding: 20px;
background: LightBlue;
background-clip: content-box;
}
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.13! ←
background-clip with Images
background-clip also applies to background images.
The CSS: (Code)
div {
background-image: url("css-logo.png");
background-clip: content-box;
}
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.14! ←
Transparent Borders with background-clip
Setting a transparent border on an element will reveal the element's own background under the border.
In the example below, we set the borders to be transparent using RGBA, but they actually appear solid gray.
The CSS: (Code)
border: 20px solid rgba(0, 0, 0, 0.3);
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.15! ←
By setting the background-clip property to padding-box, the borders will be made transparent.
The CSS: (Code)
border: 20px solid rgba(0, 0, 0, 0.3);
-moz-background-clip: padding-box;
background-clip: padding-box;
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.16! ←
Take note that transparency effect is achieved with the background-clip: padding-box. Without it, the background of the box also goes beneath the borders, making it non-transparent.
Multiple Backgrounds
The ability to have multiple background images is a new feature in CSS3.
Multiple background images are specified using a comma-separated list of values for the background-image
property. The first image will appear on the top, the last on the bottom.
In the example below, we have two background images: the first is a CSS logo (aligned to the bottom and right); the second is a coding image (aligned to the top-left corner).
The CSS: (Code)
div {
width: 400px;
height: 300px;
background-image: url(csslogo.png), url(csscode.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat;
}
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.17! ←
The position of the background images can be changed, using the background-position property.
For example:
The CSS: (Code)
div {
width: 400px;
height: 300px;
background-image: url(csslogo.png), url(csscode.jpg);
background-position: right top, left top;
background-repeat: no-repeat;
}
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.18! ←
Take note that multiple backgrounds can also be specified using the background: shorthand property.
The CSS: (Code)
background: url(csslogo.png) right top no-repeat,
url(csscode.jpg) left top no-repeat;
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.19! ←
The opacity Property
CSS opacity property provides an excellent means of adding opacity to any element.
In th example below, we set different levels of opacity to the same picture,
so you can clearly see the difference.
The CSS: (Code)
#img1 {
opacity: 1;
}
#img2 {
opacity: 0.5;
}
#img3 {
opacity: 0.25;
}
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.20! ←
Take note that the opacity property value must be a number between 0.0 (fully transparent) and 1.0 (full opaque).
Opacity in Internet Explorer
To have the opacity property work in all versions of IE, use the filter:alpha(opacity=x)
along with the opacity property. x can take a value from 0 to 100.
The value 0 results in a completely transparent element (i.e. 100% transparent),
whereas the value 100 makes the element completely opaque (i.e. 0% transparent).
For example, in order to have the code work properly with IE, when the opacity of the image is set at 0.5, it should look like this.
The CSS: (Code)
#img {
opacity: 0.5;
filter: alpha(opacity=50);
}
Result with HTML and CSS:
→ CLICK HERE FOR RESULT OF EXAMPLE_6.21! ←
Take note that the alpha filter is a Microsoft-only property, not a standard CSS property.
Go to top
« Previous
1
2
3
4
5
6
7
8
Next »