<div class="radikalwp-sep-gradient"><span class="radikalwp-sep-gradient-line"><//span><span class="radikalwp-sep-gradient-dot">✦<//span><span class="radikalwp-sep-gradient-line"><//span><//div>
.radikalwp-sep-gradient {
display: flex;
align-items: center;
gap: 14px;
max-width: 460px;
}
.radikalwp-sep-gradient-line {
flex: 1;
height: 2px;
border-radius: 999px;
background: linear-gradient(to left, transparent, #c7d2fe);
}
.radikalwp-sep-gradient-line:last-child {
background: linear-gradient(to right, transparent, #c7d2fe);
}
.radikalwp-sep-gradient-dot {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #6366f1;
background: #eef2ff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
}
درباره این اسنیپت
خط جداکنندهای که از دو طرف به مرکز محو میشود و وسط آن یک دایره کوچک با آیکون میدرخشد؛ جایگزین شیک hr معمولی. برای بین سکشنهای صفحه اصلی، بالای فوتر و جدا کردن دستههای لیست مناسب است. گرادیان دوسر با conic مرکز ساخته شده و دایره با box-shadow هاله ملایم دارد. متن کوچکی هم داخل دایره میگذارید.
پرسشهای متداول
خط اول از راست به مرکز و خط دوم از مرکز به چپ محو میشوند تا هر دو سمت صفحه آزاد و مرکز پر باشد؛ جهت گرادیانها عمداً معکوس است.
محتوای span دایره را با کاراکتر، SVG یا حرف برند جایگزین کنید؛ سایه هاله با رنگ پسزمینه دایره هماهنگ نگه دارید.
عرض دایره را به auto و padding را 4px 14px بدهید و border-radius را 999px کنید؛ جداکننده متنی «یا» بین دو فرم هم همینطور ساخته میشود.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۹ از ۳ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
بج وضعیت گرادیانی
محبوبترین قالبها
انتخاب هزاران کاربر فارسیزبان در سراسر دنیا
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!