پیشنمایش زنده (iframe sandbox)
تمامصفحه
<div class="radikalwp-glass-login"><h4>خوش آمدید<//h4><input type="email" placeholder="ایمیل شما"><input type="password" placeholder="رمز عبور"><button type="button">ورود به حساب<//button><span>حساب ندارید؟ <a href="#">ثبتنام کنید<//a><//span><//div>
.radikalwp-glass-login {
width: 300px;
padding: 28px 24px;
text-align: center;
background: linear-gradient(160deg, rgba(49, 46, 129, .92), rgba(112, 26, 117, .85));
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 20px;
box-shadow: 0 20px 44px rgba(30, 27, 75, .35);
}
.radikalwp-glass-login h4 { margin: 0 0 18px; font-size: 17px; color: #fff; }
.radikalwp-glass-login input {
width: 100%;
margin-bottom: 12px;
padding: 11px 14px;
font-family: inherit;
font-size: 13px;
color: #fff;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 11px;
outline: none;
box-sizing: border-box;
transition: border-color .25s ease, background .25s ease;
}
.radikalwp-glass-login input::placeholder { color: rgba(255, 255, 255, .55); }
.radikalwp-glass-login input:focus {
border-color: #c4b5fd;
background: rgba(255, 255, 255, .16);
}
.radikalwp-glass-login button {
width: 100%;
margin-top: 4px;
padding: 12px 0;
font-family: inherit;
font-size: 14px;
font-weight: 800;
color: #4c1d95;
background: #ede9fe;
border: none;
border-radius: 11px;
cursor: pointer;
transition: filter .2s ease, transform .2s ease;
}
.radikalwp-glass-login button:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
.radikalwp-glass-login > span { display: block; margin-top: 14px; font-size: 11.5px; color: rgba(255, 255, 255, .75); }
.radikalwp-glass-login a { color: #fbcfe8; text-decoration: none; font-weight: 700; }
درباره این اسنیپت
کارت ورود با ظاهر شیشهای روی گرادیان شب بنفش، دو فیلد ایمیل و رمز، دکمه ورود و لینک ثبتنام. بلور پسزمینه و حاشیه نیمهشفاف، عمق گلسمورفیسمی خوشدستی میسازد. برای صفحات ورود و عضویت قالبهای مدرن و لندینگ اپلیکیشنها مناسب است. فیلدها در فوکوس حاشیه بنفش روشن میگیرند تا مسیر تایپ کاربر مشخص بماند.
پرسشهای متداول
کارت را داخل یک بخش با تصویر یا گرادیان تیره بگذارید. شفافیت و رنگ نیمهشفاف کارت خودش با زمینه ترکیب میشود و حس شیشه میدهد.
خیر؛ فرم فقط ظاهری است. باید اکشن ورود سایت خود را به فیلدها متصل کنید؛ استایل آماده استفاده است.
دکمه رنگ روشن بنفش دارد. پسزمینه و رنگ متن آن را با کد برند خود جایگزین کنید تا با تم سایت بخواند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!