جلسه‌ی پنجاه و چهارم: خصوصیت‌ letter-spacing در CSS

خصوصیت letter-spacing در CSS

در جلسه‌ی پیش در مورد خصوصیت White-space در CSS توضیح دادیم و گفتیم که از این خصوصیت برای ایجاد کنترل گر بر روی نحوه‌ی نوشتار ما استفاده می‌شود. در این جلسه می‌خواهیم به توضیح خصوصیت‌ letter-spacing در CSS بپردازیم. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)

خصوصیت letter-spacing در CSS

به وسیله‌ی خصوصیت letter-spacing می‌توانیم فاصله‌ی بین حروف در کلمات را کنترل کنیم. این خصوصیت به طور کلی دارای دو حالت می‌باشد که عبارتند از:

  1. Normal
  2. height

حالت Normal

در حالت Normal اتفاق خاصی نمی‌افتد و تمامی کلمات در حالت نرمال قرار می‌گیرند. عموما از این حالت در زمانی استفاده می شود که میخواهیم فواصل ایجاد شده را به حالت اولیه برگردانیم.

حالت Height

در این حالت ما می‌توانیم مقدار فاصله‌ی مورد نظر خود را در مقابل خصوصیت Letter-spacing در CSS بنویسیم. یادتان باشد که این خصوصیت فقط زبان خارجی نیست که در آن کلمات از یکدیگر جدا هستند و در زبان فارسی نیز می‌توان از آن استفاده نمود. به نمونه کد زیر توجه کنید:

کد HTML:

<div class="box">
 <p>
   فاصله ی بین این حروف ۱۰px می باشد.
 </p>
</div>

کد CSS:

body {
    background-color: #fff;
}

.box {
  width: 600px;
  height: 300px;
  font-size: 30px;
  color: #000;
  border: 3px solid #888;
  border-radius: 15px;
  margin: 0px auto;
  padding: 10px;
  background-color:#a3d29c;
  }
.box {
  letter-spacing: 10px;
}
.box:hover {
  letter-spacing: normal;
  transition: 1s
}

خروجی کد بالا:

خصوصیت letter-spacing در CSS

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

خصوصیت letter-spacing در CSS

نکته: این خصوصیت در تمامی مرورگرهای اصلی پشتیبانی می‌شود.

خلاصه مطلب:

  1. به وسیله‌ی خصوصیت letter-spacing می‌توانیم فاصله‌ی بین حروف در کلمات را کنترل کنیم.
  2. در حالت Normal اتفاق خاصی نمی‌افتد و تمامی کلمات در حالت نرمال قرار می‌گیرند.
  3. در این حالت ما می‌توانیم مقدار فاصله‌ی مورد نظر خود را در مقابل خصوصیت Letter-spacing در CSS بنویسیم.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها