آموزش طراحی سایت-رنگ و گرادینت در CSS3

سلام دوستان...

با آموزش CSS3 از دوره آموزش طراحی سایت همراه ما باشید

 

آموزش رنگها در CSS3

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند . اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

• رنگ های RGBA (red, blue, green و alpha)

• رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)

• رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

• درجه ی شفافیت و کدری Opacity

 

رنگ های RGBA شامل (red, blue, green و alpha)

 

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید . مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

​

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

 

آموزش طراحی سایت : رنگ های HSL

اچ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد .

یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

• 0 (یا 360) کاملاً قرمز است

• 120 سبز محسوب می شود

• 240 آبی محسوب می شود/li>

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

​

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

 

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند . مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

​

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

 

مفهوم Opacity (درجه ی تیرگی و شفافیت)

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند . مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

​

همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است . مثال زیر مقادیر RGB مختلفی را با opacity نشان می دهد :

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

 

آموزش گرادینت در css

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند .

اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

• رنگ های RGBA (red, blue, green و alpha)

• رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)

• رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

• درجه ی شفافیت و کدری Opacity

رنگ های RGBA (red, blue, green و alpha)

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید . مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

​

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

 

رنگ های HSL

رنگ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد . یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

• 0 (یا 360) کاملاً قرمز است

• 120 سبز محسوب می شود

• 240 آبی محسوب می شود/li>

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

​

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

 

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند . مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

​

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

 

درجه ی تیرگی و شفافیت Opacity

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند . مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

​

همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است . مثال زیر مقادیر RGB مختلفی را با opacity نشان می دهد :

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

آموزش طراحی سایت ادامه دارد

​

آموزش طراحی سایت-آموزش متد های اعداد جاوااسکریپت

سلام بر دوستان عزیزم..

امروز با بخش دیگری از دوره آموزش طراحی سایت تحت عنوان آموزش متد های اعداد در جاوااسکریپت همراه شما هستیم..

آموزش طراحی سایت : متدهای سراسری (global methods)

توابع سراسری (global functions) را می توان برای تمامی نوع داده های (data type) جاوااسکریپت بکار برد. جدول های زیر پرکاربرد ترین متدهایی که حین کار با اعداد در زبان جاوا اسکریپت کارایی دارند را با ذکر کاربرد آن فهرست می کند.

​

متد های مربوط به number، متدهایی هستند که می توان برای اعداد از آن ها استفاده کرد.

​

متد toString()

این متد یک عدد یا متغیر عددی را به عنوان رشته ی متنی بر می گرداند. متدهای مربوط به شی number را می توان برای انواع عدد بکار گرفت اعم از لفظ ها (literals)، متغیرهای عددی (variable)، عبارت های عددی (expression).

مثال یک :

var x = 123;

document.getElementById("demo") =

x.toString() + "<br>" +

(123).toString() + "<br>" +

(100 + 23).toString();

متد toExponential()

رشته ی با اعداد گرد شده برمی گرداند که با قرارداد نمایی (exponential notation) نوشته شده باشد. این تابع در حقیقت یک متغیر عددی را به قرارداد نمایی (exponential notation) تبدیل می کند. یک پارامتر ورودی تعداد کاراکترهای بعد از ممیز اعشار را تعیین می کند.

مثال دو :

var x = 9.656;

document.getElementById("demo") =

x.toExponential() + "<br>" +

x.toExponential(2) + "<br>" +

 x.toExponential(4) + "<br>" +

x.toExponential(6);

پارامتر اختیاری است. در صورت مشخص نکردن پارامتر، جاوا اسکریپت عدد را گرد نمی کند.

متد toFixed()

رشته عددی با تعداد اعشار مشخص شده برمی گرداند.

مثال سه :

var x = 9.656;

document.getElementById("demo") =

x.toFixed(0) + "<br>" +

x.toFixed(2) + "<br>" +

x.toFixed(4) + "<br>" +

