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

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

آموزش CSS

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

و اما دستوراتی که با آنها آشنا خواهیم شد دستوراتی هستند برای:

  • سایه دادن به المان ها
  • سبک دهی به متن
  • فونت ها

دو مطلب مهم و جذاب را هم خواهیم آموخت که عبارتند از:

  • Transform
  • Transition

همراه من باشید.

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

سایه دادن به المان ها در CSS3

در جلسه پنجم آموزش CSS (که بهتره مروری بر آن داشته باشید و بعد ادامه مطلب را مطالعه نمایید) دیدیم که با ویژگی text-shadow می توان به متن ها، سایه هایی جذاب داد. یادآوری داشته باشیم از این ویژگی:

ویژگی text-shadow

می دانیم که ویژگی text-shadow  چهار مقدار را دریافت می کند. مقدار اول سایه را در راستای محور x، مقدار دوم سایه را در راستای محور y جابجا می کند. مقدار سوم که مقداری اختیاری است میزان سختی و نرمی سایه را تعیین می کند و در نهایت مقدار چهارم، رنگ سایه را تعیین می کند.

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

خب حالا باید خدمت شما عزیزان عرض کنم که می توانیم به یک متن دو یا چند سایه مجزا بدهیم!!

سایه چندتایی

در مثال زیر به متن المان <h1>  دو سایه مجزا داده ایم:

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

همانطور که می بینید سایه ها با کاما از هم جدا شده اند.

box-shadow

علاوه بر متن ها می توان با استفاده از ویژگی box-shadow  به المان ها (مثلا یک دیو) سایه های دلخواهی داد.

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

حال می خواهم ویژگی هایی از CSS3 را معرفی کنم که با استفاده از آن ها می توان به متن ها سبک دهی کرد:

سبک دهی به متن ها در CSS3

برای سبک دهی به متن ها سه ویژگی زیر به CSS3 افزوده شده است:

  • text-overflow
  • word-wrap
  • word-break

خب ببینیم که کاربرد این ویژگی ها چیست؟

text-overflow

این ویژگی برای کنترل متن های اضافه ای است که درون المان جا نمی گیرد. متن سرریز شده می تواند به صورت clipped  یا ellipsis  باشد. تفاوت این دو را در مثال زیر می بینیم:

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

word-wrap

در بعضی متنها لغاتی داریم که طولانی هستند. این لغات وقتی که درون عنصری با طول و عرض ثابت قرار می گیرند ممکن است که از محدوده آن خارج شوند. در CSS3 ویژگی word-wrap  برای جلوگیری از این مشکل استفاده می شود. این ویژگی لغاتی را که طولانی هستند، از قسمت مناسب جدا کرده و ادامه حروف لغت را به خط بعدی می برد:

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

ویژگی word-break

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

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

تفاوت بین word-break  و word-wrap  در چیست؟

دوستان عزیز می توانید پاسخ این سوال را در قسمت نظرات برای ما ارسال نمایید.

حال ببینیم که فونت ها را چگونه می توان سبک دهی کرد؟

فونت در CSS3

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

برای  این کار از قاعده @font-face  استفاده می کنیم. اما قبل از آشنایی با نحوه کار این قاعده، ببینیم که چه قالب هایی برای وب فونت ها داریم؟

وب فونتها فرمت های مختلفی دارند که عبارتند از:

  • TrueType Fonts (TTF): این قالب در سال 1980 توسط اپل و ماکروسافت طراحی شده و در همه مرورگرها پشتیبانی می شود.
  • OpenType Fonts (OTF): در واقع openType قالبیست برای فونت های با قابلیت تغییر اندازه و امروزه در اکثر پلتفرم های کامپیوتری استفاده می شود.
  • Web Open Font Format (WOFF): این قالب فونت نیز در صفحات وب استفاده می شود و W3C نیز بر استفاده از آن شدیدا تاکید کرده است. چرا که این فونت در پهنای باند محدود کاربران نیز، قابل پخش بر روی سیستم آن ها می باشد.
  • SVG Fonts/Shapes: این قالب برای مرورگرهای سافاری، کروم و اپرا طراحی شده است.

حال ببینیم که چگونه می توان از قاعده @font-face  استفاده کرد؟

در مرحله اول بهتره که پوشه ای را برای فونت ها ایجاد کنیم. حال فایل فونت را در این پوشه قرار می دهیم.

حالا در فایل کدهای CSS دستور @font-face  را می نویسیم و درون کروشه، ویژگی font-family  را می نویسیم و به آن …

