Cascading Style Sheets Syntax » learn css http://csssyntax.com CSS BASIC REFERENCE Sat, 31 Jul 2010 08:26:13 +0000 en hourly 1 http://wordpress.org/?v=3.0 How to set Padding with CSS http://csssyntax.com/how-to-set-padding-with-css.html http://csssyntax.com/how-to-set-padding-with-css.html#comments Tue, 05 Jan 2010 06:30:36 +0000 gusdwi http://csssyntax.com/?p=339 Padding Property, is a function to set the distance between the border with content on an HTML element.
Css padding at crucial point in terms of making web pages, so instead I suggest that you really notice this css syntax.

In writing of the padding property, almost equal to the margin property in writing

Look Examples in below :

1.

div#sidebox {padding:10px;}

Its purpose is to show that the four sides of the selector sidebox are spaced 10 pixels between the border and content.

2.

div#sidebox {padding:10px 20px;}

Intent of the code above is to show that the distance between border and content on the top and bottom of the selector sidebox is 10 pixels while on the left and right is 20 pixels.

3.

div#sidebox {padding:10px 20px 30px 40px;}

or it could be way below:

div#sidebox {padding-top:10px; padding-right:20px;
padding-bottom:30px; padding-left:40px;}

Intent of the code above is to show that the distance between border and content of the selector sidebox on the top 10 pixels, right 20 pixels, 30 pixels down, and the left is 40 pixels.

4.

div#sidebox {padding-top:10px;}

Intent of the code above is to show that the distance from the border with the content selector sidebox on the top is 10 pixels, while others limit Default value. And besides padding-top, also with the property padding-right, padding-bottom and padding-left.

In addition to the units of px (pixels) can also be a unit emphasis (em) or percentages (%), as an example:

div#sidebox {padding:1em 2%;}

]]> http://csssyntax.com/how-to-set-padding-with-css.html/feed 0 CSS 3 Opacity Image http://csssyntax.com/how-to-make-opacity-image-using-css-3.html http://csssyntax.com/how-to-make-opacity-image-using-css-3.html#comments Wed, 04 Nov 2009 01:57:07 +0000 gusdwi http://csssyntax.com/?p=262 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;
         }
]]> http://csssyntax.com/how-to-make-opacity-image-using-css-3.html/feed 0 CSS 3 Background Color Opacity http://csssyntax.com/how-to-make-background-color-opacity-using-css3.html http://csssyntax.com/how-to-make-background-color-opacity-using-css3.html#comments Wed, 04 Nov 2009 01:34:53 +0000 gusdwi http://csssyntax.com/?p=264 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
]]> http://csssyntax.com/how-to-make-background-color-opacity-using-css3.html/feed 0 CSS 3 Box Shadow http://csssyntax.com/how-to-make-box-shadow-using-css-3.html http://csssyntax.com/how-to-make-box-shadow-using-css-3.html#comments Tue, 03 Nov 2009 01:45:11 +0000 gusdwi http://csssyntax.com/?p=258 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

]]> http://csssyntax.com/how-to-make-box-shadow-using-css-3.html/feed 0