x.toFixed(6);

متد toPrecision()

یک رشته ی عددی با طول مشخص (تعداد کاراکتر معین) برمی گرداند.

مثال چهار :

var x = 9.656;

document.getElementById("demo") =

x.toPrecision() + "<br>" +

x.toPrecision(2) + "<br>" +

x.toPrecision(4) + "<br>" +

x.toPrecision(6);

آموزش طراحی سایت : تبدیل متغیر به عدد

سه تابع در جاوا اسکریپت وجود دارد که متغیر را به عدد تبدیل می کنند.

The Number() method

The parseInt() method

The parseFloat() method

توابع بالا متدهای مختص شی number نیستند (number methods)، بلکه متدهای سراسری یا global زبان جاوا اسکریپت محسوب می شوند.

متد Number()

این تابع متغیرهای جاوا اسکریپت را به عدد تبدیل می کند.

مثال پنج :

document.getElementById("demo") =

Number(true) + "<br>" +

Number(false) + "<br>" +

Number(new Date()) + "<br>" +

Number("  10") + "<br>" +

Number("10  ") + "<br>" +

Number("10 6");

متد parseInt()

تابع parseInt() یک رشته را تجزیه (parse) کرده و یک عدد صحیح برمی گرداند. استفاده از فاصله امکان پذیر می باشد. توجه داشته باشید که تنها عدد اول برگردانده می شود.

مثال شش :

document.getElementById("demo") =

parseInt("10") + "<br>" +

parseInt("10.33") + "<br>" +

parseInt("10 6") + "<br>" +

parseInt("10 years") + "<br>" +

parseInt("years 10");

