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