CSS आपको कुछ Properties प्रदान करती है. जिनकी सहायता से आप Images को Optimize कर सकते है. यह Properties Image की height, width, border, radius, opacity आदि Define करती है.
Image Border
Image Height
Image Width
Image Opacity
Image Radius
Border Property का उपयोग करके आप किसी भी Image की Border की Heigh, Width डिफाइन कर सकते है. इसके द्वारा आप बॉर्डर के प्रकार जैसे की Dotted, Dashed और उसका Color को Define कर सकते है.
Border Property Define करने का Syntax आप नीचे देख सकते है.
border : width | type | color;
Border की Width के बाद Border का Type Define किया जाता है. CSS मे Borders के चार Basic Types होते है.
Dotted - Border Dotes की Form मे Represent होती है.
Dashed - Border Dashes की Form मे Represent होती है.
Double - Border Double Lines के रूप मे Show होती है.
Solid - Border एक Solid Line के रूप मे Show होती है
<!DOCTYPE HTML>
<html>
<head>
<title>Image Border Example</title>
<style>
#borderimg1 {
border: 8px solid transparent;
padding: 14px;
-webkit-border-image: url(border.png) 30 round;
-o-border-image: url(border.png) 30 round;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>
<p id="borderimg1">Wellcome To My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
Height Property का उपयोग करके किसी भी Image की Height को Define किया जा सकता है. CSS के द्वारा Image की Height को Pixels और % मे भी Define किया जा सकता है.
<!DOCTYPE HTML>
<html>
<head>
<title>Image Height Example</title>
<style>
img.normal {
height: auto;
}
img.big {
height: 120px;
}
p.yx {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<img class="normal" src="css.gif" width="94" height="74"><br>
<img class="big" src="css.gif" width="94" height="74">
<p class="yx">Wellcome To My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
इस Property का उपयोग करके किसी भी Image की Width को Define किया जा सकता है. CSS के द्वारा Image की Width को Pixel और % मे भी Define किया जा सकता है.
<!DOCTYPE HTML>
<html>
<head>
<title>Image Width Example</title>
<style>
img.normal {
height: auto;
}
img.big {
width: 120px;
}
p.yx {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<img class="normal" src="css.gif" width="74" height="74"><br>
<img class="big" src="css.gif" width="74" height="74">
<p class="yx">Wellcome To My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
Opacity Property के द्वारा Images की स्पष्टता को Define किया जाता है. इस Property की Value 0.1 से लेकर 1 तक होती है.
<!DOCTYPE HTML>
<html>
<head>
<title>Image Opacity Example</title>
<style>
div {
background-color: red;
opacity: 0.5;
filter: Alpha(opacity=50);
}
</style>
</head>
<body>
<div>Wellcome To My Website. My Name is Ammu. I Live in Telangana.
Wellcome To My Website. My Name is Ammu. I Live in Telangana.</div>
</body>
</html>