آشنایی با 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ها می باشد و نکته دیگه اینکه، وقتی متن به لبه عرض المان تگه دارنده اش میرسد به خط بعد می شکند.
مثال)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!doctype html> <html> <head> <meta charset="utf-8"> <head> <style> div { white-space:normal; width: 150px; border: 1px solid #000000; } </style> </head> <body> <h2>word-wrap: normal (default):</h2> <div> با این ویژگی می توانیم فضاهای خالی موجود در متن را پاک کنیم و تا به لبه المان نگهدارنده اش نرسیده است متن ادامه پیدا می کند </div> </body> </html> |
نتیجه)
همونطور که می بینید دو space بین دو کلمه “خالی” و “موجود” وجود دارد که در خروجی کار فقط یک space مشاهده می شود.
Pre
اگر مقدار خاصیت white-space برابر pre باشد همونطوری که متن رو در المان می نویسیم در خروجی مشاهده می کنیم نه tab و نه space اضافه، حذف می شود نه enter ها و متن تنها در حالتی که به enter برسد به خط بعد می شکند .
نکته: با شرایطی که گفتیم ، در این حالت ممکن است متن از المان نگه دارنده اش تجاوز کند و سرریز شود.
مثال)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!doctype html> <html> <head> <meta charset="utf-8"> <head> <style> div { white-space:pre; width: 150px; border: 1px solid #000000; } </style> </head> <body> <h2>word-wrap: pre</h2> <div> با این ویژگی می توانیم فضاهای خالی موجود در متن را پاک کنیم و تا به لبه المان نگهدارنده اش نرسیده است متن ادامه پیدا می کند </div> </body> </html> |
نتیجه)
همانطور که از تصویر مشخصه هم enter و هم دو تا space پشت سرهم اعمال شده و متن از المان نگهداره اش سرریز شده است .
Pre-wrap
این مقدار مشابه pre می باشد با این تفاوت که وقتی عرض المان نگه دارنده تمام می شود متن به خط بعد می شکند و دیگه سرریز نمیشود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!doctype html> <html> <head> <meta charset="utf-8"> <head> <style> div { white-space:pre-wrap; width: 150px; border: 1px solid #000000; } </style> </head> <body> <h2>word-wrap: pre-wrap</h2> <div> با این ویژگی می توانیم فضاهای خالی موجود در متن را پاک کنیم و تا به لبه المان نگهدارنده اش نرسیده است متن ادامه پیدا می کند </div> </body> </html> |
نتیجه)
Nowrap
این مقدار مشابه normal عمل می کند با این تفاوت که متن به هیچ عنوان به خط بعد نمی شکند حتی اگر عرض المان نگه دارنده اش هم تمام شود.پس در این حالت هم امکان سرریزی داریم.
مثال)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!doctype html> <html> <head> <meta charset="utf-8"> <head> <style> div { white-space:nowrap; width: 150px; border: 1px solid #000000; } </style> </head> <body> <h2>word-wrap: nowrap</h2> <div> با این ویژگی می توانیم فضاهای خالی موجود در متن را پاک کنیم و تا به لبه المان نگهدارنده اش نرسیده است متن ادامه پیدا می کند </div> </body> </html> |
نتیجه)
Pre-line
وقتی از مقدار pre-line استفاده می کنیم همه فضاهای خالی مثل space و tab از بین می رود ولی enter ها اعمال می شوند. و یک نکته دیگر اینکه وقتی به عرض المان نگه دارنده اش تمام شود به خط بعد می شکند.
مثال)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!doctype html> <html> <head> <meta charset="utf-8"> <head> <style> div { white-space:pre-line; width: 150px; border: 1px solid #000000; } </style> </head> <body> <h2>word-wrap: pre-line</h2> <div> با این ویژگی می توانیم فضاهای خالی موجود در متن را پاک کنیم و تا به لبه المان نگهدارنده اش نرسیده است متن ادامه پیدا می کند </div> </body> </html> |
نتیجه)
استایل word-wrap
این خاصیت باعث می شود کلمه طولانی که از عرض المان نگه دارنده اش سرریز می شود ، به خط بعد بشکند.دو مقدار برای این ویژگی وجود دارد:
Normal
مقدار پیش فرض این ویژگی می باشد که تغییر اعمال نمیکند.
Break-word
این مقدار باعث می شود یک کلمه طولانی از عرض المان نگه دارنده اش، سرریز نشود و به خط بعد شکسته شود.
مثال)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <style> div { width: 150px; border: 1px solid #000000; } div.a { word-wrap: normal; } div.b { word-wrap: break-word; } </style> </head> <body> <h2>word-wrap: normal (default):</h2> <div class="a"> این متن دارای کلمههههههههههههههههههههههههههههههه با تعداد کاراکترها زیاد می باشد و وقتی به لبه المان نگه دارنده اش برسد به خط بعد نمی شکند.</div> <h2>word-wrap: break-word:</h2> <div class="b"> این متن دارای کلمههههههههههههههههههههههههههههههه با تعداد کاراکترها زیاد می باشد و وقتی به لبه المان نگه دارنده اش برسد به خط بعد نمی شکند.</div> </body> </html> |
نتیجه)
خب بحث این قسمت تموم شد حالا می خواهیم بریم سراغ مبحث text-shadow.
text-shadow در CSS3
در ادامه می خواهیم خاصیت text-shadow را بررسی کنیم . از این خاصیت برای سایه دادن به متن استفاده می شود.
طبق تصویر این المان 4 تا مقدار دارد:
مقدار اول: فاصله سایه از متن در راستای چپ به راست می باشد.( نکته: برای اینکه سایه از راست به چپ باشد مقدار منفی می دهیم- اگر بخواهیم در این راستا سایه نباشد مقدار 0 را می دهیم)
مقدار دوم: فاصله سایه از متن در راستای بالا به پایین می باشد. (نکته: برای اینکه سایه از پایین به بالا باشد مقدار منفی می دهیم- اگر بخواهیم در این راستا سایه نباشد مقدار 0 را می دهیم)
مقدار سوم: میزان محوشدن یا ماتی سایه را مشخص می کند .
مقدار چهارم : رنگ سایه.
نکته: می توانیم چندتا سایه همزمان اعمال کنیم. برای این کار کافیه، یک سمیکالن در انتهای رنگ قرار بدهیم و سایه بعدی رو بنویسیم.
در ادامه با یک مثال مفاهیم را بهتر متوجه خواهیم شد.
مثال)
می خواهیم یک کلمه مثل dazhyar رو بنویسیم . به آن سایه بدهیم ، حروفش رو به هم نزدیک کنیم و هر حرفی را یک رنگ خاصی بدهیم . به شکل زیر ابتدا کد اولیه رو می نویسیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <style> *{ margin:0; padding:0; border:0; } body{ text-align:center; } </style> <body> <div class="dazhyar"> <div class="dazhyar d">d</div> <div class="dazhyar a">a</div> <div class="dazhyar z">z</div> <div class="dazhyar h">h</div> <div class="dazhyar y">y</div> <div class="dazhyar a">a</div> <div class="dazhyar r">r</div> </div> </body> </html> |
همانطور که مشخص است هر حرف را داخل یک div جداگانه میگذاریم و به هر div یک کلاس خاصی(مطابق حرفش مثلا) می دهیم ،تا هر بلایی که می خواهیم بتونیم سر تک تک حروف بیاریم.علاوه بر کلاسی که برای هر div درنظر گرفتیم ، کلاس dazhyar رو هم به تک تک div ها دادیم تا بتونیم به صورت مشترک یک استایل رو به همه div ها اعمال کنیم.
نتیحه:
برای اینکه حروف (یا div ها) کنار هم قرار بگیرند و فونتشون رو عوض کنیم و سایزشون رو بزرگتر. استایل های زیر را اعمال می کنیم:
1 2 3 4 5 |
.dazhyar{ display: inline-block; font: 100px "tahoma"; font-weight: 800; } |
نتیحه:
خب حالا میریم سراغ کاراهایی که می خواستیم بکنیم. اول اینکه می خواهیم یکم حروف رو بهم نزدیک کنیم پس برای کلاس dazhyar (یا هر حرفی) خاصیت margin-left یا margin-right را استفاده می کنیم و به آن مقدار منفی می دهیم تا بهم نزدیک شوند :
1 |
margin-right: -40px; |
حالا میخواهیم به کلاس dazhyar (یعنی به هر حرفی) سایه بدهیم مثلا به شکل زیر:
1 |
text-shadow: 2px 3px 2px #de3ef1; |
نتیحه:
برای اینکه از راست به چپ سایه اعمال شود می توانیم مقدار اول را منفی بدهیم یا برای اینکه از پایین به بالا سایه دار شود مقدار دوم را منفی بدهیم.
حالا می خواهیم رنگ هر حرف رو یک مقدار خاصی بدهیم . پس به کلاس مختص هر حرف یک color می دهیم.کدنهایی ما به شکل زیر می باشد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <style> *{ margin:0; padding:0; border:0; } body{ text-align:center; } .dazhyar{ display: inline-block; font: 100px "tahoma"; font-weight: 800; margin-right: -40px; text-shadow: 2px 3px 2px #de3ef1; } .d{ color:#2d42dd; } .a{ color:#13922b; } .z{ color:#e5d129; } .h{ color:#e52929; } .y{ color:#ad0acb; } .r{ color:#051e29; } </style> <body> <div class="dazhyar"> <div class="dazhyar d">d</div> <div class="dazhyar a">a</div> <div class="dazhyar z">z</div> <div class="dazhyar h">h</div> <div class="dazhyar y">y</div> <div class="dazhyar a">a</div> <div class="dazhyar r">r</div> </div> </body> </html> |
نتیجه :
ما برای هر حرف a یک کلاس یکسان درنطر گرفتیم برای همین رنگشون یکی شد.
حالا می خواهیم چندتا سایه پشت سر هم به dazhyar بدهیم تا با این نوع مقداردهی هم بهتر آشنا بشیم:
1 |
text-shadow: 0 1px 0 #fff,0 2px 0 #fff, 0 -1px 0 #fff, 0 -2px 0 #fff, 1px 0 0 #fff,2px 0 0 #fff,-1px 0 0 #fff,-2px 0 0 #fff; |
اولی یک سایه از بالا به پایین به اندازه 1px اعمال می کند. دومی یک سایه از بالا به پایین به اندازه 2px اعمال می کند سومی یک سایه از پایین به بالا به اندازه 1px اعمال می کند، چهارمی یک سایه از پایین به بالا به اندازه 2px اعمال می کند و به همین ترتیب سایه ها اعمال می شوند.
نتیحه:
غرض اینکه می تونیم سایه های زیبایی رو به کلمات بدهیم و برای لوگو سایت استفاده کنیم.
آموزش این جلسه به پایان رسید امیدواریم مفاهیم text-shadow و white-space و word-wrap براتون جاافتاده باشه.
باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید ;-)
به این مقاله چند تا ستاره میدی؟[تعداد رای: 0 امتیاز: 0]
دیدگاه خود را بنویسید