Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with Text Effects, Borders and Background Properties in CSS3

In this article we will see some different kind of properties in CSS3 and also learn how to work with them.

CSS 3.0 is the latest version of CSS. It is backward compatible and all the browsers will always support CSS 2.0. Some latest browsers have implemented the properties of CSS 3.0. There are lots of new features added into the CSS 3.0. I have divided the article in two parts. The first part is here, where I would discuss about:

  • Text Effects
  • Borders
  • Background Properties

Text Effects in CSS 3.0

Text Shadowing:

Using this property we can apply shadow to text.; syntax for which is as below:

Syntax: text-shadow : h-shadow v-shadow blur color

Details of above syntax are:

  • h-shadow is the horizontal shadow position and is mandatory field. Negative values are also allowed.
  • v-shadow is the vertical shadow position and is a mandatory field. Negative values are allowed.
  • blur parameter blurs the distance of shadow.
  • color is the color of the shadow.

Example 1: Following are the contents of example.html which shows how text-shadow works:

Listing 1: Code of example.html page

<!DOCTYPE html>
<html>
 <head>
 <style>
 h1
{
	text-shadow: 6px 6px 4px orange;
}
h2
{
	text-shadow: 4px 4px 4px red;
}
</style>
 </head>

 <body>
  <h1>Hello I'm text effect for H1</h1>
  <h2>Hello I'm text effect for H2</h2>
 </body>
</html> 

Output:

Example for Text effect

Figure 1: Example for Text effect

Word Wrapping:

Using this property we can wrap the text within an area.

Syntax: word-wrap: normal | break-word;

Details of above syntax are:

  • normal: breaks words at allowed break points
  • break-word : unbreakable words to be broken

Listing 2: word-wrap Example

<!DOCTYPE html>
<html>
 <head>
 <style>
        p.ex
        {
            width:11em;
            border:1px solid #000000;
        }
        p.ex1
        {
            width:11em;
            border:1px solid #000000;
            word-wrap:break-word;
        }
      
</style>
 </head>

 <body>
  <p class="ex">This is a veryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyylooooooooooooooooooooooooooooooooooooggggggggg word to test the word wrap feature.</p>
  <p class="ex1">This is a veryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyylooooooooooooooooooooooooooooooooooooggggggggg word to test the word wrap feature.</p>
 </body>
</html>

Output:

Example for word wrap

Figure 2: Example for word wrap

Other text properties introduced in CSS 3.0

Note: Below properties are still not supported by any browsers

  • Hanging punctuation: To specify whether a punctuation mark should be placed outside the line box.
  • Punctuation Trim: You can specify whether punctuation character should be trimmed.
  • Text Emphasis: To apply emphasis mark
  • Text outline: specify the text outline
  • Text Shadow: add shadow to text
  • Text Wrap : Breaking rules for text

CSS 3.0 Borders

We can use image as a border, add shadow to boxes and create rounded borders. Properties of border are: border-radiu , box-shadow and border-image.

Border Radius:

In CSS 2.0 for creating a rounded corner we had to use different images for each corner; since CSS 3.0 provides border-radius property.

Syntax: border-radius: 1-4 lengths

Note: The Four values are given in the order top-left, top-right, bottom-right and bottom-left

Listing 3: border-radius example

<!DOCTYPE html>
<html>
 <head>
 <style>
   div
	{
		border:5px solid blue;
		padding:25px 50px;
		background:cyan;
		width:400px;
		-moz-border-radius:25px;
		/* For Firefox  we need to add moz*/
		border-radius:30px;
	}
</style>
 </head>

 <body>
<div>
<h1> Hi I'm a border example....</h1>
</div>
 </body>
</html> 

Output:

Example for border radius

Figure 3: Example for border radius

Note: When you are using any of the Border property in Firefox we need to have a prefix -moz Ex: -moz-border-radius:25px;

When you are using any of the Border property in safari and chrome we need to have a prefix -webkit Ex: -webkit-border-radius:25px