چنانچه امکان تبدیل عدد مورد نظر وجود نداشته باشد، در جواب (NaN (not a number برگردانده می شود.

متد parseFloat()

تابع parseFloat() یک رشته را تجزیه (parse) کرده و در جواب یک عدد برمی گرداند. استفاده از فاصله مجاز می باشد. تنها اولین عدد برگردانده می شود.

مثال هفت :

document.getElementById("demo") =

parseFloat("10") + "<br>" +

parseFloat("10.33") + "<br>" +

parseFloat("10 6") + "<br>" +

parseFloat("10 years") + "<br>" +

parseFloat("years 10");

در صورت عدم امکان تبدیل عدد، (NaN (not a number برگردانده می شود.

متد valueOf()

یک متغیر عددی را به صورت های مختلف عدد (لفظ / literal، متغیر، عبارت عددی) برمی گرداند.

مثال هشت :

var x = 123;

document.getElementById("demo") =

x.valueOf() + "<br>" +

(123).valueOf() + "<br>" +

(100 + 23).valueOf();

در جاوا اسکریپت، یک عدد می تواند یک مقدار اولیه (typeof = number) یا یک شی (typeof = object) باشد. متد ValueOf() داخل زبان جاوا اسکریپت به منظور تبدیل اشیا یا آیجکت number به مقادیر اولیه بکار گرفته می شود، هیچ لزومی ندارد از آن در کد خود استفاده کنید.

با آموزش های دیگر از آموزش جاوا اسکریپت در آموزش طراحی سایت با ما همراه باشید....

آموزش طراحی سایت-JQuery

سلام عزیزان ... با آموزش JQuery از دوره آموزش طراحی سایت همراه باشید

 

جی کوئری Jquery چیست؟

برای اینکه بدانیم به راحتی باید گفت که یک کتابخانه یا چارچوب کاری برای زبان برنامه نویسی سمت سرویس گیرنده جاوا اسکریپت (JavaScript framework) است که هدف اصلی آن فراهم آوردن زمینه ی استفاده ی آسان از زبان نام برده در برنامه نویسی تحت وب (صفحات وب) می باشد. jQuery یک کتابخانه از جاوا اسکریپت است . از آن جایی که کتابخانه ی JQuery بسیاری از امکانات و عملیات قابل اجرا توسط زبان جاوا اسکریپت را گرفته و در قالب یک سری تابع می گنجاند که می توانید به راحتی هر چه تمام تر فراخوانی و اجرا کنید (با کم ترین میزان کدنویسی بیشترین عملیات ممکن را اجرا کنید)، می توان آن را یک لایه ی سطح بالا (abstraction layer) نیز نامید. با این حال، لازم است به خاطر داشته باشید که کتابخانه ی ذکر شده به هیچ وجه نمی تواند کاملا جایگزین JavaScript گردد. اگرچه jQuery در بسیاری از موارد میزان کدنویسی را کاهش داده و در عین حال همان عملیات قابل اجرا توسط جاوا اسکپریت را اجرا می کند، اما نباید فراموش کنید که توابع و دستورات jQuery هم در حقیقت همان کد زبان جاوا اسکریپت است.

آموزش طراحی سایت : با توجه به آنچه گفته شد،در لزومی ندارد برای استفاده از کتابخانه ی مزبور حتما یک متخصص در زمینه ی برنامه نویسی با جاوا اسکریپت باشید.در واقع، jQuery سعی دارد بسیاری از کارهایی که می توان با استفاده از کدهای جاوا اسکریپت پیاده سازی کرد، همچون دستکاری DOM و فراخوانی توابع AJAX، را تسهیل نماید. از این رو لازم نیست درباره ی جاوا اسکریپت اطلاعات بسیار بالایی داشته باشید. تعدادی زیادی کتابخانه ی جاوا اسکریپت وجود دارد که در حال حاضر jQuery پرکاربردترین و کارآمدترین آن ها محسوب می شود. از جمله دلایل محبوبیت این کتابخانه می توان به قابلیت توسعه پذیری بالا اشاره کرد. بنابراین شما می توانید برای هر کاری که تصورش را می کنید، افزونه (plugin) پیدا کنید. قدرت و کارایی بالا، دامنه ی وسیع افزونه های پرکاربرد، ساختار نگارشی روان و کارآمد این چارچوب کاری را از دیگر کتابخانه های jQuery تمایز بخشیده است.

 

آموزش طراحی سایت : آموزش انتخاب یک ویرایشگر مناسب برای jQuery

می توان دستورات و توابع jQuery را در هر ویرایشگر متن نظیر Windows Notepad نوشت. اما نوشتن کدهای آن داخل یک ویرایشگر HTML که دستورات جاوا اسکریپت خود را در آن می نویسید، به مراتب کارامد تر خواهد بود. تعدادی ویرایشگر وجود دارد که با jQuery مانند شهروند درجه یک برخورد می کنند. بهترین ویرایشگر برای درج بهینه و سریع دستورات آن، TSW WebCoder می باشد که با داشتن قابلیت های بی نظیر IntelliSense و ارائه دادن تمامی تکنولوژی های مورد نیاز همچون HTML، CSS، JavaScript، PHP و البته jQuery در کدنویسی به یاری شما می آید.

داشتن لیستی از property ها، متدها و پارامترهای احتمالی آن ها کمک بزرگی به شما می کند، به خصوص اگر در کدنویسی با jQuery یک تازه وارد هستید. در زیر تعدادی تصویر از ویرایشگر TSW WebCoder مشاهده می کنید که اشاره به علت برتری این ویرایشگر و قابلیت آسان سازی کدنویسی با آن دارد: تصویر زیر توابع قابل فراخوانی بر روی یک شی jQuery را نشان می دهد.

​

​

این تصویر نیز پارامترهای متد fadeIn را نشان می دهد.

 

آموزش استفاده از jQuery در صفحات وب

جهت استفاده از jQuery، بایستی آن را به صفحاتی که می خواهید از کدهای آن استفاده کنند، اضافه نمایید. برای این منظور می بایست ابتدا این کتابخانه را از سایت www.jquery.com دانلود نمایید. با مراجعه به سایت مزبور با دو گزینه برای دانلود مواجه می شوید: 1. نسخه ی "Production" 2. نسخه ی "Development" . نسخه ی "Production" برای وب سایت ها live و آماده می باشد. این نسخه ی فشرده و کم حجم (minify) شده تا کم ترین میزان فضا را اشغال کند و برای کاربرانی که مرورگرها آن ها باید فایل jQuery را همراه با باقی اطلاعات سایت بارگیری کند، بهترین گزینه می باشد. اما برای آزمایش و توسعه، نسخه ی "Development" گزینه ی ارجح تلقی می شود. نسخه ی یاد شده فشرده سازی (minify)نشده و به همین خاطر در صورت برخورد با خطا می توانید مشاهده کنید خطا در کجا رخ داده است.

پس از دانلود فایل jQuery JavaScript، لازم است آن را به وسیله ی تگ< script>اچ تی ام ال به صفحه ی وب خود متصل کنید (خصیصه ی type تگ نام برده را با مقدار ="text/javascript" src="jquery-1.5.1.js" تنظیم نمایید یا به عبارتی دیگر در تگ script به آن ارجاع دهید). بهترین کار جایگذاری فایل دانلود شده ی jquery.js در پوشه ی متعلق به صفحه ای است که می خواهید از jQuery استفاده کند. سپس آن را در بخش < head> بگنجانید (در بخش head صفحه به آن ارجاع دهید):

اکنون بخشی از صفحه ی شما به شکل زیر خواهد:

jQuery test

یک روش جدیدتر (بجای دانلود jQuery و میزبانی آن) این است که jQuery را از یک CDN (تحویل محتوا روی شبکه) دریافت کنید. Google و Microsoft هر دو نسخه های مختلفی از کتابخانه ی مذکور و دیگر کتابخانه های جاوا اسکریپت را میزبانی می کنند. با این کار دیگر نیازی به دانلود و ذخیره ی فایل jQuery نیست. بعلاوه از آنجایی این فایل از یک URL مشترک با سایت دیگر دریافت می شود، به احتمال زیاد زمانی که کاربران به سایت شما مراجعه می کنند و مرورگر کتابخانه را درخواست می کنند، فایل نام برده از قبل در حافظه ی نهان (cache) آماده می باشد (به این دلیل که سایت دیگری دقیقا همین نسخه و فایل را از قبل استفاده می کند). همچنین بیشتر CDN ها اطمینان حاصل می کنند، وقتی کاربری فایلی را از آن درخواست می کند، آن فایل از طریق نزدیکترین سرویس دهنده به کاربر (از نظر موقعیت جغرافیایی و مکانی) تحویل داده شود. می توانید jQuery را از یک CDN، درست مانند زمانی که آن را دانلود می کنید، مورد استفاده قرار دهید. تنها چیزی که تغییر می کند، آدرس URL می باشد. برای نمونه، جهت اضافه کردن ویرایش jQuery 3.5.1 از سرورهای Google به صفحه ی وب مورد نظر، دستور زیر را وارد می کنید:

 

آموزش طراحی سایت ادامه دارد

​

آموزش طراحی سایت-BackGround در CSS3

سلام دوستان...

با آموزش CSS3 از دوره آموزش طراحی سایت همراه ما باشید

 

آموزش BackGround در CSS3

خاصیت های مربوط به پس زمینه در CSS 3:

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

background-size background-origin background-clip

مرورگرهایی که در این جدول ارائه شده از این خاصیت نوین پشتیبانی می کنند

 

آموزش طراحی سایت : افزودن چندین پس زمینه در CSS 3

سی اس اس CSS3 به شما این امکان را می دهد با استفاده از خاصیت background-image چندین تصویر پس زمینه به المان خود اضافه کنید. تصاویر پس زمینه متمایز با استفاده از کاراکتر ویرگول از هم جدا شده و بر روی هم انباشته می شوند (قرار می گیرند) به گونه ای که اولین تصویر به بیننده از دیگر تصاویر نزدیک تر است. مثال زیر دارای دو تصویر پس زمینه است که اولین آن ها تصویر یک گل (که در پایین سمت راست تراز بندی شده و قرار گرفته) و دیگری یک پس زمینه ی کاغذ است (که در بالا سمت چپ قرار داده شده).

مثال:

#example1 {

background-image: url(img_flwr.gif), url(paper.gif);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

}

می توان چندین تصویر پس زمینه را یا با خاصیت مختصر نویسی (مقداردهی در تنها یک تعریف و به صورت خلاصه / به صورت خاصیت چند مقداری) به المان اضافه کرد و یا به صورت جداگانه (تعیین به صورت خاصیت تک مقداری( تصویر پس زمینه را به المان اضافه کرد مانند مثال فوق. مثال زیر از روش اول برای این منظور بهره می گیرد:

#example1 {

    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

}

 

آموزش طراحی سایت : خاصیت background-size در CSS 3

پیش از CSS3, تصویر پس زمینه همان اندازه ی اولیه و اصلی خود تصویر باقی می ماند. CSS3 این قابلیت را فراهم می کند که تصاویر پس زمینه را مجدداً در کانتکست ها و زمینه های مختلف بکار ببرید. اندازه ی تصاویر را می توان بر حسب پیکسل (بر حسب واحد length) , درصد (percentage) یا یکی از دو کلیدواژه ی contain یا cover تعریف کرد. مثال زیر تصویر پس زمینه را بسیار کوچکتر از اندازه ی اصلی آن تنظیم می کند (بر حسب پیکسل): تصویر اصلی:

​

زیر همان تصویر را مشاهده می کنید که مجدداً اندازه بندی شده است:

​

کد لازم برای عملیات فوق:

#div1 {

background: url(css3.jpg);

background-size: 100px 80px;

background-repeat: no-repeat;

}

همان طور که پیش تر ذکر شد دو مقادیر ممکن دیگر برای تعیین اندازه ی تصویر پس زمینه وجود دارند, کلید واژه های "contain" و "cover". کلید واژه ی "contain" تصویر پس زمینه را تا حد ممکن بزرگ مقیاس دهی و اندازه بندی می کنند (البته طول و عرض هر دو باید داخل کادر و محدوده ی محتوا جای گیرد). به عبارتی دیگر, عکس پس زمینه به اندازه محتویات درون عنصر بزرگ خواهد شد، تا ارتفاع وعرض آن اندازه المان شود. از این رو, بسته به نسبت و اندازه ی تصویر پس زمینه و همچنین مکان قرار گیری تصویر پس زمینه, ممکن است بخش هایی از پس زمینه توسط تصویر مربوطه پوشش داده نشود. کلید واژه ی "cover" تصویر پس زمینه را گونه ای مقیاس دهی می کند که کلاً ناحیه یا محدوده ی محتوا را تحت پوشش قرار دهد (هر دو عرض و ارتفاع تصویر باید با ناحیه ی محتوا برابر بوده یا از آن بیشتر شود). در حقیقت, عکس پس زمینه به اندازه محتویات درون عنصر کوچک خواهد شد، تا ارتفاع وعرض آن اندازه عنصر شود. از این رو, بخش هایی از تصویر ممکن است در محل موقعیت دهی قابل رویت نباشند. مثال زیر استفاده از این دو کلید واژه را در تنظیم اندازه ی تصویر پس زمینه, نمایش می دهد:

#div1 {

background: url(img_flower.jpg);

background-size: contain;

background-repeat: no-repeat;

}

#div2 {

background: url(img_flower.jpg);

background-size: cover;

background-repeat: no-repeat;

}

 

اندازه ی چندین تصویر پس زمینه را به طور همزمان مقداردهی کنید

خاصیت background-size همچنین قادر است هنگام کار با چند پس زمینه, چندین مقدار برای تصویر پس زمینه بپذیرد (برای این منظور لازم است از لیستی که توسط ویرگول ایتم ها را از هم جدا می کند استفاده کنید). مثال زیر سه تصویر پس زمینه ی منحصر به فرد مشخص کرده, و برای هر تصویر یک مقدار background-size متمایز در نظر می گیرد:

مثال:

#example1 {

background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

background-size: 50px, 130px, auto;

}

 

