Archive for the ‘About CSS 3’ Category

Newer Entries »

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 »

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 »

What’s that CSS 3…?

Thursday, October 29th, 2009

We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

I’m sure you’ve heard of CSS in general. CSS3 isn’t that much different, in terms of syntax; however, the power of CSS3 is much greater. As you’ll see in these eleven techniques, you can have multiple backgrounds, dynamically resize those backgrounds, border radiuses, text shadows, and more!

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more.

What We’ll Be Covering

Here are the 11 techniques that I’ll be showing you how to recreate with CSS3. I’ll show you how to create them using CSS 3 without   JavaScript 0r JQuery, . Remember – these effects will only work in modern browsers that implement these CSS3 features. Your best option is to view these with Safari 4, firefox 3.5.3-upper, Google Chrome.

  1. CSS 3 Rounded Corners
  2. CSS 3 Box Shadow
  3. CSS 3 Text Shadow
  4. CSS 3 Fancy Font
  5. CSS 3 Opacity
  6. CSS 3 RGBA/ CSS 3 background
  7. CSS 3 Background Size
  8. CSS 3 Multiple Backgrounds
  9. CSS 3 Columns
  10. CSS 3 Border Image
  11. CSS 3 Animations

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

Newer Entries »