Archive for the ‘About CSS 3’ Category

« Older Entries
Newer Entries »

CSS 3 Borders Image Background

Friday, April 23rd, 2010

How to create borders style using image ?

Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image. These two values are shorthands for:

  • border-image:
    • border-top-image
    • border-right-image
    • border-bottom-image
    • border-left-image
  • border-corner-image:
    • border-top-left-image
    • border-top-right-image
    • border-bottom-left-image
    • border-bottom-right-image

border-image currently works in Safari and Firefox 3.1 (Alpha). The syntax to use it is:

border-image: url(border.png) 27 27 27 27 round round;

Which results in:

Lorem ipsum dolor sit amet.

or

border-image: url(border.png) 27 27 27 27 stretch stretch;

Which then results in:

Lorem ipsum dolor sit amet.

For those of you not so lucky as to be able to see this, here are screenshots of the two examples.
Number One :
border-image first example
Number Two :
border-image second example

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

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 »

« Older Entries
Newer Entries »