تصویر پس زمینه ی تمام صفحه

اکنون می خواهیم تصویر پس زمینه ی روی وب سایت خود پیاده کنیم که همواره (در همه شرایط) کل فضای موجود در پنجره ی مرورگر را پوشش دهد. شرایط لازم برای چنین تصویر به شرح زیر می باشد:

• کل صفحه را با تصویر بپوشاند (هیچ گونه فضای سفیدی نباید وجود داشته باشد)

• تصویر را متناسب با نیاز مقیاس دهی و اندازه بندی کند

• تصویر در مرکز صفحه قرار گیرد

• سبب ایجاد نوار پیمایش (scrollbar) برای مشاهده ی کل تصویر نشود

مثال زیر نحوه ی انجام عملیات مزبور را تشریح می کند. برای انجام این مثال کافی است از تگ html بهره بگیرید (زیرا که عنصر html همیشه حداقل از نظر ارتفاع با پنجره ی مرورگر مطابقت دارد). سپس یک پس زمینه ی وسط چین شده و ثابت روی آن مقدار دهی کنید. در مرحله ی نهایی عملیات اندازه ی تصویر را با استفاده از خاصیت background-size تنظیم کنید:

html {

background: url(img_flower.jpg) no-repeat center center fixed;

background-size: cover;

 

خاصیت background-origin در CSS3

خاصیت background-origin تعیین می کند تصویر پس زمینه در کدام موقعیت قرار بگیرد (نقطه ی شروع مکان قرار گیری پس زمینه ی المان مورد نظر را مشخص می کند). این خاصیت سه مقدار مقدار متفاوت می گیرد:

​

مثال زیر کاربرد خاصیت background-origin را نمایش می دهد:

#example1 {

border: 10px solid black;

padding:35px;

background:url(img_flwr.gif);

background-repeat: no-repeat;

background-origin: content-box;

}

 

خصوصیت background-clip در CSS3

این ویژگی به منظور تعیین مکان و نحوه قرار گیری پس زمینه در عنصر مورد نظر بکار گرفته می شود. خاصیت background-clip سه مقدار متفاوت می پذیرد که به شرح زیر است:

​

مثال زیر این خاصیت را کاربردی نمایش می دهد:

#example1 {

border: 10px dotted black;

padding:35px;

background: yellow;

background-clip: content-box;

}

کلیه ی خصوصیات مربوطه به پس زمینه در جدول زیر با ذکر شرح آن ارائه گردیده:

​

آموزش طراحی سایت ادامه دارد

​

آموزش طراحی سایت-اعداد در جاوا اسکریپت

سلام عزیزان با آموزش جاوا اسکریپت از دوره آموزش طراحی سایت در خدمت شما دوستان هستیم

 

آموزش اعداد در جاوا اسکریپت

 

اعداد در جاوا اسکریپت

آموزش طراحی سایت : زبان جاوا اسکریپت فقط یک نوع متغیر عددی دارد. متغیرهای عددی می توانند از نوع عددی یا اعشاری باشند.

مثال:

var x = 34.00; // A number with decimals

var y = 34; // A number without decimals‎

اعداد بسیار کوچک یا کوچک را می توان با نماد علمی نوشت

مثال:

var x = 123e5; // 12300000

var y = 123e-5; // 0.00123‎

اعداد جاوا اسکریپت همیشه 64 بیتی و با ممیز شناور (در مبنای 10) هستند. برخلاف بسیاری از زبان های برنامه نویسی، جاوا اسکریپت انواع عددی از قبیل : integer (عدد صحیح)، short، long و floating-point تعریف نمی کند و این نوع اعداد در جاوا اسکریپت استفاده نمی شوند. در جاوا اسکریپت اعداد همیشه به صورت ممیز شناور با دو رقم اعشار (double precision floating-point number) ذخیره می شوند که در حقیقت دنبال رو استاندارد بین المللی IEEE 754 می باشد. در این نوع قالب دهی یا فرمت اعداد در 64 بیت ذخیره می گردند، به گونه ای که کسر (fraction) در بیت های 0 تا 51، نما یا توان (exponent) در بیت های 52 تا 62 و علامت (sign) در بیت 63 ذخیره می گردد.

​

دقت اعشار (precision)

اعداد صحیح integer در حداکثر 15 رقم و همیشه به صورت دقیق مطرح می شوند.

 

مثال:

 

نمونه یک

function myFunction() {

var x = 999999999999999;

var y = 9999999999999999;

document.getElementById("demo").innerHTML = x + "
" + y;

}

