Cascading Style Sheets Syntax » css tutorials http://csssyntax.com CSS BASIC REFERENCE Sat, 31 Jul 2010 08:26:13 +0000 en hourly 1 http://wordpress.org/?v=3.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 CSS 3 Rounded Corners http://csssyntax.com/how-to-make-rounded-corners-using-css-3.html http://csssyntax.com/how-to-make-rounded-corners-using-css-3.html#comments Tue, 03 Nov 2009 01:22:04 +0000 gusdwi http://csssyntax.com/?p=257 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

]]> http://csssyntax.com/how-to-make-rounded-corners-using-css-3.html/feed 0 CSS Menu Generator http://csssyntax.com/create-drop-down-menu-with-free-css-menu-generator.html http://csssyntax.com/create-drop-down-menu-with-free-css-menu-generator.html#comments Tue, 20 Oct 2009 04:30:24 +0000 gusdwi http://csssyntax.com/?p=199 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. You just need a few minutes to make a nice menu, either horizontal, vertical and drop-down (combo-box) menus.

To generate your menu, just add menu items, select menu type, color and font settings, then copy the CSS/JavaScript and XHTML menu code and paste it in your page. XHTML code is very important for search engines. They leave pages in last positions if the code is not SEO friendly. If you want to make professional and fast designs, consider adding this software to your tool set. On the other hand, the preview only works in the interface. You just don’t know how the menu will look in the browser until you copy and paste the generated code. Besides, it will be nice if you could input the menu item link directly in the interface. Right now, you have to edit the links manually.

If you want your job to be more easy, you can use that freeware below:

Css Menu Generator 4.0
With this version of the tool you can generate horizontal
or vertical drop-down (pull-down) menus.
www.wonderwebware.com

]]> http://csssyntax.com/create-drop-down-menu-with-free-css-menu-generator.html/feed 0 CSS menu on all browser http://csssyntax.com/create-css-menu-compatible-on-all-browser.html http://csssyntax.com/create-css-menu-compatible-on-all-browser.html#comments Tue, 20 Oct 2009 04:26:00 +0000 gusdwi http://csssyntax.com/?p=195 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. I have to say that I was pleasantly surprised with the interface of this program. Pretty nice and easy to use, and the most important thing, it generates strict xhtml compliant code. That means you can be sure that your web site will be seen in any browser in the same way. Another important feature is that you can edit the generated code to customize some properties when needed. Only one features is not present in the interface, you can’t make sub menus, which is a pity and sometimes needed, but you can make similar sub menus based on the original without too much effort. You can Download CSS Tab for Web Designer here: CSS Tab Designer 2.0 CSS Tab Designer is an easy to use program that will help you design css-based lists and tabs visually. www.highdots.com

]]> http://csssyntax.com/create-css-menu-compatible-on-all-browser.html/feed 0