طرح نئومورفیسم در المنتور، یکی از طراحی هایی که امروزه توی طراحی ها خیلی استفاده میشه، طراحی به سبک نئومورفیسم هست. طراحی نئومورفیسم یکی از سبک های طراحی امروزیه که با ترکیب استایل طراحی اسکئومورفیسم (skeuomorphism) و استایل طراحی متریال دیزاین سبک خاصی از طراحی رو به وجود آورده.توی این آموزش از کنترل وب میخوایم طرح نئومورفیسم در المنتور رو به راحتی فقط به کمک المان های خود صفحه ساز المنتور و به کمک چند خط کد سی اس اس(CSS) ساده و بدون استفاده از هیچ گونه افزونه جانبی طراحی کنیم و توی طراحی های خودمون استفاده کنیم تا بتونیم با استفاده از طرح نئومورفیسم در المنتور طراحی های خودمون رو جذاب تر کنیم.برای اینکه طرح نئومورفیسم در المنتور رو داشته باشیم، باید توجه کنیم که این طرح زیبایی خودش رو به خاطر بازی با سایه ها ایجاد میکنه و به خاطر همین روی المان های مختلفی که این شرایط رو داشته باشن این طرح قابلیت اجرایی رو داره.
در قدم اول آموزش طرح نئومورفیسم در المنتور، المان ” آیکون شبکه های اجتماعی ” رو در جایی که میخوایم قرار میدیدم.برای اینکار از طریق قسمت جست و جو یا با پیدا کردن این المان از بین المان های موجود در المنتور، این المان رو در قسمتی که میخوایم قرار میدیم.نکته ای که باید به اون توجه کنیم اینه که برای اینکه طرحی به سبک نئومورفیسم طراحی بشه این نکته هست که باید رنگ المان مورد نظر با رنگ پس زمینه یکی باشه تا با اختلافی که سایه های موردنظر برای المان ایجاد میکنن المان به سبک نئومورفیسم طراحی بشه.برای اینکار در قدم بعدی باید از طریق بخش استایل المان، رنگ پس زمینه المان رو با رنگ پس زمینه یکی کنیم.برای اینکار در قسمت ” رنگ “، رنگ رو روی ” سفارشی ” تنظیم میکنیم. برای اینکه رنگ رو تغییر بدیم، گزینه “رنگ اولیه” رو انتخاب کنیم و از طریق این قسمت رنگ دلخواهمون رو به المان میدیم. برای اینکه پس زمینه به رنگ سفید بود، در این قسمت رنگ رو روی رنگ سفید تنظیم می کنیم. در قدم بعدی برای اینکه بتونیم رنگ هر کدوم از آیکون های شبکه های اجتماعی رو تغییر بدیم کافیه که از طریق قسمت “رنگ ثانویه”، رنگ رو روی رنگ دلخواهی که مورد نظرمون هست تنظیم کنیم. بعد از اینکه رنگ المان ” آیکون شبکه های اجتماعی ” رو با توجه به موارد بالا تنظیم کردیم، فوت کوزه گری اصلی از راه میرسه!برای اینکار کافیه که برای اینکه المان موردنظرمون به سبک نئومورفیسم طراحی بشه، به تب ” پیشرفته ” بریم و از طریق قسمت “custom css” یا “سی اس اس سفارشی” کد های سی اس اسی که در ادامه قرار میدیم رو توی این قسمت قرار بدین.این کدها باعث میشن که قسمت اصلی طراحی به سبک نئومورفیسم ، یعنی سایه ها ایجاد بشن و المان مورد نظر به این سبک طراحی بشه. نکته ی مهمی دیگ ای که وجود داره اینه که برای اینکه از این کد های سی اس اس استفاده کنین، لازمه که رنگ موردنظر خودتون رو با توجه به پس زمینه ای که دارین در کد های سی اس اس تغییر بدین.در کد هایی که در ادامه براتون قرار میدیم، رنگ طراحی ، روی رنگ سفید با کد رنگی fff# تنظیم شده. می تونین با تغییر این کد رنگی در کد های سی اس اس با کد رنگی مور نظر خودتون، طراحی رو سفارشی کنین و رنگ مورنظر خودتون رو ایجاد کنین.امیدواریم که از این آموزش استفاده کرده باشین و بتونین طرحای خیلی جذابی رو به سبک نئومورفیسم طراحی کنین و طرحای خیلی باحال و متنوعی رو برای سایتتون ایجاد کنین D:کد های استفاده شده:
یادگیری طرح نئومورفیسم در المنتور با یک مثال!
برای اینکه بتونیم مثالی از استفاده از این طرح جذاب رو با هم پیاده سازی کنیم، ما از طریق المان ” آیکون شبکه های اجتماعی ” و تبدیل اون به یک طرح نئومورفیسم جذاب، طرح نئومورفیسم در المنتور رو ایجاد میکنیم.
در قدم اول آموزش طرح نئومورفیسم در المنتور، المان ” آیکون شبکه های اجتماعی ” رو در جایی که میخوایم قرار میدیدم.برای اینکار از طریق قسمت جست و جو یا با پیدا کردن این المان از بین المان های موجود در المنتور، این المان رو در قسمتی که میخوایم قرار میدیم.
نکته ای که باید به اون توجه کنیم اینه که برای اینکه طرحی به سبک نئومورفیسم طراحی بشه این نکته هست که باید رنگ المان مورد نظر با رنگ پس زمینه یکی باشه تا با اختلافی که سایه های موردنظر برای المان ایجاد میکنن المان به سبک نئومورفیسم طراحی بشه.برای اینکار در قدم بعدی باید از طریق بخش استایل المان، رنگ پس زمینه المان رو با رنگ پس زمینه یکی کنیم.برای اینکار در قسمت ” رنگ “، رنگ رو روی ” سفارشی ” تنظیم میکنیم.
برای اینکه رنگ رو تغییر بدیم، گزینه “رنگ اولیه” رو انتخاب کنیم و از طریق این قسمت رنگ دلخواهمون رو به المان میدیم. برای اینکه پس زمینه به رنگ سفید بود، در این قسمت رنگ رو روی رنگ سفید تنظیم می کنیم. 
در قدم بعدی برای اینکه بتونیم رنگ هر کدوم از آیکون های شبکه های اجتماعی رو تغییر بدیم کافیه که از طریق قسمت “رنگ ثانویه”، رنگ رو روی رنگ دلخواهی که مورد نظرمون هست تنظیم کنیم. 
بعد از اینکه رنگ المان ” آیکون شبکه های اجتماعی ” رو با توجه به موارد بالا تنظیم کردیم، فوت کوزه گری اصلی از راه میرسه!برای اینکار کافیه که برای اینکه المان موردنظرمون به سبک نئومورفیسم طراحی بشه، به تب ” پیشرفته ” بریم و از طریق قسمت “custom css” یا “سی اس اس سفارشی” کد های سی اس اسی که در ادامه قرار میدیم رو توی این قسمت قرار بدین.این کدها باعث میشن که قسمت اصلی طراحی به سبک نئومورفیسم ، یعنی سایه ها ایجاد بشن و المان مورد نظر به این سبک طراحی بشه.
نکته ی مهمی دیگ ای که وجود داره اینه که برای اینکه از این کد های سی اس اس استفاده کنین، لازمه که رنگ موردنظر خودتون رو با توجه به پس زمینه ای که دارین در کد های سی اس اس تغییر بدین.در کد هایی که در ادامه براتون قرار میدیم، رنگ طراحی ، روی رنگ سفید با کد رنگی fff# تنظیم شده. می تونین با تغییر این کد رنگی در کد های سی اس اس با کد رنگی مور نظر خودتون، طراحی رو سفارشی کنین و رنگ مورنظر خودتون رو ایجاد کنین.امیدواریم که از این آموزش استفاده کرده باشین و بتونین طرحای خیلی جذابی رو به سبک نئومورفیسم طراحی کنین و طرحای خیلی باحال و متنوعی رو برای سایتتون ایجاد کنین D:کد های استفاده شده:
selector a{
box-shadow:
5px 5px 10px rgba(0,0,0,0.4),
-5px -5px 10px #fff;
-moz-box-shadow:
5px 5px 10px rgba(0,0,0,0.4),
-5px -5px 10px #fff;
webkit-box-shadow:
5px 5px 10px rgba(0,0,0,0.4),
-5px -5px 10px #fff;
}
selector a:hover{
box-shadow:
inset 15px 15px 20px rgba(0,0,0,0.4),
inset -15px -15px 20px #fff;
-moz-box-shadow:
inset 15px 15px 20px rgba(0,0,0,0.4),
-15px -15px 20px #fff;
webkit-box-shadow:
inset 15px 15px 20px rgba(0,0,0,0.4),
inset -15px -15px 20px #fff;
}
برای امتیاز به این نوشته کلیک کنید!
[کل: 2 میانگین: 3]