حداکثر تعداد اعشار، 17 رقم است، اما حساب ممیز شناور همیشه 100% دقیق نیست.

 

نمونه دو

function myFunction() {

var x = 0.2 + 0.1;

document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;

}

به منظور حل مشکل بالا، انجام عمل ضرب و تقسیم کمک زیادی می کند.

مثال:

 

نمونه سه

function myFunction() {

var x = (0.2 * 10 + 0.1 * 10) / 10;

document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;

}

 

آموزش طراحی سایت : اعداد شانزده شانزدهی (hexadecimal)

جاوا اسکریپت ثابت های عددی (اعداد ثابتی) را که با 0x شروع می شوند به عنوان اعداد در مبنای شانزده در نظر می گیرد (تفسیر می کند).

مثال:

 

نمونه چهار

function myFunction() {

document.getElementById("demo").innerHTML = "0xFF = " + 0xFF;

}

توجه:

هیچگاه یک عدد را با صفر مقدم ننویسید (مانند این مثال 07(.

بعضی از ویرایش های جاوا اسکریپت یک عدد را در صورتی که با صفر مقدم نوشته شوند، به صورت octal / هشت هشتی تفسیر می کند. به صورت پیش فرض، جاوا اسکریپت اعداد را به صورت اعشاری و در مبنای 10 نمایش می دهد، اما شما می توانید با استفاده از تابع toString() اعداد را به صورت مبنای 16، مبنای 8 یا مبنای 2 (دودئی) (به عنوان خروجی) نمایش دهید.

مثال:

 

نمونه پنج

function myFunction() {

var myNumber = 128;

document.getElementById("demo").innerHTML = "128 = " +

myNumber + " Decimal, " +

myNumber.toString(16) + " Hexadecimal, " +

myNumber.toString(8) + " Octal, " +

myNumber.toString(2) + " Binary."

}

 

Infinity (مقدار بی نهایت)

چنانچه عددی را که بزرگتر از بیشینه ی حد ممکن اعداد در جاوا اسکریپت است محاسبه کنید، مقدار infinity برگردانده می شود.

مثال:

 

نمونه شش

function myFunction() {

var myNumber = 2;

var txt = "";

while (myNumber != Infinity) {

myNumber = myNumber * myNumber;

txt = txt + myNumber + "
";

}

document.getElementById("demo").innerHTML = txt;

}

در صورت تقسیم عددی بر 0 نیز مقدار بی نهایت برگردانده می شود.

مثال:

 

نمونه هفت

function myFunction() {

var x = 2 / 0;

var y = -2 / 0;

document.getElementById("demo").innerHTML = x + "
" + y;

}

توضیح : infinity یک عدد است : typeOf infinity یک عدد برمی گرداند.

مثال:

 

نمونه هشت

function myFunction() {

document.getElementById("demo").innerHTML = typeof Infinity;

}

عبارت NaN- عبارت رزرو شده ی Not a Number

عبارت NaN یک کلمه ی رزرو شده (reserved word) است که بیان می کند یک مقدار از نوع عدد نیست. چنانچه سعی کنید با رشته ی غیر عددی عملیات محسابه ی انجام دهید، جاوا اسکریپت عبارت رزرو شده ی Not a Number را بر می گرداند.

 

نمونه نه

document.getElementById("demo").innerHTML = 100 / "Apple"

اما چنانچه رشته دربردارنده ی یک مقدار عددی باشد، نتیجه نیز یک عدد خواهد بود.

مثال:

 

نمونه ده

document.getElementById("demo").innerHTML = 100 / "10";

می توانید از تابع سراسری (global function) isNaN() برای کشف این مسئله که آیا مقدار یک عدد است یا خیر استفاده کنید.

مثال:

 

نمونه یازده

var x = 100 / "Apple";

document.getElementById("demo").innerHTML = isNaN(x);

اگر در محاسبات ریاضی از NaN استفاده کنید، نتیجه نیز NaN خواهد بود.

مثال:

 

نمونه دوازده

var x = NaN;

var y = 5;

document.getElementById("demo").innerHTML = x + y;

 

نمونه سیزده

var x = NaN;

var y = "5";

document.getElementById("demo").innerHTML = x + y;

دستور NaN یک عدد است : typeOf NaN عدد بازمی گرداند.

مثال:

 

نمونه چهارده

document.getElementById("demo").innerHTML = typeof NaN;

اعداد می توانند شی باشند. به طور معمول اعداد مقادیر اولیه ی هستند که از literal ها ایجاد می گردند.

var x = 123‎

اما اعداد را می توان با استفاده از کلیدواژه ی new به عنوان شی (object) تعریف کرد، بدین ترتیب

var y = new Number(123)‎

مثال:

 

نمونه پانزده

document.getElementById("demo").innerHTML = typeof x + "
" + typeof y;

از ایجاد شی number خودداری کنید، زیرا که سرعت اجرا را کاهش داده و عوارض جانبی فراوانی را منجر می شوند. عملگر == برای اعدادی بکار می رود که از لحاظ مقدار برابر باشند.

مثال:

 

نمونه شانزده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x == y);

توجه داشته باشید که در صورت استفاده از عملگر === دیگر اعداد با مقدار یکسان مساوی یا برابر محسوب نمی شوند زیرا که این عملگر انتظار دارد اعداد هم از نظر نوع و هم از نظر مقدار با هم برابر باشند.

 

نمونه هفده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x === y);

