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

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

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

دوستان عزیزم سلام؛ امروز هم با شما دوستان گرامی هستم با آموزش CSS – بخش دهم.

در جلسات گذشته با دستورات و ویژگی های مهم CSS آشنا شدیم که این دستورات در تمام نسخه های CSS به کار برده می  شوند. زبان CSS هم پا به پای دیگر زبان در حال پیشرفت می باشد و همانطور که می دانید آخرین نسخه این زبان، CSS3 می  باشد که بخش ها و ماژول هایی به آن افزوده شده است.

خب عزیزان، جلسه دهم تا سیزدهم این سری از آموزش CSS را به بررسی دستورات و ویژگی های CSS3 اختصاص داده ایم که به طبع جذابیت مطالب این جلسات بیشتر خواهد بود. پس با من همراه باشید. در پایان این سری آموزشی با مهم ترین دستوراتی که می  توان با آنها المان را به زیبا ترین شکل ممکن سبک دهی کرد، آشنا خواهیم شد.

سر فصل های این جلسه عبارتند از:

  • گرد کردن حاشیه ها
  • قرار دادن یک عکس برای حاشیه
  • بررسی زمینه المان ها
  • گرادیان

حاشیه ها را در جلسه سوم آموزش CSS بررسی کردیم. در این جلسه می خواهیم با دستوراتی آشنا شویم تا بتوانیم حاشیه ای گرد را برای المان ها قرار دهیم.

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

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

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

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

برای بیضوی کردن حاشیه ها، 2 مقدار به ویژگی border-radius  می دهیم و با اسلش این مقادیر را از هم جدا می کنیم. همچنین می توانیم مقدار را به % تنظیم کنیم. به مثال زیر توجه کنید:

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

در بعضی مواقع با کد ها نمی توانیم حاشیه دلخواهمان را برای المان ها تنظیم کنیم. در این مواقع باید یک عکس را برای حاشیه قرار دهیم. خب بیایید ببینیم که چگونه می توانیم این کار را انجام دهیم؟

قرار دادن یک عکس برای حاشیه

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

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

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

در ابتدا و قبل ار هر چیز باید ویژگی border  را برای عنصر مورد نظر تنظیم کنیم که اگر این کار را انجام ندهیم، ویژگی border-image  اثر نمی کند.

حالا برای تنظیمات عکس حاشیه ویژگی های زیر را داریم:

  • border-image-source : برای تعیین آدرس عکس حاشیه و با استفاده از مقدار url()
  • border-image-slice : این ویژگی مقداری عددی بدون واحد (یا با واحد درصد) می گیرد. اگر مقدار را بدون واحد تنظیم کنید، مقدار پیش فرض پیکسل خواهد بود. فرض کنید به این ویژگی مقدار 10 را می دهید. بدین ترتیب مرورگر از گوشه های عکس شروع می کند و 10 پیکسل پیش می رود و برش 10 پیکسلی گوشه های عکس را در گوشه های عنصر قرار می دهد. می توانید به این ویژگی هم 4 مقدار بدهید. یعنی مقادیر پیکسلی متفاوتی را از گوشه های عکس جدا کنید. اگر مقدار مثلا 10% بدهید، مرورگر از هر گوشه ی عکس به میزان 10 درصد از طول و ارتفاع عکس را جدا می کند.
  • border-image-width : این ویژگی برای تعیین اندازه عرض عکس حاشیه است.
  • border-image-outset : فاصله خارجی عناصر دیگر از عکس حاشیه را تعیین می کند.
  • border-image-repeat : کشش یا تکرار قسمت میانی عکس (قسمت های زرد و آبی) را تعیین می کند. مقدار round  قسمت میانی را با توجه به عرض یا ارتفاع المان به تکه های مساوی تقسیم می کند و حاشیه را پر می کند (با توجه به عرض عنصر ممکن است که مثلا 10 یا 15 تکه از قسمت میانی عکس حاشیه نیاز باشد تا حاشیه میانی المان با تکه های مساوی قسمت زرد یا آبی رنگ عکس حاشیه پر شود). مقدار stretch  قسمت های زرد یا آبی را تقسیم نمی کند و همان ها را در عرض و ارتفاع المان امتداد می دهد. و مقدار repeat  تا زمانی که حاشیه پر شود، قسمت میانی عکس حاشیه را تکرار می کند.

نترسید! با بررسی یک مثال موضوع را به طور کامل متوجه خواهید شد.

همانطور که گفتیم ابتدا باید ویژگی border  را تنظیم کنیم. از این طریق می توان عرض حاشیه را تنظیم کرد. بنابراین از ویژگی border-image-width  استفاده نمی کنیم.

همچنین outset  را هم می توان برای عنصر مورد نظر تنظیم کرد و این ویژگی را برای عکس حاشیه تنظیم نمی کنیم. حال سه مقدار source  و slice  و repeat  را به صورت خلاصه می نویسیم. بنابراین ویژگی border-image  سه مقدار را دریافت می کند که مقدار اول url  عکس، مقدار دوم slice  و مقدار سوم repeat  را تعیین خواهد کرد:

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

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

با توجه به دستور نوشته شده برای پاراگراف دوم، مرورگر به میزان 20 پیکسل (چون اندازه قسمت فیروزه ای 20 پیکسل است) از گوشه های عکس را جدا می کند و در گوشه المان قرار می دهد. همانطور که می بینید، قسمت میانی حاشیه های بالا و پایین با تعداد 11 برش از بخش زرد رنگ عکس پر شده است.

خب دوستان حاشیه های پاراگراف های اول و سوم را به عنوان تمرین بررسی کنید.

خب حالا می خواهیم با چند دستور برای سبک دهی به زمینه المان ها آشنا شویم که بهتره مروری بر جلسه دوم آموزش CSS داشته باشید.

بررسی زمینه المان ها

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

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

این امکان در CSS3 به وجود آمده است که چند عکس را برای زمینه قرار دهیم. همانطور که می دانید ویژگی background-image  عکس زمینه المان ها را تعیین می کند. وقتی می خواهیم از چند عکس برای زمینه استفاده کنیم، با استفاده از url آدرس این عکس ها را می نویسیم و در ادامه می توان ویژگی های background-position  و background-repeat  را برای هر عکس تنظیم کرد که چگونگی انجام این کار را در مثال زیر می بینید.

در مثال زیر عکس img01 را در بالا سمت چپ و عکس img02 را در پایین سمت راست قرار داده ام:

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

تنظیمات بالا را می توان خلاصه نویسی کرد:

یک موضوع مهم دیگه این است که در CSS3 می توانیم بدون تغییر اندازه واقعی عکس، طول و عرض آن را کنترل کنیم.

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

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

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

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

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

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

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

خب حالا می خواهیم برای کل صفحه وب، یک عکس را برای زمینه قرار دهیم. چه الزاماتی داریم؟

  • این عکس تمام صفحه را پوشش دهد و فاصله خالی ایجاد نکند.
  • متناسب با اندازه مرورگر کوچک و بزرگ شود.
  • در وسط صفحه قرار گیرد.
  • اسکرول بار ایجاد نکند.

در مثال زیر این کار را انجام می دهیم:

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

همانطور که مشاهده می کنید، انتخاب کننده ما المان html است. یعنی کل body انتخاب شده است و به آن سبک دهی شده است.

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

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

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

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

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

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

گرادیان در CSS3

در بعضی مواقع نیاز داریم که برای جذابیت بیشتر، زمینه و یا حاشیه المان ها را با چند رنگ (مثل رنگین کمان) رنگ آمیزی کنیم. یعنی از یک رنگ شروع کنیم و به آرامی رنگ زمینه را به رنگ دیگری تغییر دهیم.

در گذشته برای این کار مجبور بودیم که از چند عکس استفاده کنیم تا رنگ زمینه دلخواه را بسازیم و همانطور که می دانید استفاده بیش از حد از عکس، سرعت بارگذاری سایت را کاهش می دهد.

برای رفع این مشکل گرادیان (gradient) در CSS3 به وجود آمد که با استفاده از آن می توان به صورت دلخواه المان ها را رنگ آمیزی کرد.

