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

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

آموزش CSS

در قسمت یازدهم آموزش CSS به بررسی سایه، متن، فونت در CSS3 میپردازیم.

Transform و Transition دو پراپرتی جدید هستند که در CSS3 اضافه شده اند. این قسمت شامل تشریح این پراپرتی ها نیز میشود.

تنظیمات سایه برای اجزا

در قسمت های قبل دیدیم که با پراپرتی text-shadow میتوان برای متنهای مختلف سایه هایی ایجاد کرد. در CSS3 این امکان نیز به وجود آمده است که برای هر جزء دلخواهی سایه دلخواه را سِت کنیم.

پراپرتی text-shadow

مقدار اول پراپرتی text-shadow سایه را در عرض و مقدار دوم سایه را در ارتفاع جزء جابجا میکند. برای رنگ حاشیه هم مقدار سومی را سِت میکنیم. برای تار کردن حاشیه، قبل از مقدار رنگ، مقدار عددی با واحد px سِت میکنیم. هرچه مقدار بیشتر باشد، حاشیه تارتر خواهد بود.

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

سایه چندتایی

میتوان دو یا چند سایه را نیز سِت کرد. در این صورت از کاما برای جدا کردن سایه ها استفاده میکنیم.

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

پراپرتی box-shadow

پراپرتی box-shadow برای اجزاء حاشیه را ایجاد میکند. عملکرد مقادیری که این پراپرتی میگیرد، دقیقا مانند مقادیری است که پراپرتی text-shadow میگرفت. در مثال نحوه استفاده از این پراپرتی را میبینیم:

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

تنظیمات متن در CSS3

در CSS3 پراپرتی های زیر برای کنترل بیشتر بر روی متنها به وجود امده اند که در این بخش به طور کامل بررسی میشوند.

  • Text-overflow
  • word-wrap
  • word-break

پراپرتی text-overflow

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

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

پراپرتی word-wrap

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

پراپرتی word-break

این پراپرتی برای تنظیمات لغات متناسب با عرض جزء است و معمولا در متنهای لاتین کاربرد دارد:

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

تنظیمات فونت در CSS3

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

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

  • (TrueT Fonts (TTF: این فرمت در سال 1980 توسط اپل و ماکروسافت طراحی شده و در همه مرورگرها پشتیبانی میشود.
  • (OpenType Fonts (OTF: این فونت هم که در تمام مرورگرها پشتیبانی میشود برای کامپیوتر های با قابلیت تغییر فونت طراحی شده است. امروزه بیشتر پلتفرمهای کامپیوتری از این فرمت فونت استفاده میکنند.
  • (Web Open Font Format (WOFF: این فرمت برای استفاده در صفحات وب ایجاد شده است و توصیه شده W3C میباشد. ورژن پیشرفته تر این فرمت WOFF 2.0 است.
  • SVG Fonts/Shapes: این دسته برای مرورگرهای سافاری، کروم و اپرا طراحی شده است.
  • EOT: این فرمت فقط مناسب مرورگر اینترنت اکسپلورر 6 به بعد است.

 نحوه استفاده از فونت دلخواه

وب فونتی را که میخواهیم در طراحی استفاده کنیم را درون فایل فونتها قرار میدهیم. گفتیم که فونت دلخواه را با قاعده @font-face تعریف میکنیم. در دستورات CSS این قاعده را مینویسیم و در ادامه پراپرتی font-family برای تعیین نام دلخواه برای فونت و src را برای آدرس دهی فونت را سِت میکنیم. در ادامه میتوان برای هر جزء یا تمام سند HTML ، مقدار پراپرتی font-family را همان نامی را که در @font-face تعیین کرده را به کار ببریم:

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

Transform در CSS3

Transform ( تغییر شکل، تبدیل ) به شما این اجازه را میدهد که اجزا را جابجا، دوران، تغییر اندازه و مورب کنید. یعنی میتوان شکل، اندازه و مکان اجزا را تغییر داد. در CSS3 دو نوع Transform دو بعدی و سه بعدی پشتیبانی میشود.

Transform دو بعدی

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

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

در واقع این متد ها مقادیری هستند که به برای پراپرتی Transform سِت میشوند.

متد translate

از طریق این متد میتوان جزئی را در راستای محور X یا Y جابجا کرد. این جابجایی نسبت به مکان اولیه جزء است.

در مثال زیر دایو را 120 پیکسل در جهت محور X و 50 پیکسل در جهت محور Y تغییر میدهیم. ( مقادیر مثبت Y جابجایی را رو به پایین اجرا میکند. )

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

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

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

متد rotate

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

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

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

متد scale

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

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

برای بزرگ کردن دایو:

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

برای کوچک کردن دایو:

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

متد skew

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

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

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

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

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

متد matrix

این متد تمام متدهای دو بعدی را با هم ترکیب میکند. این متند 6 پاراکتر میگیرد که بهترتیب زیر خواهند بود:

 

توجه کنید که مقادیر مربوط به skew باید عددی بین 0 تا 0.9 باشد:

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

Transform سه بعدی

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

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

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

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

Transitions در CSS3

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

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

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

مورد اول پراپرتی transition-property و مورد دوم transition-duration است. این دو پراپرتی را با هم ترکیب میکنیم و به پراپرتی transition دو مقدار میدهیم. مقدار اول برای مورد اول و مقدار دوم مدت زمانی تغییرات است.

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

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

نکته: دستور transition: width 5s; را میتوان در :hover نوشت.

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

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

برای ایجاد هر تغییر، پراپرتی های مربوطه و مدت زمان را در transition نوشته و مقادیر را با کاما از هم جدا میکنیم.

تنظیم سرعت تغییر در لحظات مختلف

پراپرتی transition-timing-function منحنی سرعت تغییر حالت را تعیین میکند. این پراپرتی 5 مقدار زیر را میتواند بگیرد:

1) ease: این مقدار که دیفالت است، سرعت انتقال را هنگام شروع کم، و بعد زیاد و هنگام پایان مجددا کم میکند.

2) linear: این مقدار سرعت انتقال را از آغاز تا پایان ثابت نگه میدارد.

3) ease-in: سرعت تغییر را فقط در شروع تغییر کم میکند.

4) ease-out: سرعت تغییر را در پایان تغییر کم میکند.

5) ease-in-out: سرعت تغییر را در شروع و پایان کم میکند.

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

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

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

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

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

ترکیب transition و transformation

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

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

مثال دیگر:

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

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

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

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