Archive for the ‘About CSS 3’ Category

« Older Entries

CSS 3 Opacity Image

Wednesday, November 4th, 2009

How to make Opacity Image using CSS 3 ?

Before there was CSS 3, to get a transparent effect on the image in the browser, the web designers using image transparent PNG format.
You can achieve a similar effect by using the opacity property. Now, the opacity property has been around for a while, but our beloved IE has its own properties.

Example css 3 image opacity:

<html>
<head>
  <title> Opacity Image using css3</title>
  <style type="text/css">
     .img_opacity {
         opacity: .6; // all modern browsers (this is CSS3)
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
         filter: alpha(opacity=60); // IE 5-7
         }
  </style>
</head>
<body>
   <img src="http://localhost/cs3/images/photo6.jpg" width="241" height="228"/>
</body>
</html>

The Result:
image opacity

In modern browsers like Safari, Google Chrome, Firefox, you simply write CSS code like below:

.img_opacity {
         opacity: .6;
         }

Tags: , ,
Posted in About CSS 3 | No Comments »

CSS 3 Background Color Opacity

Wednesday, November 4th, 2009

How to make Background Color Opacity using CSS 3 ?

Everyone knows what RGB stands for (red, green, blue), but what does the A stand for?
It stands for Alpha, which refers to the transparency.

Other than rounded corners, RGBA is my next most used CSS3 property. Sometimes I just want to add a few light white/black background to navigation links when a user hover overs them. It’s much easier than creating a new image for each color. but using css3 property you can make background with opacity.

Example css3 background :

<html>
<head>
  <title>Background Color Opacity</title>
  <style type="text/css">
    .rgba {
       width:200px;
       text-align:center;
       padding:10px;
       background: rgba(239, 182, 29, .50);
       }
  </style>
<body>
  <div>how to make background color opacity</div>
</body>
</html>

The Result:

Background color with opacity
Background color opacity none

Tags: ,
Posted in About CSS 3 | No Comments »

CSS 3 Text Shadow

Tuesday, November 3rd, 2009

How to make Text Shadow using CSS 3 ?

Using HTML Text and  CSS3, we can create the shadow effects on text. suitable for headings or large text on web pages.
so, you do not need to change the text into image to get a shadow effect.
Example for css3 text shadow:

<html>
<head>
<title>How to make Font Shadow using CSS 3</title>
<style type="text/css">
.fontShadow {
           color: #2178d9;
           font-size: 24px;
            }
.fontShadow {
           text-shadow: 2px 2px 1px #000;
            }
</style>
</head>
<body>
   <p>I will show you
   <span><h1>How to create Text shadow</h1></span>
   </p>
</body>
</html>

The Result:

I will show you How to create Text  shadow

So, with css text you will get a short time to work

Tags: , ,
Posted in About CSS 3 | No Comments »

CSS 3 Box Shadow

Tuesday, November 3rd, 2009

How to make Box Shadow using CSS 3

Excess CSS3 is able to make something that can not be done by CSS2, which usually only be done by using javascript or jQuery assistance with writing complex code. but CSS3 able to turn it into a simple form. Like the way I made following the how to create a Box shadow using the CSS3.

Example for css3 box shadow:

<html>
<head>
<title>How to make Box Shadow using CSS 3</title>
<style type="text/css">
.boxShadow {
          box-shadow: 5px 5px 2px black;
          -moz-box-shadow: 5px 5px 2px black;
          -webkit-box-shadow: 5px 5px 2px black;
          width:200px;
          padding:5px;
          text-align:center;
          background:#dddddd;
          border:solid 1px #666666;
          }
</style>
</head>
<body>
   <div>
      <h2>How to make Box Shadow using CSS 3</h2>
   </div>
</body>
</html>

The Result:

How to make Box Shadow using CSS 3

Note: This tutorial applies only to modern browsers such as Mozilla v 3.5.3 and above, safari, Google chrome

Tags: , ,
Posted in About CSS 3 | No Comments »

« Older Entries