یکی از مزیت های مهم گرادیان این است که با زوم کردن بر روی المان ها، تغییری در کیفیت رنگ ایجاد نمی شود چرا که این رنگ ها توسط مرورگر ایجاد می شوند.

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

گرادیان خطی

گرادیان خطی یعنی اینکه در امتداد یک خط (با هر عرضی) از یک رنگ شروع می کنیم و در امتداد این خط به آرامی تغییر رنگ می دهیم. خب چگونه این کار را انجام دهیم؟

برای گرادیان خطی حداقل به دو رنگ نیاز داریم. که از رنگ اولی شروع می کنیم و به آرامی به رنگ دوم تغییر رنگ می دهیم.

خب فرض کنید زمینه یک المان را می خواهیم رنگ آمیزی کنیم. پس باید ویژگی background  را برای المان مورد نظر تنظیم کنیم. به چه صورت؟

در مرحله اول نوع گرادیان را تعیین می کنیم. در اینجا گرادایان خطی می خواهیم یعنی linear-gradient()  و باید چند مقدار را به گرادیان خطی بدهیم:

در اولین مقدار باید تعیین کنیم که گرادیان در چه جهتی باشد؟ از راست به چپ یا از چپ به راست؟

دومین مقدار رنگ آغازین را تعیین می کند و سومین مقدار رنگ نهایی. توجه کنید که می توانیم هر تعداد رنگ داشته باشیم.

پس در حالت کلی دستور زیر را برای المان مورد نظر می نویسیم:

جهت پیش فرض از بالا به پایین می باشد.

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

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

در مثال دیدم که در دیو سوم رنگ آمیزی زمینه از گوشه بالای سمت چپ شروع و به گوشه پایین سمت راست ختم شد. خب شاید بپرسید گرادیان می تواند با زاویه دلخواه باشد؟ پس ادامه مطلب را مطالعه کنید:

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

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

مثال زیر را با دقت بررسی کنید:

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

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

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

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

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

در CSS3 تابع repeating-linear-gradient()  برای تکرار گرادیان خطی استفاده می شود. مفهوم این جمله را با بررسی مثال زیر خواهید یافت:

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

حالا نوع دوم گرادیان یعنی گرادیان شعاعی را بررسی می کنیم.

گرادیان شعاعی

در این نوع گرادیان مسیر تغییر رنگ ها شعاعی است. یعنی رنگ اول در مرکز عنصر قرار می گیرد و رنگ های دیگر، دایره وار در اطراف آن قرار می گیرند.

برای گرادیان شعاعی می توان دو شکل بیضوی (ellipse که پیش فرض است) و دایره ای  (circle) را تنظیم کرد و ساختار دستور آن به صورت می باشد:

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

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

به صورت پیش فرض اندازه گرادیان از مرکز المان می باشد تا دورترین گوشه. یعنی مرکز المان تا گوشه آن 100% می باشد. در مثال بالا به دیو سوم توجه کنید:

میزان پخش شدگی رنگ سبز از 0% یعنی مرکز تا 10 درصد شعاع، میزان پخش شدگی رنگ زرد از 10 تا 90 درصد می باشد که مرکز آن در 30 درصد شعاع قراردارد. (یعنی در 30% شعاع، رنگ زرد بیشترین شدت را داراست.) و از 90 درصد تا 100 درصد نیز با رنگ آبی، رنگ آمیزی می شود.

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

پارامتر های اندازه

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

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

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

حالا ساختار گرادیان به صورت زیر خواهد بود:

اگر به ساختار بالا توجه کنید می بینید که می توانیم مرکز گرادیان را نیز تغییر دهیم.

کلمه کلیدی پیش فرض farthest-corner  و مرکز گرادیان در مرکز المان یعنی 50% و 50% است.

مثال زیر را با هم می بینیم:

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

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

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

دوستان عزیزم آموزش CSS – بخش دهم را هم در اینجا به پایان میرسانم و امیدوارم که از مطالب این جلسه نیز لذت برده باشید. منتظر نظرات و پیشنهادات شما عزیزان هستم.

در جلسه یازدهم آموزش CSS با دیگر ماژول های مهم در CSS3 آشنا خواهیم شد. همراه ما باشید.

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