پیشنمایش زنده (iframe sandbox)
تمامصفحه
<p style="font-size:13.5px;color:#334155;line-height:2.2">برای ذخیره سریع <kbd class="radikalwp-kbd">Ctrl<//kbd> + <kbd class="radikalwp-kbd">S<//kbd> را بزنید و برای باز کردن جستجو <kbd class="radikalwp-kbd">Ctrl<//kbd> + <kbd class="radikalwp-kbd">K<//kbd> را فشار دهید.<//p>
.radikalwp-kbd {
display: inline-block;
padding: 3px 9px;
font-family: 'Sarasa Mono SC', Consolas, monospace;
font-size: 12px;
font-weight: 700;
color: #334155;
background: linear-gradient(180deg, #fff, #f1f5f9);
border: 1px solid #cbd5e1;
border-bottom-width: 3px;
border-radius: 7px;
box-shadow: 0 1px 0 rgba(15, 23, 42, .08);
vertical-align: middle;
}
.radikalwp-kbd:active {
transform: translateY(1px);
border-bottom-width: 2px;
}
درباره این اسنیپت
عنصر kbd استایلشده که شبیه کلید فیزیکی کیبورد است: بدنه روشن، لبه پایین تیره و سایه فشاری ظریف. برای مستندات میانبرها، راهنمای بازی و آموزشهای تایپ مناسب است. ترکیب چند کلید با کاراکتر + بین آنها خوانا میشود. اندازه فونت آن همخانواده متن است تا داخل پاراگراف نپرد.
پرسشهای متداول
لبه پایین ضخیمتر (3px) نقش بدنه کلید را دارد و گرادیان عمودی روشن، بازتاب نور بالای کلاویه را شبیهسازی میکند.
بله؛ کلیک/لمس روی kbd آن را یک پیکسل پایین میبرد و لبه جمع میشود؛ رفتاری نمایشی برای دموهای تعاملی است.
بله؛ فونت مونو برای حروف لاتین بهتر است اما فارسی هم با فونت سایت رندر میشود؛ در صورت نیاز font-family را به وزیرمتن تغییر دهید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۱۰ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
.card { border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.08); }باکس کد با دکمه کپی
کامپوننت
کد
کپی
۶۰
۴.۱ (۹)
Ctrl+Cکپی کردن
کلیکبورد کیبوردی
کیبورد
کلیک
میانبر
۳۷
۴.۰ (۶)
style.css
.btn {\n color: #fff;\n background: #6366f1;\n}باکس کد با هدر رنگی
باکس کد
کد
مستندات
۱۸
۴.۶ (۳)
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!