Superimposing Border Styles on Background

Mastering CSS3 – Part 13

Forward: In this part of the series, we see the effects of superimposing border styles on background.

By: Chrysanthus Date Published: 25 Jul 2012

Introduction

This is part 13 of my series, Mastering CSS3. In this part of the series, we see the effects of superimposing border styles on background. I assume you have read the previous parts of the series before reaching here; this is a continuation.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

Border Styles
You have the following border styles in CSS3: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. The background color or image can be made to cover all of the border-box area, using the background-clip property. When you do this, the border style will superimpose on the background at the border strip. The color of the border can be semi-transparent to create a special effect.

For the rest of this tutorial we shall see the effect of superimposing the outset border style on the background. With the knowledge gained below, you can try the other border styles with the different background colors and images.

The outset Border style on Background Image
We shall superimpose the outset border style on the background image of a button. With the superimposition of the outset border style, we shall have a 3D (3 Dimensional) look of the button. Such buttons can be used in the home page and even in other pages of a web site. In this kind of button, the default background color and border are replaced by what you set.

Read and try the following code, replacing the image with that of your choice.

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
<style type="text/css">
    button
                {
                    border-style:outset;
                    border-width:8px;
                    border-color:rgba(0,0,0,0.4);
                    width:150px;
                    height:50px;
                    background-image:url(pic.jpg);
                    background-clip:border-box;
                }
</style>
</head>
<body>
<button type="button">Click</button>

</body>
<html>

Note: you can also have formatted text in place of the button content (text).

Converting Button to Hyperlink
To convert a button to a hyperlink, just make the button the content of the hyperlink. However, do not do this with the submit button. Read and try the following code, where the button is the above custom button:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
<style type="text/css">
    button
                {
                    border-style:outset;
                    border-width:8px;
                    border-color:rgba(0,0,0,0.4);
                    width:150px;
                    height:50px;
                    background-image:url(pic.jpg);
                    background-clip:border-box;
                }
</style>
</head>
<body>
<a href="www.somesite.com"><button type="button">Click</button></a>

</body>
<html>

With the knowledge you have gained, you can superimpose borders on the background of other elements such as the figure, paragraph, section, heading and the hyperlink.

With that, we end here and continue in the next part of the series.

Chrys

Broad Network

Superimposing Border Styles on Background

Mastering CSS3 – Part 13

Introduction

Related Links

Comments