طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش CSS – بخش دهم

آموزش CSS – بخش دهم

در این قسمت آموزش بررسی ویژگی ها و ماژولهای اضافه شده به CSS3 را شروع میکنیم.

مهمترین ماژولهای CSS عبارتند از:

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Image Values and Replaced Content
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

تمام ماژول‌هایی که در ورژنهای قبلی به وجود آمده بودند بررسی شدند. در ادامه‌ی آموزش‌ها به بررسی ماژولهای جدید می‌پردازیم.

حاشیه‌های گرد، عکس‌های حاشیه و گرادیان بخش‌هایی هستند که در این قسمت آموزش داده خواهند شد.

نکته : چون مرورگرهای مختلف ممکن است بعضی از پراپرتی را پشتیبانی نکنند، باید همراه با پراپرتی ها پیشوند هایی بنویسیم تا آن پراپرتی ها در مرورگرها به درستی عمل کنند. برای مرورگرهای کروم و سافاری webkit- و برای مرورگر فایر فاکس moz- و برای اپرا o- را به عنوان پیشوند دستورات استفاده می‌کنیم.

گرد کردن گوشه حاشیه‌ها

با پراپرتی border-radius آشنا هستیم و میدانیم که برای گرد کردن گوشه حاشیه هاست. با این پراپرتی میتوان هر 4 گوشه را گرد کرد. 1 تا 4 مقدار میتوانیم به این پراپرتی بدهیم:

1) یک مقدار: هر 4 حاشه را گرد میکند.

2) دو مقدار: مقدار اول حاشیه بالا چپ و مقدار دوم بالا راست را گرد میکند.

3) 3 مقدار: مقدار اول بالا چپ، مقدار دوم بالا راست و پایین چپ و مقدار سوم پایین راست را گرد میکند

4) چهار مقدار: مقدار اول بالا چپ، مقدار دوم بالا راست، مقدار سوم پایین راست و مقدار چهارم پایین چپ را گرد میکند.

درواقع پراپرتی border-radius کوتاه شده 4 پراپرتی: border-top-left-radius، border-top-right-radius، border-bottom-right-radius و border-bottom-left-radius است.

برای بیضوی کردن حاشیه ها، 2 مقدار به پراپرتی میدهیم و با اسلش این مقادیر را از هم جدا میکنیم. همچنین میتوانیم مقدار را به % سِت کنیم.

[us_single_image image=”11685″ align=”center”]

استفاده از عکس برای حاشیه

در CSS3 پراپرتی border-image برای سِت کردن یک عکس به عنوان حاشیه اجزاء ایجاد شده است. میخواهیم عکس زیر را که 100*100 پیکسل است را برای حاشیه دایو قرار دهیم.

[us_single_image image=”11686″ align=”center”]

طول هر قسمت فیروزه ای رنگ 20 پیکسل، آبی ها و زردها هم هر کدام 60 پیکسل هستند.

برای این کار ابتدا برای جزئمان پراپرتی border را سِت میکنیم. ( اگر حاشیه را سِت نکنید border-image عمل نمیکند. ). حال برای تنظیمات عکس حاشیه پراپرتی های زیر را داریم:

1) border-image-source: برای تعیین آدرس عکس حاشیه و با استفاده از مقدار url()

2) border-image-slice: این پراپرتی مقداری عددی بدون واحد ( یا با واحد درصد ) میگیرد. اگر مقدار را بدون واحد سِت کنید، مقدار پیشفرض پیکسل است. فرض کنید به این پراپرتی مقدار 10 را میدهید. بدین ترتیب مرورگر از گوشه های عکس شروع میکند و 10 پیکسل پیش میرود و برش 10 پیکسلی گوشه های عکس را در گوشه های جزء قرار میدهد. میتوانید به این پراپرتی هم 4 مقدار بدهید. یعنی مقادیر پیکسلی متفاوتی را از گوشه های عکس جدا کنید. اگر مقدار مثلا 10% بدهید، مرورگر از هر گوشه ی عکس به میزان 10 درصد از طول و ارتفاع عکس را جدا میکند.

3) border-image-width: این پراپرتی برای تعیین اندازه عرض عکس حاشیه است.

4) border-image-outset: فاصله خارجی اجزای دیگر از عکس حاشیه را تعیین میکند.

5) border-image-repeat: امتداد یا تکرار قسمت میانی عکس ( قسمت های زرد و آبی ) را تعیین میکند. مقدار round قسمت میانی را با توجه به عرض یا ارتفاع جزء به تکه های مساوی تقسیم میکند و حاشیه را پر میکند( با توجه به عرض جزء ممکن است که مثلا 10 یا 15 تکه از قسمت میانی عکس حاشیه نیاز باشد تا حاشیه میانی جزء با تکه های مساوی قسمت زرد یا آبی رنگ عکس حاشیه پر شود). مقدار stretch قسمت های زرد یا آبی را تقسیم نمیکند و همان ها را در عرض و ارتفاع جزء امتداد میدهد. و مقدار repeat تا زمانی که حاشیه پر شود، قسمت میانی عکس حاشیه را تکرار میکند.

همانطور که گفتیم ابتدا باید پراپرتی border را سِت کنیم. از این طریق میتوان عرض حاشیه را سِت کرد. بنابراین از پراپرتی border-image-width استفاده نمیکنیم. همچنین outset را هم میتوان برای جزء سِت کرد و این پراپرتی را برای عکس حاشیه تنظیم نمیکنیم. سه مقدار source و slice و repeat را با shorthand تنظیم میکنیم. مقدار اول url برای آدرس عکس، مقدار دوم slice و مقدار سوم repeat را تعیین خواهد کرد:

حال عکس بالا را به عنوان حاشیه استفاده میکنیم:

[us_single_image image=”11687″ align=”center”]

Background در CSS

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

استفاده از چند عکس برای زمینه اجزا

این امکان در CSS3 به وجود آمده است که چند عکس را برای زمینه قرار دهیم. همانطور که میدانید پراپرتی background-image عکس را در زمینه قرار میدهد. وقتی میخواهیم چند عکس را برای زمینه قرار دهیم، مقدار این پراپرتی را url(img.address) به هر تعداد دلخواه میدهیم و هر آدرس را با کاما از هم جدا میکنیم. در ادامه میتوان پراپرتی های background-position و background-repeat را سِت کرد که تنظیمات هر عکس با کاما از هم جدا میشود. در مثال زیر عکس img01 را در بالا سمت چپ و عکس img02 را در پایین سمت راست قرار داده ایم:

[us_single_image image=”11688″ align=”center”]

تنظیمات بالا را میتوان با shorthand و به صورت زیر نوشت:

تنظیم اندازه عکس زمینه

در ورژن های قبلی CSS نمیتوانستیم اندازه عکس زمینه را تغییر دهیم و برای تغییر اندازه عکس، باید اندازه واقعی عکس را با نرم افزار های ویرایش عکس تغییر میدادیم. پراپرتی background-size در CSS3 برای تنظیمات اندازه عکس زمینه در نظر گرفته شده است که مقادیری با واحد طول، درصد یا مقادیر contain و cover را میتواند بگیرد.

اگر مقدار عددی با واحد پیکسل یا درصد بدهید باید دو مقدار بدهیم. مقدار اول برای عرض و مقدار دوم برای ارتفاع. در مقادیر با واحد درصد، وقتی بخواهیم عکس تمام زمینه جزء را در بر بگیرد، باید اندازه ها 100% در 100% باشند.

حال فرض کنید که دایوی با اندازه 450*350  پیکسل داریم و پَدینگ این دایو 5 پیکسل است. اگر بخواهیم عکس تمام زمینه را پوشش دهد باید دو برابر پَدینگ را با طول و ارتفاع جزء جمع کنیم. یعنی به صورت زیر مقدار دهی میکنیم:

تفاوت بین مقادیر cover و contain بدین ترتیب است که مقدار cover عکس را متناسب با اندازه جزء بزرگ میکند. مقدار contain عکس را تا جایی که امکان داشته باشد بزرگ میکند. اندازه بزرگ نمایی با اندازه اولیه عکس و اندازه جزء متناسب است. به همین دلیل ممکن است بخشی از جزء را پوشش ندهد.

حال اگر مثلا 2 عکس داشته باشیم برای تنظیم اندازه همزمان عکسها، پراپرتی background-size 3 مقدار میگیرد. مقدار اول برای عرض عکس اول، مقدار دوم برای عرض عکس دوم و مقدار سوم auto خواهد بود تا اندازه ارتفاع را متناسب با عرض تغییر دهد.

تنظیم عکس زمینه سند HTML

برای قرار دادن یک عکس زمینه برای سند که تمام اندازه مرورگر را تماما پوشش دهد، ابتدا سند HTML را انتخاب میکنیم و پراپرتی background را برای آن سِت میکنیم. عکس زمینه باید در وسط قرار گیرد و مقدار fixed برای attachment داشت باشد. همچنین برای اینکه تمام صفحه پوشش داده شود و هیچ فاصله ای بین عکس و لبه به وجود نیاید، مقدار cover را برای پراپرتی background-size سِت میکنیم:

[us_single_image image=”11704″ align=”center”]

تنظیم مکان قرارگیری عکس زمینه

پراپرتی background-origin پراپرتی است که 3 مقدار میتواند بگیرد و مکان قرار گیری عکس زمینه را تعیین میکند.

  • border-box: این مقدار لبه عکس را در لبه ی بالا ست چپ حاشیه قرار میدهد.
  • padding-box: این مقدار که مقدار دیفالت است، عکس را در لبه ی بالا سمت چپ لبه ی پَدینگ قرار میدهد.
  • content-box: عکس زمینه از گوشه بالا سمت چپ محتوا شروع میشود.

وقتی که میخواهیم مکان رنگ آمیزی زمینه را تعیین کنیم هم همین مقادیر را برای پراپرتی background-clip استفاده میکنیم:

[us_single_image image=”11689″ align=”center”]

Gradient در CSS3

