شاید فکر کنید کار خیلی دشواری است یا نیاز به کدهای زیادی هست تا بتوانیم مانند تصویر بالا سایتمان را حالت نئومورفیسم کنیم. اما باید بدانید که این کار اتفاقا خیلی ساده می باشد و شما می توانید به راحتی با استفاده از المنتور و المنتور پرو و با چند خط کد css این صفحه را برای سایتتان طراحی کنید.
رابط کاربری نئومورفیسم یا طراحی به سبک نئومورفیسم ترند جدید طراحی برای سایت ها شده و بهتر است برای جذب کاربر در سایت ما هم از این سبک طراحی استفاده کنیم.
در ادامه ویدئو مربوطه را ببینید تا کاملا بدانید باید چکار کنید. در پایان کدهای استفاده شده هم قرار خواهم داد.
کد رنگ طوسی استفاده شده در آموزش: f5f5f5#
کدهای css استفاده شده در آموزش:
[css]
.your-class {
-webkit-box-shadow:
۵px 5px 10px rgba(0,0,0,0.1),
-۵px -5px 10px #fff ;
-moz-box-shadow:
۵px 5px 10px rgba(0,0,0,0.1),
-۵px -5px 10px #fff ;
box-shadow:
۵px 5px 10px rgba(0,0,0,0.1),
-۵px -5px 10px #fff ;
}
.your-class:hover {
-webkit-box-shadow:
۱۵px 15px 20px rgba(0,0,0,0.1),
-۱۵px -15px 20px #fff;
-moz-box-shadow:
۱۵px 15px 20px rgba(0,0,0,0.1),
-۱۵px -15px 20px #fff;
box-shadow:
۱۵px 15px 20px rgba(0,0,0,0.1),
-۱۵px -15px 20px #fff;
}
[/css]
