Introduction to CSS3
1. Using CSS3 Drop Shadows
The CSS3 gives you ability to add drop shadow effects to the elements like you do in Photoshop
without using any images. Prior to CSS3, sliced images are used for creating the shadows around
the elements that was quite annoying.
The following section will describe you how to apply the shadow on text and elements.
a. CSS3 box-shadow Property
The box-shadow property can be used to add shadow to the element's boxes. You can even apply
more than one shadow effects using a comma-separated list of shadows. The basic syntax of
creating a box shadow can be given with:
box-shadow: offset-x offset-y blur-radius color;
The components of the box-shadow property have the following meaning:
offset-x — Sets the horizontal offset of the shadow.
offset-y — Sets the vertical offset of the shadow.
blur-radius — Sets the blur radius. The larger the value, the bigger the blur and more the
shadow's edge will be blurred. Negative values are not allowed.
color — Sets the color of the shadow. If the color value is omitted or not specified, it takes the
value of the color property.
b. CSS3 text-shadow Property
You can use the text-shadow property to apply the shadow effects on text. You can also apply
multiple shadows to text using the same notation as box-shadow.
2. CSS3 Background
With CSS3, you can apply multiple backgrounds to elements.
Using CSS3 Backgrounds
The CSS3 provides several new properties to manipulate the background of an element like
background clipping, multiple backgrounds, and the option to adjust the background size.
a. CSS3 background-size Property
The background-size property can be used to specify the size of the background images. Prior to
CSS3, the size of the background images was determined by the actual size of the images. The
background image size can be specified using the pixels or percentage values as well as the
keywords auto, contain, and cover. Negative values are not allowed.
b. CSS3 background-clip Property
B. JOGA RAO Assistant professor(SVIT) Page 1
Department of CSE(Data Science)
The background-clip property can be used to specify whether an element's background extends
into the border or not. The background-clip property can take the three values: border-
box, padding-box, content-box.
3. CSS3 Filters
The CSS3 filter effects provide an easy way to apply the visual effect to the images.
Understanding the CSS3 Filter Functions
In this chapter we'll discuss about the filter effects introduced in CSS3 that you can use to
perform visual effect operations like blur, balancing contrast or brightness, color saturation etc.
on graphical elements like an image before it is drawn onto the web page.
The filter effects can be applied to the element using the CSS3 filter property, which accept one
or more filter function in the order provided.
filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacit
y() | sepia() | saturate() | url();
a. The Blur Effect
Photoshop like Gaussian blur effect can be applied to an element using the blur() function. This
function accepts CSS length value as parameter which defines the blur radius. A larger value will
create more blur. If no parameter is provided, then a value 0 is used.
b. Setting the Image Brightness
The brightness() function can be used to set the brightness of an image. A value of 0% will
create an image that is completely black. Whereas, a value of 100% or 1 leaves the images
unchanged. Other values are linear multipliers on the effect.
You can also set the brightness higher than the 100% which results in brighter image. If the
amount parameter is missing, a value of 1 is used. Negative values are not allowed.
c. Converting an Image to Grayscale
The images can be converted to grayscale using the grayscale() function. A value of 100% is
completely grayscale. A value of 0% leaves the image unchanged. Values
between 0% and 100% are linear multipliers on the effect. If the amount parameter is missing, a
value of 0 is used.
4. CSS3 Text Overflow
CSS3 new text properties provide more control over the text rendering.
B. JOGA RAO Assistant professor(SVIT) Page 2
Department of CSE(Data Science)
Handling Text Overflow in CSS3
CSS3 introduced several new property properties for modifing the text contents, however some
of these properties are existed from a long time. These properties give you precise control over
the rendering of text on the web browser.
a. Hiding Overflow Text
Text can overflow, when it is prevented from wrapping, for example, if the value of white-
space property is set to nowrap for the containing element or a single word is too long to fit like a
long email address. In such situation you can use the CSS3 text-overflow property to determine
how the overflowed text content will be displayed.
You can either display or clip the overflowed text or clip and display an ellipsis or a custom
string in palace of the clipped text to indicate the user.
Values Accepted by the word-break property are: clip and ellipsis and string.
b. Breaking Overflow Text
You can also break a long word and force it to wrap onto a new line that overflows the
boundaries of containing element using the CSS3 word-wrap property.
Values Accepted by the word-wrap property are: normal and break-word.
5. CSS3 Gradients
The CSS3 gradient feature allows you to create a gradient from one color to another without
using any images.
Using CSS3 Gradients
The CSS3 gradient feature provides a flexible solution to generate smooth transitions between
two or more colors. Earlier, to achieve such effect we had to use the images. Using CSS3
gradients you can reduce the download time and saves the bandwidth usages. The elements with
gradients can be scaled up or down to any extent without losing the quality, also the output will
render much faster because it is generated by the browser.
Gradients are available in two styles: linear and radial.
a. Creating CSS3 Linear Gradients
To create a linear gradient you must define at least two color stops. However to create more
complex gradient effects you can define more 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 which the gradient effect is applied. The basic syntax of creating the linear gradients using
the keywords can be given with:
linear-gradient(direction, color-stop1, color-stop2, ...)
Examples
B. JOGA RAO Assistant professor(SVIT) Page 3
Department of CSE(Data Science)
Linear Gradient - Top to Bottom
Linear Gradient - Left to Right
B. JOGA RAO Assistant professor(SVIT) Page 4
Department of CSE(Data Science)