< Buzzing or vibrating the login form using jquery Posted On May 15, 2012 : 0 comments << >> Simple div slideshow using jquery Posted On May 9, 2012 : 0 comments << >> Copy mysql column in varchar to type date Posted On May 3, 2012 : 0 comments << >> Enter only numbers inside a input field of a form using javascript Posted On May 1, 2012 : 0 comments << >> Slide in and out animate div vertically using jquery Posted On April 25, 2012 : 1 comment << >> Tag cloud using php, mysql and ajax with filter Posted On April 24, 2012 : 0 comments << >> Change webpage font color or background color from the user side using javascript Posted On April 19, 2012 : 0 comments << >> A single link that cycles through several webpage background color using javascript Posted On April 17, 2012 : 0 comments << >> Simple webpage redirection using perl script Posted On April 10, 2012 : 0 comments << >> Get ipaddress using perl script Posted On April 4, 2012 : 0 comments << >>

Transparent Box using CSS

This Tutorial Has Been Viewed 2,248 Times.
VN:F [1.9.17_1161]
Rating: 10.0/10 (1 vote cast)

The below code will explain you how to make a transparent box and inside that some text contents.

This is very simple code and can be created using table tags also.

The source code looks like this:

<html>
<head>
<style type="text/css">
div.background
  {
  width: 500px;
  height: 250px;
  background: url(anyname.jpg) repeat;
  border: 2px solid black;
  }
div.transbox
  {
  width: 400px;
  height: 180px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  /* for Mozilla */
  -moz-opacity:0.6;
  }
div.transbox p
  {
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
  }
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
VN:F [1.9.17_1161]
Rating: 10.0/10 (1 vote cast)

Transparent Box using CSS , 10.0 out of 10 based on 1 rating

Incoming search terms:





You will also be interested in ,

Leave a Reply

Proudly designed by Mistonline.in.
Affordable Seo PackagesSeo BlogEdu Backlinks