صفت Background در Css3

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

css-background-442x268

دومین ویژگی جدید که به Css3 اضافه شده است استفاده از چند تصویر به عنوان پس زمینه قالب وب سایت می باشد . ویژگی Background هم دارای دو زیر مجموعه می باشد که قصد دارم در ادامه برای شما توضیح بدهم . اولین ویژگی background-size و دومین ویژگی background-origin می باشد .
هر دو خاصیت در مرورگرهای اینترنت اکسپلورر نسخه 9 به بعد ، فایرفاکس ، کروم ، سافاری و اوپرا پشتیبانی می شود .


ویژگی background-size در CSS3
با استفاده از این ویژگی کاربردی ، طراح می تواند سایز تصویر پس زمینه را تعیین کند .
در نسخه قبلی Css3 ما باید تصاویری که به عنوان پس زمینه انتخاب کرده بودیم  را ابتدا کوچک کرده و سپس آن را استفاده میکردیم . ولی حالا میتوانیم از یک تصویر پس زمینه در چند سایز مختلف استفاده کنیم .
شما میتوانید از پیکسل (px) یا درصد استفاده کنید .

به مثال زیر توجه کنید .


div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

 



 

 

 کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید) 

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
با استفاده از این ویژگی کاربردی ، طراح می تواند سایز تصویر پس زمینه را تعیین کند .
در نسخه قبلی Css3 ما باید تصاویری که به عنوان پس زمینه انتخاب کرده بودیم  را ابتدا کوچک کرده و سپس آن را استفاده میکردیم . ولی حالا میتوانیم از یک تصویر پس زمینه در چند سایز مختلف استفاده کنیم .
شما میتوانید از پیکسل (px) یا درصد استفاده کنید ..
</p>
<p>تصویر اصلی: <img src='http://www.learning.asarayan.com/img_flwr.gif' alt='Flowers' width='224' height='162'></p>
</body>
</html>

 



 

background-size-css3-1

در صورتیکه بخواهیم تصویر به صورت 100% پس زمینه را پوشش دهد از کد زیر استفاده می کنیم .


div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}

 



 

 کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید) 

 

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div>
Css3 ورژن جدید همان Css است اما با قابلیت ها و ویژگیهای بیشتر که بسیار کار طراحان را راحت تر کرده است . ویژگیهای مثل سایه دار کردن متن تایپ شده همانند عنوانهایی که برای آموزشهای سایت آسا رایان استفاده شده است  .
منحنی کردن لبه های کادرهایی که در Css وجود نداشت ولی در Css3 گنجانده شده است . <br />
Css3 ورژن جدید همان Css است اما با قابلیت ها و ویژگیهای بیشتر که بسیار کار طراحان را راحت تر کرده است . ویژگیهای مثل سایه دار کردن متن تایپ شده همانند عنوانهایی که برای آموزشهای سایت آسا رایان استفاده شده است  .
منحنی کردن لبه های کادرهایی که در Css وجود نداشت ولی در Css3 گنجانده شده است .
</div>
</body>
</html> 

 



 

background-size-css3-3

ویژگی background-origin در CSS3

در CSS3 از ویژگی background-origin برای مشخص کردن مکان پیش زمینه یا همان بک گراند استفاده میشود .
تصویر پیش زمینه میتواند در قسمت محتوا یا در مکان حاشیه یا مکان padding (فاصله از داخل) قرار بگیرد.
به تصویر زیر دقت کنید
background-size-css3-2

 به مثال زیر توجه کنید .


div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}

 

 کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id='div1'>
یکی از کاربردی ترین ابزار در طراحی قالب وب سایت ، ابزار Slice Tool می باشد . کاربرد این ابزار چیست ؟ همانطور که میدانید قبل از اینکه قالب وب سایت با زبانهای برنامه نویسی کدنویسی شود ابتدا باید در فتوشاپ طرح مورد نظر شبیه سازی شود .
مثل ساختن یک خانه می ماند ، ابتدا باید نقشه زمین مورد نظر طراحی و در مرحله بعدی خانه ساخته شود .
ساخت وب سایت هم به این صورت می باشد . ابتدا باید طرح قالب در نرم افزار فتوشاپ طراحی شده و در مرحله بعدی بوسیله زبانهای برنامه نویسی ساخته شود .
</div>
<p>background-origin:content-box:</p>
<div id='div2'>
یکی از کاربردی ترین ابزار در طراحی قالب وب سایت ، ابزار Slice Tool می باشد . کاربرد این ابزار چیست ؟ همانطور که میدانید قبل از اینکه قالب وب سایت با زبانهای برنامه نویسی کدنویسی شود ابتدا باید در فتوشاپ طرح مورد نظر شبیه سازی شود .
مثل ساختن یک خانه می ماند ، ابتدا باید نقشه زمین مورد نظر طراحی و در مرحله بعدی خانه ساخته شود .
ساخت وب سایت هم به این صورت می باشد . ابتدا باید طرح قالب در نرم افزار فتوشاپ طراحی شده و در مرحله بعدی بوسیله زبانهای برنامه نویسی ساخته شود .
</div>
</body>
</html> 

 



 

background-size-css3-4

پیش زمینه های چندگانه با CSS3
همانطور که در ابتدای آموزش توضیح داده ام در نسخه قبلی Css3 امکان استفاده از دو تصویر در یک کادر وجود نداشت ولی با Css3 این مشکل برطرف شده وبراحتی طراحان می توانند 2 عکس را به عنوان پس زمینه قالب انتخاب کنند . 
به مثال زیر توجه کنید


body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}

  کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
</style>
</head>
<body>
</body>
</html>

 



 

background-size-css3-5

آخرین بروز رسانیپنج شنبه, 31 ارديبهشت 1394 23:04
مجموعه های بیشتر: « Text Effect در Css3 صفت Border در Css3 »

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا