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.
Posts Tagged ‘css code’
How to set Padding with CSS
Tuesday, January 5th, 2010CSS 3 Opacity Image
Wednesday, November 4th, 2009How 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:
In modern browsers like Safari, Google Chrome, Firefox, you simply write CSS code like below:
.img_opacity {
opacity: .6;
}
CSS 3 Text Shadow
Tuesday, November 3rd, 2009How 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
What’s that CSS 3…?
Thursday, October 29th, 2009We’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.