به این دستور چه مقداری می دهیم؟ شاید پاسخ دور از ذهن باشد. اما پاسخ این است که یک نام کاملا دلخواه برای فونتمان انتخاب می کنیم. مثلا myFont.

در مرحله بعد باید چکار کنیم؟

آفرین، باید آدرس فونت را تعیین کنیم و همانطور که مستحضرید (!) برای تعیین آدرس از ویژگی src  استفاده می کنیم.

خب، بنظرتون کار تمام شد؟ نه، در مرحله آخر، فونت المان دلخواه را با استفاده از ویژگی font-face  تعیین می کنیم. مقدار font-face  در اینجا چیست؟ لطفا کمی فکر کنید …

درود بر شما، بله، همان نام دلخواه (که در گفتیم مثلا myFont) می باشد.

در مثال زیر من فایل فونت را در پوشه font-face  و با نام iran-sans.woof  ذخیره دارم. حال این فونت را به یک المان، مثلا یک دیو اعمال می کنم:

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

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

Transform در CSS3

Transform (تغییر شکل) به شما این اجازه را می دهد که شکل عناصر صفحه وب را تغییر دهید!!

با استفاده از این ویژگی CSS3 می توانیم هر المانی را دوران دهیم، مورب کنیم، کوچک یا بزرگ کنیم و یا حتی مکان آن را نیز تغییر دهیم. عناصر را در دو بعد یا سه بعدی می توان اغییر داد. بیایید با هم جزئیات بیشتر این ویژگی را بررسی کنیم:

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

Transform دو بعدی

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

  • translate
  • rotate
  • scale
  • skewX
  • skewY
  • matrix

خب درا دامه این متد ها را بررسی می کنیم. ابتدا ببینیم که متد translate  چه تغییری را بر روی المان اعمال می کند:

متد translate

گفتیم که می توانیم مکان المان ها را تغییر دهیم که این کار را با متد translate انجام می دهیم. در واقع این متد المان ها را در راستای محور x و y (نسبت به مکان اولیه آن) جابجا می کند و الگوی استفاده از آن به صورت زیر است:

یعنی پارامتر اول در راستای محور x و پارامتر دوم المان را در راستای محور y جابجا می کند.

اگر گوشه بالا سمت چپ مرورگر را مبدا در نظر بگیریم، جهت مثبت محور x از مبدا تا لبه سمت راست مرورگر و جهت مثبت  محور y از مبدا به سمت لبه پایین مرورگر خواهد بود.

در مثال زیر دیو را 120 پیکسل در جهت محور X و 35 پیکسل در جهت محور Y تغییر مکان می دهیم.

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

در نهایت جابجایی جزء در عکس زیر نمایش داده شده است:

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

متد rotate

این متد برای دوران دادن عناصر به کار می رود. مقادیر مثبت (با واحد درجه deg) دوران در جهت عقربه های ساعت و مقادیر منفی در خلاف جهت عقربه های ساعت عنصر را دوران می دهند.:

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

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

متد scale

این متد سایز و اندازه المان را افزایش یا کاهش می دهد. اگر دیو اصلی به صورت زیر باشد:

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

برای بزرگ کردن آن داریم:

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

و سبک های زیر المان دیو را کوچک خواهند کرد:

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

متد skew

این متد عنصر را در راستای محور x (skewX)  و محور y (skewY) و یا هر دو محور ( skew ) مورب می کند.

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

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

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

در متد skew()  اگر عدد دوم نوشته نشود، عنصر فقط در راستای محور x ها مورب می شود.

حالا ممکنه بپرسید آیا می توان این متد ها را با هم ترکیب کرد؟

بله دوستان. برای این کار (یعنی ترکیب تمام متدهای تغییر شکل المان) از متد زیر استفاده می کنیم:

متد matrix

این متد تمام متدهای تغییر شکل دو بعدی عناصر را با هم ترکیب می کند. چگونه به آن مقدار بدهیم؟

مطابق الگوی زیر:

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

Transform سه بعدی

در CSS3 امکان تغییرات در راستای هر سه محور X و Y و Z وجود دارد. تمام متدهایی که برای transform دو بعدی معرفی شد، در transform سه بعدی نیز کاربرد دارند. یعنی برای تغییر شکل سه بعدی عناصر متد های زیر را داریم:

  • translate3d(x,y,z) : در راستای محور translateX(x)  و در راستای محور translateY(y)  و در راستای محور translateZ(z)
  • scale3d(x,y,z) : در راستای محور scaleX(x)  و در راستای محور scaleY(y)  و در راستای محور scaleZ(z)
  • rotate3d(x,y,z,angle) : در راستای محور rotateX(angle)  و در راستای محور rotateY(angle)  و در راستای محور rotateZ(angle)

