Table of Contents
CSS3 Border Property
- border-bottom-left-radius Property: It adds rounded border to the bottom-left corner of a given element. Values may be : %, pixels
- border-bottom-right-radius Property: It adds rounded border to the bottom-right corner of a given element. Values may be : %, pixels
- border-top-left-radius Property: It adds rounded border to the top-left corner of a given element. Values may be : %, pixels
- border-top-right-radius Property: It adds rounded border to the top-right corner of a given element. Values may be : %, pixels
Example:
<html>
<head>
<style>
#e7{
border-bottom-left-radius:25px;
border-top-left-radius:25px;
border-bottom-right-radius:25px;
border-top-right-radius:25px;
border:2px solid lightblue;
}
</style>
</head>
<body>
<p id='e7'>Border with radius for each side</p>
</body>
</html>Output:
Border with radius for each side
- border-radius Property: It adds rounded corners(all four) to given element. It is a shorthand property for all the corners.
Example
<html>
<head>
<style>
#e8{
border-radius:5px;
border:2px solid magenta;
}
</style>
</head>
<body>
<p id='e8'>Border Radius Short hand property for all side</p>
</body>
</html>Output:
Border Radius Short hand property for all side
CSS3 Background Property
- background-size Property : It allows you to specify the size of background images. The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover. The following example resizes a background image to much smaller than the original image (using pixels)
Example
<html>
<head>
<style>
#p_1{
border:solid 5px black;
background:url(stats.png);
background-size:100px 100px;
background-repeat:no-repeat;
padding:100px;
}
</style>
</head>
<body>
<p id='p_1'>According to facts & figures, Google is the most popular search engine all over the globe.</p>
</body>
</html>- Contain scales the background image to be as large as possible (but both its width and its height must fit inside the content area). As such, depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image.
- Cover scales the background image so that the content area is completely covered by the background image (both its width and height are equal to or exceed the content area). As such, some parts of the background image may not be visible in the background positioning area.
Example
<html>
<head>
<style>
#p1{
border:solid 5px black;
height:400px;
width:500px;
background:url(flower.png);
background-size:contain;
background-repeat:no-repeat;
}
#p2{
border:solid 5px black;
height:400px;
width:500px;
background:url(flower.png);
background-size:cover;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<p id='p1'>Hello World</p><br><br>
<p id='p2'>Hello World</p>
</body>
</html>
- background-origin Property: It specifies where the background image is positioned. The property takes three different values:
- border-box – the background image starts from the upper left corner of the border
- padding-box – (default) the background image starts from the upper left corner of the padding edge
- content-box – the background image starts from the upper left corner of the content
Example
<html>
<head>
<style>
#p1{
border:double 10px black;
padding:50px;
background:url(flower.jpg);
background-repeat:no-repeat;
background-origin:border-box;
}
#p2{
border:double 10px black;
padding:50px;
background:url(flower.jpg);
background-repeat:no-repeat;
background-origin:padding-box;
}
#p3{
border:double 10px black;
padding:50px;
background:url(flower.jpg);
background-repeat:no-repeat;
background-origin:content-box;
}
</style>
</head>
<body>
<p id=p1>Hello World</p><br><br>
<p id=p2>Hello World</p><br><br>
<p id=p3>Hello World</p>
</body>
</html>
background-clip Property: It specifies the painting area of the background. It takes three different values:
- border-box – (default) the background is painted to the outside edge of the border
- padding-box – the background is painted to the outside edge of the padding
- content-box – the background is painted within the content box
<html>
<head>
<style>
#p1{
border: 10px dotted black;
padding: 35px;
background: cyan;
}
#p2{
border: 10px dotted black;
padding: 35px;
background: cyan;
background-clip:padding-box;
}
#p3{
border: 10px dotted black;
padding: 35px;
background: cyan;
background-clip:content-box;
}
#p4{
border: 10px dotted black;
padding: 35px;
background: cyan;
background-clip:border-box;
}
</style>
</head>
<body>
<p id=p1>Hello World</p><br><br>
<p id=p2>Hello World</p><br><br>
<p id=p3>Hello World</p><br><br>
<p id=p4>Hello World</p>
</body>
</html>Output:
Hello World
Hello World
Hello World
Hello World
CSS3 Gradient Property
CSS3 gradients displays smooth transitions between two or more specified colors. There are three types of gradients:
- Linear Gradients (moves down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
- Conic Gradients (rotated around a center point)
Linear Gradients
To create a linear gradient, you have to define at least two colors. These 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.
Syntax : background-image: linear-gradient(direction, color1, color2, …);
Example : This is default direction : top to bottom linear gradient.
<html>
<head>
<style>
#d1{
height:100px;
width:100px;
background-image:linear-gradient(pink,purple);
}
</style>
</head>
<body>
<p>Linear Gradient - Top to Bottom</p>
<div id=d1></div><br><br>
</body>
</html>Output:
Linear Gradient – Top to Bottom
Example : To render a transition from left to right, do the following
<html>
<head>
<style>
#d2{
height:100px;
width:100px;
background-image:linear-gradient(to right,pink,purple);
}
</style>
</head>
<body>
<p>Linear Gradient - left to right</p>
<div id=d2></div><br><br>
</body>
</html>Output:
Linear Gradient – left to right
Example : To render a transition from left to bottom right(diagonal), do the following
<html>
<head>
<style>
#d3{
height:100px;
width:100px;
background-image:linear-gradient(to bottom right,pink,red);
}
</style>
</head>
<body>
<p>Linear Gradient - Top to bottom right</p>
<div id=d3></div><br><br>
</body>
</html>Output:
Linear Gradient – Top to bottom right
You can also define an angle, if you don’t want to use predefined directions (to bottom, to top, to right, to left, to bottom right, etc.). A value of 0deg is equivalent to “to top”. A value of 90deg is equivalent to “to right”. A value of 180deg is equivalent to “to bottom”.
Example
<html>
<head>
<style>
#d4{
height:100px;
width:100px;
background-image:linear-gradient(90deg,pink,red);
}
</style>
</head>
<body>
<p>Linear Gradient 90 Degree - left to right</p>
<div id=d4></div><br><br>
</body>
</html>Output:
Linear Gradient 90 Degree – left to right
Multi-color Gradient
You can also use more than two colors with specified directions for transition effect. Let us check an example
Example
<html>
<head>
<style>
#d5{
height:100px;
width:100px;
background-image:linear-gradient(orange,pink,purple,red);
}
#d6{
height:100px;
width:100px;
background-image:linear-gradient(to right,orange,pink,purple);
}
</style>
</head>
<body>
<p>Linear Gradient - Multi color</p>
<div id=d5></div><br><br>
<div id=d6></div><br><br>
</body>
</html>Output:
Linear Gradient – Multi color
You can use transparency in transition effect. For that rgba() is used to define colors & transparency. Transparency value ranges from 0(full transparent) to 1(no transparent/opaque).
Example
<html>
<head>
<style>
#d7{
height:100px;
width:100px;
background-image:linear-gradient(to right,rgba(0,255,0,0.5),rgba(0,0,255,1));
}
</style>
</head>
<body>
<p>Linear Gradient - Transparency Effect</p>
<div id=d7></div><br><br>
</body>
</html>Output:
Linear Gradient – Transparency Effect
Repeating Linear Gradient : repeating-linear-gradient() is used to repeat linear gradient
Example
<html>
<head>
<style>
#d8{
height:100px;
width:100px;
background-image: repeating-linear-gradient(red,yellow 10%,green 30%);
}
</style>
</head>
<body>
<p>Repeating Linear Gradient</p>
<div id=d8></div><br><br>
</body>
</html>Output:
Repeating Linear Gradient
Radial Gradient
A radial gradient is defined by its center. Two colors must be defined to do radial gradient effect.
Syntax : background-image: radial-gradient(shape, start-color, …, last-color);
Shape may be either circle or ellipse(default).
Example
<html>
<head>
<style>
#d9{
height:100px;
width:200px;
background-image:radial-gradient(red,purple,pink);
}
#d10{
height:100px;
width:200px;
background-image:radial-gradient(circle,purple,blue,green);
}
</style>
</head>
<body>
<p>Radial Gradient Ellipse (Default Shape)</p>
<div id=d9></div><br><br>
<p>Radial Gradient Circle</p>
<div id=d10></div><br><br>
</body>
</html>Output:
Radial Gradient Ellipse (Default Shape)
Radial Gradient Circle
Repeating a radial-gradient : The repeating-radial-gradient() function is used to repeat radial gradients
Example
<html>
<head>
<style>
#d11{
height:200px;
width:200px;
background-image:repeating-radial-gradient(pink,purple 20%);
}
</style>
</head>
<body>
<p>Repeating Radial Gradient</p>
<div id=d11></div><br><br>
</body>
</html>Output:
Repeating Radial Gradient
Conic Gradients
A conic gradient is a gradient with color transitions rotated around a center point. To create a conic gradient you have to define at least two colors.
Syntax : background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], …);
0deg is a default angle and center is default position. If no degree is specified, the colors will be spread equally around the center point.
Lest us check and example includes Conic Gradient: Three Colors, Five Colors, Three colors with Degree
Example
<html>
<head>
<style>
#d12{
height:200px;
width:200px;
background-image:conic-gradient(pink,purple,green);
}
#d13{
height:200px;
width:500px;
background-image:conic-gradient(red, yellow, green,purple,pink);
}
#d14{
height:200px;
width:500px;
background-image:conic-gradient(green 45deg,purple 90deg,pink 180deg);
}
</style>
</head>
<body>
<p>Conic Gradient three colors</p>
<div id=d12></div><br><br>
<p>Conic Gradient five colors</p>
<div id=d13></div><br><br>
<p>Conic Gradient three colors with degree</p>
<div id=d14></div><br><br>
</body>
</html>Output:
Conic Gradient three colors
Conic Gradient five colors
Conic Gradient three colors with degree
CSS3 Box-shadow Property
It attaches one or more shadows to an element.
Syntax : box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Example
<!DOCTYPE html>
<html>
<head>
<style>
#d15{
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px;
}
#d16{
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px red;
}
</style>
</head>
<body>
<p>The box-shadow property of an element - Example 1</p><br>
<div id="d15">
<p>Hello Everyone</p>
</div><br>
<div id="d16">
<p>Hello Everyone</p>
</div><br>
</body>
</html>Output:
The box-shadow property of an element – Example 1
Hello Everyone
Hello Everyone
Property Values:
None : No Shadow is displayed. This is default value.
<head>
<style>
#d17{
border: 1px solid;
padding: 10px;
box-shadow: None
}
</style>
</head>
<body>
<p>The box-shadow property Example - 2</p><br>
<div id="d17">
<p>Hello World</p>
</div>
</body>Output:
The box-shadow property Example – 2
Hello World
h-offset : This is required. It indicates horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box.
v-offset : This is required. It indicates vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box.
<head>
<style>
#d18{
border: 1px solid;
padding: 10px;
box-shadow:10px 10px red;
}
#d19{
border: 1px solid;
padding: 10px;
box-shadow:-10px -10px red;
}
</style>
</head>
<body>
<p>The box-shadow Property : Positive h-offset & v-offset</p><br>
<div id="d18">
<p>Hello World</p>
</div><br><br>
<p>The box-shadow Property : Negative h-offset & v-offset</p><br>
<div id="d19">
<p>Hello World</p>
</div><br><br>
</body>
</html>Output:
The box-shadow Property : Positive h-offset & v-offset
Hello World
The box-shadow Property : Negative h-offset & v-offset
Hello World