In this chapter you will learn about the following properties:
text-overflowword-wrapword-breakwriting-modeThe CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
With CSS you can add shadow to text and to elements.
In these chapters you will learn about the following properties:
text-shadowbox-shadowThe CSS text-shadow property applies shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px).
CSS gradients let you display smooth transitions between two or more specified colors.
CSS defines three types of gradients:
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect. Continue reading CSS Gradients
This page will explain the transparent, currentcolor, and
inherit
The transparent keyword is used to make a color transparent. This is often used to make a transparent background color for an element.
Here, the background color of the <div> element will be fully transparent, and the background image will show through:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity.
RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
rgba(255, 0, 0, 0.2); rgba(255, 0, 0, 0.4); rgba(255, 0, 0, 0.6); rgba(255, 0, 0, 0.8);
The following example defines different RGBA colors:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
In this chapter you will learn how to add multiple background images to one element.
You will also learn about the following properties:
background-sizebackground-originbackground-clipCSS allows you to add multiple background images for an element, through the background-image property.
The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer. Continue reading CSS Multiple Backgrounds
With the CSS border-image property, you can set an image to be used as the border around an element.
The CSS border-image property allows you to specify an image to be used instead of the normal border around an element.
The property has three parts:
With the CSS border-radius property, you can give any element “rounded corners”.
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
The CSS math functions allow mathematical expressions to be used as property values. Here, we will explain the calc(),
max()min() functions.
The calc() function performs a calculation to be used as the property value.
calc(expression)
The !important rule in CSS is used to add more importance to a property/value than normal.
In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!
Let us look at an example:
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}