Posts Tagged ‘css tutorials’

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 »

CSS 3 Rounded Corners

Tuesday, November 3rd, 2009

How to make Rounded Corners using CSS 3 ?

Using css 3 property, you can create a button with rounded corners or Borders in a matter of seconds, without having to use the image, which will spend a lot of your time.

With CSS 3, We can create Rounded Corners like css code below:

<html>
<head>
<title>Rounded Corner using CSS 3</title>
<style type="text/css">
  .rounded {
           width:200px;
           padding:5px;
           text-align:center;
           background:#dddddd;
           border:solid 1px #666666;
           border-radius: 10px;
           -moz-border-radius: 10px;
           -webkit-border-radius: 10px;
           }
</style>
</head>
<body>
   <div class="rounded">
      <h1>How to make Rounded Corner using CSS 3</h1>
   </div>
</body>
</html>

As you can see, all that you need to do is specify three CSS3 properties. Eventually, it will only be one; you have to use three now because different browsers use different property names.

The Result :

How to make Rounded Corner using CSS 3

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

CSS Menu Generator

Tuesday, October 20th, 2009

CSS Menu Generator is another WYSIWYG (what you see is what you get) menu generator. What is the biggest difference with the others?: it generates XHTML, CSS and Javascript code compliant with the standard W3C specifications. This is very important if you want to make professional designs. Interface is pretty nice and easy to understand. (more…)

Tags: ,
Posted in References | No Comments »

CSS menu on all browser

Tuesday, October 20th, 2009

How to Create CSS menu compatible on all browser ?

A web designer may have to be stressful because of CSS, especially when making menu tab on the web page. In Firefox is good but on IE 6 to be ruined. I myself have experienced such a case to make me stress, and finally to the efforts and hard work, I found a software / freeware, called CSS Tab Designer. (more…)

Tags: , ,
Posted in References | No Comments »