In this article we will see the properties border radius, box shadow and border image in CSS3 visual effects, which can be applied to the edges of the elements of web pages. At the end of this article, the reader should be able to understand and be able to use the properties border-radius, box-shadow and border-image, introduced in version 3 of CSS. Note that these properties are available from the CSS 3.
Many people still do not know how it is possible to create box with rounded corners, use shading effects without using any kind of image, with only CSS3. You can also get a beautiful edge made in your favourite image editor such as Photo shop, and use it on your site as the edge of something.
Until the release of its latest version of the style sheets, applying effects on the edges of the elements was a pretty tiring and unproductive task. For example, to obtain an element with rounded edges, it was necessary to create multiple images to dispose them at each corner of the element.
An example of this is shown in Figure 1.
In the example above, we see, eight images were needed to form the edges of the central element. As outlined below, the border-radius property allows to do the same thing in a more practical and more particularly correct way. Using CSS, it will be necessary requests to the server to get images to form the layout element.
Border Radius in CSS3
As the name suggests, this property defines a rounded edge according to the supplied value, which indicates the radius of a circle theoretically positioned at the verticals of the element and from which you get the desired effect. The setting can be a bit tricky, but we’ll see the idea illustrated in the following figures, facilitating the understanding.
First it is necessary to understand the concept of radius of the circle, which can be defined as a line segment that connects the centre of circle to its edge. As the circumference is a symmetrical figure in two dimensions, one can say that any line segment that connects its centre to its edge will have the same length, which is equal to the radius. Figure 2 illustrates the concept of lightning.
How do we apply this to the definition of the rounded edge with CSS? Suppose we define the property border-radius of a div equal to 25px. The design of the edge is done by placing a circle of radius 25px at the extreme ends, the upper and lower right and left split, as shown in Figure 3.
The end result would then be that shown in Figure 4.
It is clear that in day-to-day activity we do not stick to do all this graphical analysis, however, it is important to know exactly what we are doing when we use a certain feature. The border-radius property can be defined in two ways: by setting a single value for all vertices (points) individually or by specifying the value of each vertex. The following lists exemplify the use of each of these forms.
Listing 1: Definition of general border-radius
<html>
<head>
<title> Working with Borders in CSS3 </title>
<style>
#div1{
width: 100px;
height: 100px;
border: 1px solid;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="div1">General</div>
</body>
</html>
Listing 2: Definition of individual border-radius
<html>
<head>
<title> Working with Borders in CSS3 </title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
border: 1px solid;
border-radius: 0px 20px 0px 20px;
}
</style>
</head>
<body>
<div id="div1">Individual</div>
</body>
</html>
The results are shown in Figure 5.
The definition of individual values, the order of the vertices is as follows:
- Upper left
- Top right
- Bottom left
- Bottom right
Pretty simple, isn’t it? And we have the good news that this property is supported by all major browsers today.
Box Shadow in CSS3
Another effect that some time back needed some images to be obtained is the shading. This property consists of some parameters and their usage syntax is as follows:
box-shadow: h v-shadow-shadow blur spread color inset;
where
- h-shadow: horizontal position of the shadow.
- v-shadow: vertical position of the shadow.
- Blur: Sets the intensity of the blur (blur) the shadow (optional).
- spread: the size of the shadow (optional).
- color: the color of the shadow.
- inset: whether a shadow is external (default) or internal (inset).
Listing 3 shows an example of using the box-shadow and then the result of the same.
Listing 3: Example of using box-shadow
<html>
<head>
<title> Working with Borders in CSS3 </title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
border: 1px solid;
box-shadow: 10px 10px 10px 5px black;
}
</style>
</head>
<body>
<div id="div1"/>
</body>
</html>
This property is also supported by major browsers
Border Image in CSS3
The last but not least we will see is the property border-image, which allows you to set an image to be used to fill the border of an element.
Unfortunately this property is not supported by Internet Explorer, and requires the use of prefixes for different browsers, as we shall see in Listing 4.
Listing 4: Example of using border-image
<html>
<head>
<title> Working with Borders in CSS3 </title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
border-width: 10px;
border-image: url(borderimage.jpg) 30 30 repeat;
-moz-border-image: url(borderimage.jpg) 30 repeat 30; /*Firefox */
-webkit-border-image: url(borderimage.jpg) 30 repeat 30; /*Safari and Chrome*/
-o-border-image: url(borderimage.jpg) 30 repeat 30; /*Opera*/
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
The parameters used in defining the image path, the dimensions of the edge and style, which can be strech or repeat. The first style “stretching” the image is used to fill the entire element at once, while the latter repeats the image to fill the entire edge, as can be seen in Figure 7.
Summary
References:
CSS3 has made impossible things possible and simple. The results that were previously only obtained from the use of images and a considerable amount of code, with CSS3 it has eased the work of web designers. If you are interested in receiving the future articles, please subscribe here. follow us on @twitter and @facebook.
Dependency Management with JNDI