بخاطر داشته باشید که مقایسه ی اشی با هم امکان پذیر نمی باشد.

مثال:

 

نمونه هجده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x === y);

 

خواص (properties) و متدهای مربوط به اعداد در جاوا اسکریپت

مقادیر اولیه ی مثل 3.14 یا 2014، نمی توانند متد یا خاصیت داشته باشند (زیرا که در اصل این ها شی نیستند که بتوانند خاصیت یا متد داشته باشند). اما در رابطه با جاوا اسکریپت این امر صادق نیست. به این خاطر که زبان بیان شده هنگام اجرای متدها و خصوصیت ها با مقادیر اولیه به مثابه ی شی برخورد می کند. از این رو مقادیر اولیه همچنان قادر هستند در زبان جاوا اسکریپت متد و خاصیت داشته باشند.

​

مثال:

 

نمونه نوزده

document.getElementById("demo").innerHTML = Number.MAX_VALUE;

خاصیت های مربوط به اعداد در جاوا اسکریپت متعلق به دبرگیرنده یا wrapper شی number هستند که خود Number نامیده می شوند. دسترسی به خاصیت های نام برده تنها از این طریق ممکن می باشد.

Number.MAX_VALUE‎

استفاده از myNumber.MAX_VALUE در جایی که myNumber یک متغیر، عبارت یا مقدار است، باعث برگردانده شدن undefined می شود.

مثال:

 

نمونه بیست

var x = 6;

document.getElementById("demo").innerHTML = x.MAX_VALUE;

آموزش طراحی سایت ادامه دارد

​