جلسه‌ی پنجاه و ششم: خصوصیت Caret-Color در CSS

خصوصیت Caret-Color در CSS

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

خصوصیت Caret-Color در CSS

همانطور که از اسم این خصوصیت پیداست از آن برای تغییر رنگ Caret استفاده می‌شود. شاید از خود بپرسید که Caret چیست؟؟

زمانی که شما بخواهید در یک سایت نظر یا مشخصاتی بنویسید با کلیک کردن بر روی محدوده‌ی مورد نظر خود یک خط چشمک زن می‌بینید که به وسیله‌ی آن می‌توانید تایپ کنید. به آن خط چشمک زن Caret می گویند. این حالت شباهت زیادی به خصوصیت Cursor دارد. (برای مشاهده‌ی آموزش خصوصیت Cursor در CSS کلیک کنید)

حالات خصوصیت Caret-Color در CSS

به طور کلی خصوصیت Caret-Color در CSS دارای دو حالت می‌باشد.

  1. Auto
  2. Color

حالت Auto

عموماً حالت auto به معنای پیشفرض می‌باشد در تمامی مرورگرها وجود دارد. معمولاً این حالت در مرورگر کروم به رنگ سیاه می‌باشد اما به توجه به رنگ بندی سایت و یا سایه‌های موجود در متن‌هامی‌توان آن را به نسبت سایت تغییر داد.

حالت Color

در حالت Color از این خصوصیت می‌توانیم رنگ Caret را به رنگ مورد نظر خود تغییر دهیم. در این خصوصیت می‌توانیم با استفاده از انیمیشن و خصوصیت Keyferames می‌توانیم به آن رنگ بندی متفاوت در هر ثانیه را بدهیم. (برای مشاهده‌ی آموزش خصوصیت Keyferames در CSS کلیک کنید) به نمونه کد زیر توجه کنید:

کد HTML:

<input type="" name="" value="" placeholder="سبز"><br>
<textarea name="" rows="4" cols="40" placeholder="آبی" ></textarea>

کد CSS:

input {
  margin: 5px;
  caret-color: #59df25;
  border-radius: 10px;
  padding: 2px;
  background-color: rgba(0,0,0,0.2)
}
textarea {
  caret-color: ##2dd0ff;
  border-radius: 15px;
  padding: 10px;
  background-color: rgba(0,0,0,0.2)
}

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

خصوصیت Caret-Color در CSS

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

خلاصه مطلب:

  1. از خصوصیت Caret-Color در CSS برای تغییر رنگ Caret استفاده می شود.
  2. زمانی که شما بخواهید در یک سایت نظر یا مشخصاتی بنویسید با کلیک کردن بر روی محدوده‌ی مورد نظر خود یک خط چشمک زن می‌بینید که به وسیله‌ی آن می‌توانید تایپ کنید. به آن خط چشمک زن Caret می گویند.
ابوالفضل کلهری

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

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