در بعضی مواقع نیاز داریم که برای جذابیت بیشتر رنگهای زمینه و یا حاشیه را با ترکیب چند رنگ ( مثل رنگین کمان ) طراحی کنیم. یعنی از یک رنگ شروع کنیم و به آرامی به رنگ دیگیری تغییر رنگ دهیم. در گذشته برای این کار مجبور بودیم که از چند عکس استفاده کنیم تا رنگ زمینه دلخواه را بسازیم و همانطور که میدانید استفاده بیش از حد از عکس، سرعت لود سایت را کاهش میدهد. برای رفع این مشکل gradient در CSS3 به وجود آمد که از طریق آن میتوان رنگ هر جزء را از یک رنگ آغاز کرده و با رنگ دلخواه دیگر ترکیب کنیم و این رنگ ها را در کنار هم قرار دهیم. مزیت مهم دیگری که گِرِیدیِنت دارد این است که با زوم کردن بر روی آن، تغییری در کیفیت ایجاد نمیشود چرا که این رنگها توسط مرورگر ایجاد میشود.

دو نوع گریدینت داریم که عبارتند از: گریدینت خطی و گریدینت شعاعی. در این بخش با این موارد آشنا خواهیم شد.

Gradient خطی در CSS3

گریدینت خطی یعنی اینکه در امتداد یک خط ( با هر عرضی ) تغییر رنگ را ایجاد کنیم. برای ایجاد این نوع گریدینت در صورتی که بخواهیم مثلا رنگ زمینه را تغییر دهیم مقدار پراپرتی background را بدین صورت مقدار دهی میکنیم: ابتدا نوع گریدینت باید تعیین شود. در ادامه جهت را تعیین میکنیم. یعنی با چه زاویه ای؟ از راست به چپ یا از چپ با راست؟ تغییر رنگ صورت گیرد. سپس مقدار color-stop را تعیین میکنیم. color-stop ها رنگهایی هستند که میخواهیم بین آنها به آرامی حرکت کنیم و تغییر رنگ دهیم. پس مقدار دهی به صورت زیر خواهد بود:

جهت پیشفرض، از بالا به پایین است و تعداد color-stop ها هر تعدادی میتواند باشد.

[us_single_image image=”11690″ align=”center”]

استفاده از زاویه برای تعیین جهت تغییر رنگ

علاوه بر استفاده از عبارات to left ، to right و … میتوان از زاویه با واحد deg برای تعیین جهت استفاده کرد. سنتکس به همان صورت خواهد بود و فقط بجای direction از زاویه استفاده میکنیم. این مقدار زاویه، زاویه بین محور افقی و محور گریدینت در جهت ساعتگرد است:

[us_single_image image=”11691″ align=”center”]

مقادیر رنگ را میتوان با نام، هگزا، rgb و rgba سِت کرد. در مثال زیر انواع کدها ی گریدینت برای پشتیبانی مرورگرهای مختلف را بررسی میکنیم:

[us_single_image image=”11692″ align=”center”]

تکرار خطوط گریدینت

در CSS3 تابع repeating-linear-gradient() برای ایجاد گریدینت تکراری ایجاد شده است.

[us_single_image image=”11693″ align=”center”]

Gradient شعاعی در CSS3

در گریدینت شعاعی مسیر تغییر رنگ ها شعاعی است. یعنی color-stop1 در مرکز جزء قرار میگیرد و color-stop های دیگر دایره وار در اطراف آن قرار میگیرند. برای گریدینت شعاعی میتوان دو شکل بیضوی ( ellipse که دیفالت است ) و دایره ای  ( circle ) را سِت کرد.

سینتکس این گریدینت به صورت زیر است:

background: radial-gradient(shape size at position, start-color, …, last-color);

در گریدینت شعاعی فاصله رنگها به صورت دیفالت برابر است. برای تغییر شعاع رنگها میتوان مقداری را با واحد درصد برای color-stop ها سِت کرد:

[us_single_image image=”11694″ align=”center”]

Size Keywords در گرادیان

با استفاده از چهار پارامتر زیر میتوان سایز گرادیان را تنظیم کرد:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

در پارامترهای بالا دو لغت side و corner داریم. منظور از side اضلاع جزء و منظور از corner زوایای قائمه ( گوشه ها ) اجزاست.

این پارامترها در قسمت اول مقادیر درون پرانتز نوشته میشود. مقدار دهی به صورت زیر است:

در کدهای بالا به مرورگر میگوییم که گرادیان شعاعی تا نزدیکترین ضلع ( closest-side ) ادامه داشته باشد. مرکز دایده هم در x و y باشد. برای تعیین مقادیر x و y گوشه چپ بالا را 0% و 0% در نظر میگیریم. مقدار x مرکز را در عرض جزء جابجا میکند و مقدار y مرکز دایره را در ارتفاع جزء جابجا میکند. برای 3 پارامتر دیگر نیز به همین صورت خواهد بود:

[us_single_image image=”11695″ align=”center”]

گرادیان شعاعی را میتوان با تابع repeating-radial-gradient() به شکل دایره هایی تکراری تبدیل کرد:

[us_single_image image=”11696″ align=”center”]

نوشته های مرتبط

دیدگاه ‏خود را بنویسید