Posts Tagged ‘css 3’

« Older Entries
Newer Entries »

CSS 3 Colored Borders Style

Friday, April 23rd, 2010

How to set colored borders style using CSS 3 ?

W3C has offered some new options for borders in CSS3, of which, next to rounded borders, border-color is also very interesting.

Mozila/Firefox has implemented this function, which allows you to create cool colored borders.

This is an example:

Mozilla/Firefox users should see a nice grey fading border on this box…

The CSS code for this is:

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

And of course, you can also do cool color stuff:

Mozilla/Firefox users should see a nicely fading red border on this box…

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

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 »

« Older Entries
Newer Entries »