آشنایی با text-shadow | white-space | word-wrap

با نام و یاد خدای مهربون
در جلسه گذشته به بحث انواع سلکتورها در CSS پرداختیم در این جلسه می خواهیم مباحثی مربوط به  web typography رو با هم کار کنیم. به طور کلی چهار مبحث در رابطه با این زمینه وجود دارد که در این جلسه به دو مورد آن اشاره می کنیم:

  • @font-face: که جلسه هجدهم به صورت کامل به آن پرداخته شد.
  • Typography overflow and wrapping
  • Text-shadow
  • Multi column text

Typography overflow and wrapping

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

 دو نوع استایل در رابطه Typography overflow and wrapping داریم :

  •  word-wrap 
  • white-space

استایل white-space

از این ویژگی برای مدیریت فضاهای خالی متن استفاده می شود.مقادیر این ویژگی:

Normal

 مقدار پیش فرض برای white-space می باشد . در این حالت تمام فضاهای خالی مثل tab  ، enter، بیشتر از دو space نادیده گرفته شود.در نتیجه در این حالت فضای خالی فقط مربوط به تک spaceها می باشد و نکته دیگه اینکه، وقتی متن به لبه عرض المان تگه دارنده اش میرسد به خط بعد می شکند.

مثال)

نتیجه)

آموزش text-shadow | white-space | word-wrap در CSS3

همونطور که می بینید دو space بین دو کلمه “خالی” و “موجود” وجود دارد که در خروجی کار فقط یک space مشاهده می شود.

Pre

اگر مقدار خاصیت white-space برابر pre باشد همونطوری که متن رو در المان می نویسیم در خروجی مشاهده می کنیم نه tab و نه space اضافه، حذف می شود نه enter ها و متن تنها در حالتی که به enter برسد به خط بعد می شکند .

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

مثال)

نتیجه)

آموزش text-shadow | white-space | word-wrap - مقدار pre

همانطور که از تصویر مشخصه هم enter و هم دو تا space پشت سرهم اعمال شده و متن از المان نگهداره اش سرریز شده است .

Pre-wrap

این مقدار مشابه pre می باشد با این تفاوت که وقتی عرض المان نگه دارنده تمام می شود متن به خط بعد می شکند و دیگه سرریز نمیشود.

نتیجه)

آموزش text-shadow | white-space | word-wrap -مقدار pre-wrap

Nowrap

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

مثال)

نتیجه)

آموزش text-shadow | white-space | word-wrap - مقدار nowrap

Pre-line

وقتی از مقدار pre-line استفاده می کنیم همه فضاهای خالی مثل space و tab از بین می رود ولی enter ها اعمال می شوند. و یک نکته دیگر اینکه وقتی به عرض المان نگه دارنده اش تمام شود به خط بعد می شکند.

مثال)

نتیجه)

آموزش text-shadow | white-space | word-wrap -مقدار pre-line

استایل word-wrap

این خاصیت باعث می شود کلمه طولانی که از عرض المان نگه دارنده اش سرریز می شود ، به خط بعد بشکند.دو مقدار برای این ویژگی وجود دارد:

 Normal

مقدار پیش فرض این ویژگی می باشد که تغییر اعمال نمیکند.

Break-word 

این مقدار باعث می شود یک کلمه طولانی از عرض المان نگه دارنده اش، سرریز نشود و به خط بعد شکسته شود.

مثال)

نتیجه)

آموزش text-shadow | white-space | word-wrap - مثال

خب بحث این قسمت تموم شد حالا می خواهیم بریم سراغ مبحث text-shadow.

text-shadow در CSS3

در ادامه می خواهیم خاصیت text-shadow را بررسی کنیم . از این خاصیت برای سایه دادن به متن استفاده می شود.

آموزش text-shadow | نحوه استفاده از سایه

طبق تصویر این المان 4 تا مقدار دارد:

مقدار اول: فاصله سایه از متن در راستای چپ به راست می باشد.(  نکته: برای اینکه سایه از راست به چپ باشد مقدار منفی می دهیم- اگر بخواهیم در این راستا سایه نباشد مقدار 0 را می دهیم)

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

مقدار سوم: میزان محوشدن یا ماتی سایه را مشخص می کند .

مقدار چهارم : رنگ سایه.

نکته: می توانیم چندتا سایه همزمان اعمال کنیم. برای این کار کافیه، یک سمیکالن در انتهای رنگ قرار بدهیم و سایه بعدی رو بنویسیم.

در ادامه با یک مثال مفاهیم را بهتر متوجه خواهیم شد.

مثال)

می خواهیم یک کلمه مثل dazhyar رو بنویسیم . به آن سایه بدهیم ، حروفش رو به هم نزدیک کنیم و هر حرفی را یک رنگ خاصی بدهیم . به شکل زیر ابتدا کد اولیه رو می نویسیم:

همانطور که مشخص است هر حرف را داخل یک div جداگانه میگذاریم و به هر div یک کلاس خاصی(مطابق حرفش مثلا) می دهیم ،تا هر بلایی که می خواهیم بتونیم سر تک تک حروف بیاریم.علاوه بر کلاسی که برای هر div درنظر گرفتیم ، کلاس dazhyar رو هم  به تک تک div ها دادیم تا بتونیم به صورت مشترک یک استایل رو به همه div ها اعمال کنیم.

نتیحه:

آموزش text-shadow | نتیجه مثال

برای اینکه حروف (یا div  ها) کنار هم قرار بگیرند و فونتشون رو عوض کنیم و سایزشون رو بزرگتر. استایل های زیر را اعمال می کنیم:

نتیحه:

آموزش text-shadow | مثال

خب حالا میریم سراغ کاراهایی که می خواستیم بکنیم. اول اینکه می خواهیم یکم حروف رو بهم نزدیک کنیم پس برای کلاس dazhyar (یا هر حرفی) خاصیت margin-left یا margin-right را استفاده می کنیم و به آن مقدار منفی می دهیم تا بهم نزدیک شوند :

حالا میخواهیم به کلاس dazhyar (یعنی به هر حرفی) سایه بدهیم مثلا به شکل زیر:

نتیحه:

آموزش text-shadow - نتیجه نزدیک شدن حروف

برای اینکه از راست به چپ سایه اعمال شود می توانیم مقدار اول را منفی بدهیم یا برای اینکه از پایین به بالا سایه دار شود مقدار دوم را منفی بدهیم.

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

نتیجه :

آموزش text-shadow | مثال

ما برای هر حرف a یک کلاس یکسان درنطر گرفتیم برای همین رنگشون یکی شد.

حالا می خواهیم چندتا سایه پشت سر هم به dazhyar بدهیم تا با این نوع مقداردهی هم بهتر آشنا بشیم:

اولی یک سایه از بالا به پایین به اندازه 1px اعمال می کند. دومی یک سایه از بالا به پایین به اندازه 2px اعمال می کند سومی یک سایه از پایین به بالا به اندازه 1px اعمال می کند، چهارمی یک سایه از پایین به بالا به اندازه 2px اعمال می کند و به همین ترتیب سایه ها اعمال می شوند.

نتیحه:

آموزش text-shadow | مثال

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

آموزش این جلسه به پایان رسید امیدواریم مفاهیم text-shadow و white-space و word-wrap براتون جاافتاده باشه.

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 0 امتیاز: 0]