میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

افکت های متنی ( Text Effects ) در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش فرم افکت های متنی ( Text Effects ) در CSS با من همراه باشید.

در CSS میتوانیم به متون افکت های خاصی اضافه کنیم. که در زیر چند نممونه عنوان شده که مورد بحث قرار می دهیم:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode


خصوصیت text-overflow

خصوصیت text-overflow کار مهمی را بر عهده دارد؛ برخی اوقات محتوای متنی ما از کادر یا نگه دارنده ای که برایش تعیین شده، فراتر می رود و دیگر در آن جا نمی شود. در چنین حالتی text-overflow می تواند تعیین کند که مرورگر با محتوای اضافی چه کار کند. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.a {
  white-space: nowrap; 
  width: 100px; 
  overflow: hidden;
  text-overflow:ellipsis;
  border: 1px solid #000000;
}

div.a:hover {
  overflow: visible;
  border: none;
}
</style>
</head>
<body>

<h1>The text-overflow Property</h1>
<p>The following two paragraphs contains a long text that will not fit in the box.</p>

<h2>text-overflow: clip:</h2>
<p class="test1">This is some long text that will not fit in the box</p>

<h2>text-overflow: ellipsis:</h2>
<p class="test2">This is some long text that will not fit in the box</p>

<h2>text-overflow: ellipsis:</h2>
<p>موس خود را روی نوشته ی زیر بیاورید</p>
<div class="a">This is some long text that will not fit in the box.</div>

</body>
</html>

مشاهده ی خروجی در JSBin

 

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

<!DOCTYPE html>
<html>
<head>
<style> 
div.test {
  white-space: nowrap; 
  width: 200px; 
  overflow: hidden; 
  border: 1px solid #000000;
}

div.test:hover {
  overflow: visible;
}
</style>
</head>
<body>

<p>Hover over the two divs below, to see the entire text.</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<br>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>
</html>

مشاهده ی خروجی در JSBin

 


خصوصیت word-wrap

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

<!DOCTYPE html>
<html>
<head>
<style> 
p.test2 {
  width: 11em; 
  border: 1px solid #000000;
  word-wrap: break-word;
}

p.test {
  width: 11em; 
  border: 1px solid #000000;
}
</style>
</head>
<body>

<h1>The word-wrap Property</h1>

<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

<p class="test2"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

تفاوت هر دو در مثال بالا واضح است.


خصوصیت word-break

این خصوصیت مشخص می کند که اگر جایی قرار است خط شکسته شود و کلمات به خط بعدی بروند، از کجا و چطور شکسته شوند. در مثال زیر دو جفت نگه دارنده و متن جدا داریم که مورد اول فقط زمانی که به خط فاصله (-) برسد و مورد دوم هر زمان و هر جایی که به انتهای خط برسد، شکسته می شود:

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: keep-all;
}

p.test2 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: break-all;
}
</style>
</head>
<body>

<h1>The word-break Property</h1>

<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>

<p class="test2">This paragraph contains some text. The lines will break at any character.</p>

<p dir='rtl'><b>هشدار:</b>خصوصیت word-break در مرورگر Opera 12 و نسخه های قبل تر از آن پشتیبانی نمی شود.</p>

</body>
</html>
 

مشاهده ی خروجی در JSBin

 

هشدار: خصوصیت word-break در مرورگر Opera 12 و نسخه های قبل تر از آن پشتیبانی نمی شود.

 


خصوصیت writing-mode

خصوصیت writing-mode مشخص می کند که نوشته ها عمودی یا افقی نوشته شوند. در مثال زیر هر دوی این حالت بررسی شده اند:

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1 {
  writing-mode: horizontal-tb; 
}

span.test2 {
  writing-mode: vertical-rl; 
}

p.test2 {
  writing-mode: vertical-rl; 
}

p.test3 {
  writing-mode: vertical-rl; 
}
</style>
</head>
<body>
<h1>The writing-mode Property</h1>

<p class="test1">Some text with default writing-mode.</p>

<p>Some text with a span element with a <span class="test2">vertical-rl</span> writing-mode.</p>

<p class="test2">Some text with writing-mode: vertical-rl.</p>
<br><br>
<p class="test3">این قابلیت در متون فارسی یا انگلیسی تفاوتی ایجاد نمی کند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin


فونت های در CSS

قبلا و در قسمت های قبلی به تفصیل در مورد فونت ها صحبت کرده ایم. بنابراین از تکرار مکررات پرهیز می کنیم و به نکاتی میپردازیم که قبلا ذکر نشده اند. انواع فونت های موجود در دنیای وب در اشکال زیر هستند:

فونت های (TrueType Fonts (TTF:
TrueType یک استاندارد فونت بود که در سال ۱۹۸۰ توسط Apple و Microsoft ارائه شد و رایج ترین نوع فونت در سیستم عامل های Mac OS و Windows می باشد.

فونت های (OpenType Fonts (OTF:
OpenType یک فرمت دیگر برای فونت های مقیاس پذیر کامپیوتری است که بر پایه ی TrueType ساخته شد و صاحب آن Microsoft می باشد. این نوع از فونت ها نیز از رایج ترین فونت های دنیای کامپیوترها هستند.

فونت های (Web Open Font Format (WOFF:
WOFF فرمتی است که در صفحات وب استفاده می شود. این فرمت که در سال ۲۰۰۹ ارائه شد، حالا مورد تایید W3C نیز می باشد. در واقع WOFF همان OpenType یا TrueType است که فشرده تر شده و دارای اطلاعات اضافی نیز می باشد. هدف آن نیز ارائه و توزیع فونت ها از سرور به سمت کاربران است، در شرایطی که پهنای باند کمی وجود دارد.

فونت های (Web Open Font Format (WOFF 2.0:
این دسته از فونت ها فشرده سازی بهتری نسبت به WOFF 1.0 دارند.

فونت ها یا اشکال SVG:
فونت های SVG در واقع glyph هستند. SVG 1.1 ماژولی دارد که اجازه می دهد در اشکال مختلف فونت هایی را نیز تعریف کنیم. همانطور که می دانید قوانین CSS نیز بر SVG ها اعمال می شوند بنابراین می توانید از دستور font-face@ نیز استفاده کنید.

فونت های (Embedded OpenType Fonts (EOT:
این فونت ها در واقع همان OpenType هستند که توسط Microsoft به عنوان فونت های embedded در صفحات وب استفاده می شوند.

وضعیت پشتیبانی

پشتیبانی مرورگرهای مختلف از این نوع فونت ها به صورت زیر است:

فرمت فونتEdgeکرومفایرفاکسسافاریاپرا
TTF/OTF*9.04.03.53.110.0
WOFF9.05.03.65.111.1
WOFF2پشتیبانی نمی‌شود36.0*35.0پشتیبانی نمی‌شود26.0
SVGپشتیبانی نمی‌شود4.0پشتیبانی نمی‌شود3.29.0
EOT6.0پشتیبانی نمی‌شودپشتیبانی نمی‌شودپشتیبانی نمی‌شودپشتیبانی نمی‌شود

* این فرمت تنها زمانی کار می کند که روی “installable” تنظیم شده باشد.

* این فرمت به صورت پیش فرض پشتیبانی نمی شود اما می توانید آن را فعال کنید (باید flag را روی “true” بگذارید تا از WOFF2 استفاده کنید).

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

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

امیدواریم آموزش افکت های متنی ( Text Effects ) در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssText Effects در CSSw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssافکت های متنی ( Text Effects ) در CSSافکت های متنی در CSSاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