Box Shadow property

We can add shadow to boxes using the shadow property of CSS.

Syntax:box-shadow: h-shadow v-shadow blur spread color inset

Details of the above syntax are:

  • h-shadow - position of horizontal shadow
  • v-shadow - position of vertical shadow
  • blur - blur distance
  • spread - size of the shadow
  • color - color of the shadow
  • inset - changes the shadow from an outer to inner shadow

Listing 4: Box-shadow Example

<!DOCTYPE html>
<html>
 <head>
 <style>
   div
	{
		width:400px;
		height:200px;
		background-color:orange;
		-moz-box-shadow: 25px 25px 20px yellow; /* Firefox */
		-webkit-box-shadow: 20px 20px 10px yellow; /* Safari and Chrome */
		box-shadow: 20px 20px 10px yellow;

	}
</style>
 </head>

 <body>
<div>
<h1> Hi I'm a box shadow example....</h1>
</div>
 </body>
</html>

Output:

Example for box shadow

Figure 4: Example for box shadow

Border - Image

With this property we can create a border using an image, see the correct syntax below:

Syntax:border-image: source slice width outset repeat;

Details of the above syntax are as below:

  • Source : path of the image to be specified
  • Slice : inward offsets of the image border
  • Width :width of the image border
  • Outset : outset of the image border
  • Repeat : image has to be repeated, rounded or stretched

Listing 5: Border-image Example

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:15px solid transparent;
width:200px;
padding:20px 30px;

}

#stretch
{
-webkit-border-image:url(images/borderimage.jpg) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(images/borderimage.jpg) 30 30 stretch; /* Opera */
border-image:url(images/borderimage.jpg) 30 30 stretch;
}
</style>
</head>
<body>

<p>The border-image property specifies an image to be used as a border.</p>

<div id="stretch">Hi I'm stretched image .</div>

<p>Here is the original image used:</p>
<img src="images/borderimage.jpg">

</body>
</html>

Note: Border property is not supported in any of the IE versions except IE 9.

Output:

Example for border image

Figure 5: Example for border image

CSS 3.0 Background Properties

Several new background properties are provided by CSS 3.0 which will help us to get greater control of the background elements.

Background-size

This property specifies the size of the background image. Earlier to CSS 3.0 , background size was decided by the actual size of the image. We can specify the size in percentage or pixels.

Syntax: background-size: percentage | cover | contain | length

Details of the above syntax are as below:

  • Length - width and height of the background image is set using this value. Width is set using the first value and height is set using the second value. If we give only one value , second is set to auto.
  • Percentage - width and height of the background image is set in terms of percentage. Width is set using the first value and height is set using the second value. If we give only one value , second is set to auto.
  • Cover - Using cover we can reduce the size of the image to the smallest value so that both width and height can fit inside the content area
  • Contain - Using contain we can increase the size of the image to the largest value so that both width and height can fit inside the content area.

Listing 6: background-size example

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
	background:url("images/img3.jpg");
	-moz-background-size:800px 400px; /* Firefox */
	background-size:800px 400px;
	background-repeat:no-repeat;
	padding-top:40px;
}

</style>
</head>
<body>
<h1>Hi I'm example of background image.</h1>
</body>
</html>

Output:

Example for background image

Figure 6: Example for background image

Multiple background images

CSS3 allows us to have multiple images for a single element. Ex: background-image:url(img1.png),url(img2.jpg);

Listing 7: Multiple background Images example

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
	background-image:url(images/icon-tel.png),url(images/img3.jpg);
}

</style>
</head>
<body>

</body>
</html>

Output:

Example for multiple background images.

Figure 7: Example for multiple background images.

Conclusion:

In this article we saw the how we can apply text effects, background effects and border properties of CSS 3.0, with some examples. In the next article I shall discuss about few more CSS 3.0 features like transition, transforms and animations.



I''m a full stack developer with around 10+ yrs of experience. I enjoy writing technical articles on upcoming technical trends.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login