از متد های بالا، متد rotate  را بررسی می کنیم.

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

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

در rotate3d(x,y,z,angle)  مقادیر x و y و z را می توانیم 1 یا 0 یا -1 بدهیم. فرضا اگر بخواهیم عنصر مورد نظر در راستای محور X مقدار 75 درجه و در خلاف جهت عقربه های ساعت بچرخد، مقدار x را -1 انتخاب می کنیم. اگر نخواهیم در راستای محوری بچرخد، مقدار را 0 می دهیم.

در مثال بالا دیو را -75 درجه در راستای محور X ، و 75 درجه در راستای محور Z (محور Z عمود بر صفحه رو به بیرون است) دوران داده ایم. همچنین در راستای محور Y دورانی صورت نگرفته است.

در آخرین مبحث این جلسه transition که از دیگر ویژگی های جالب CSS3 می باشد، را برای شما همراهان گرامی سایت سازان شرح می دهم:

Transitions در CSS3

Transition (انتقال، تغییر حالت) این امکان را فراهم آورده است که طی یک مدت زمان مشخص مقدار یک ویژگی را به مقدار دیگری تغییر دهیم. مثلا از طریق این ویژگی می توانیم اندازه عرض یک دیو را از 100 پیکسل به 150 پیکسل در مدت 0.3 ثانیه تغییر دهیم.

در کل برای استفاده از ویژگی transition دو مورد را باید تعیین کنیم:

  • ویژگی را که می خواهم تغییر دهیم. (مثلا width یا height و …)
  • مدت زمانی را که می خواهیم این تغییر صورت گیرد. (مقدار زمانی پیش فرض 0 ثانیه می باشد. پس اگر زمان تنظیم نشود، تغییری روی نمی دهد.)

خب این دو مورد را با دو ویژگی transition-property  (مورد اول) و transition-duration  (مورد دوم) تعیین می کنیم که گفتیم تا حد امکان کد ها را خلاصه باید بنویسیم. بنابراین این دو ویژگی را ترکیب می کنیم و از ویژگی transition استفاده می کنیم و به آن دو مقدار می دهیم. مقدار اول ویژگی که باید تغییر یابد و مقدار دوم مدت زمان تغییر را تعیین می کند.

در مثال زیر عرض دیو را از 100 به 500 پیکسل در مدت 5 ثانیه تغییر می دهیم. این تغییر زمانی شروع می شود که نشانگر موس روی دیو قرار بگیرد و وقتی نشانگر برداشته شود، بعد از 5 ثانیه به حالت اولیه بر می گردد:

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

در مثال بالا دستور transition: width 5s;  را می توان در :hover  نیز نوشت.

در مثال زیر طول و عرض را همزمان با هم و با مدت زمانی مختلف تغییر می دهیم:

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

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

خدمت شما دوستان عزیز عرض شود که تغییرات المان ها تحت یک منحنی سرعت صورت می پذیرد که ویژگی transition-timing-function  این منحنی را تعیین می کند. این ویژگی 5 مقدار زیر را می تواند بگیرد:

  • ease : این مقدار که مقدار پیش فرض می باشد، تغییرات را با سرعت کم آغاز می کند. سپس سرعت را افزایش می دهد و در نهایت تغییرات را با سرعت کم به اتمام می رساند.
  • linear : این مقدار سرعت تغییرات المان ها را از آغاز تا پایان ثابت نگه می دارد.
  • ease-in : سرعت تغییر را فقط در شروع تغییر کم می کند.
  • ease-out : سرعت تغییر را در پایان تغییر کم می کند.
  • ease-in-out : سرعت تغییر را در شروع و پایان کم می کند.

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

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

تاخیر زمانی در transition

transition-delay  برای تنظیم تاخیر زمانی در شروع تغییر است. مثلا اگر مقدار 1 ثانیه را به آن بدهیم، تغییرات بعد از 1 ثانیه شروع خواهند شد:

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

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

ترکیب transition و transformation

در مثال زیر ترکیب transition  و transformation  را با هم می بینیم. این دو ویژگی را می توان برای هر عنصری به کار برد و هر گونه تغییرات را بر روی آنها ایجاد کرد.

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

مثال دیگر:

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

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

دوستان عزیز و همراهان همیشگی سایت سازان، امیدوارم که مطالب آموزش CSS – بخش یازدهم نیز برای شما مفید واقع شده باشد.

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

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

پیروز و سربلند باشید.

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