Cascading Style Sheets Syntax » css style 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 make Button Emboss using CSS 3 http://csssyntax.com/how-to-make-button-emboss-using-css-3.html http://csssyntax.com/how-to-make-button-emboss-using-css-3.html#comments Sat, 31 Jul 2010 08:02:35 +0000 gusdwi http://csssyntax.com/?p=634 Usually, the web developer or web designer to make buttons embossed with ways to use background image.
But with technological advances in the field of web development, has born a new way to create embossed button without using the background image again.

CSS 3 is able to make it easier and not have to bother with useless waste of your time.

Demo

With the syntax below will get a beautiful embossed button:

.button{
margin: 0.1em;
text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
width:140px;
padding:0.3em;
}

#b1 {
background:#ddd;
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;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;}

#b1 a {
text-decoration:none;
color:#888;}

#b1 a:hover {
color:#555;}

Note: This Way is not support in IE
Example

]]> http://csssyntax.com/how-to-make-button-emboss-using-css-3.html/feed 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 Text Shadow http://csssyntax.com/how-to-make-tex-shadow-using-css-3.html http://csssyntax.com/how-to-make-tex-shadow-using-css-3.html#comments Tue, 03 Nov 2009 04:33:33 +0000 gusdwi http://csssyntax.com/?p=260 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

]]> http://csssyntax.com/how-to-make-tex-shadow-using-css-3.html/feed 0 What’s that CSS 3…? http://csssyntax.com/whats-that-css-3.html http://csssyntax.com/whats-that-css-3.html#comments Thu, 29 Oct 2009 04:30:09 +0000 gusdwi http://csssyntax.com/?p=236 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
]]> http://csssyntax.com/whats-that-css-3.html/feed 0