جنگولرن

بکند کارها به این چیزا دقت نمیکنن. اما جالب بود. از لینکدین سعید خسروی:

یه ترفند کوچیک ولی مهم توی طراحی رابط کاربری که خیلی وقتا نادیده گرفته می‌شه 👇

اشتباه رایج: وقتی یه کانتینر (مثلاً یه کارت یا باکس) داخل یه کانتینر بزرگ‌تر قرار می‌گیره، بعضی‌ها میان و برای هر دو یه border-radius برابر می‌ذارن. نتیجه‌اش چی می‌شه؟ گوشه‌های تیز و ناهماهنگ که حس تمیزی طراحی رو از بین می‌بره!

راه‌حل درست: شعاع گوشه‌ی بیرونی باید برابر باشه با شعاع گوشه‌ی داخلی به‌علاوه‌ی فضای خالی (padding) بین اون‌ها.

مثلاً اگه border-radius عنصر داخلی ۱۶ پیکسل باشه و فاصله بین اون و عنصر بیرونی ۸ پیکسل باشه، پس border-radius عنصر بیرونی باید ۲۴ پیکسل باشه.

اینجوری گوشه‌ها دقیقاً هم‌مرکز و تمیز درمیاد و طراحی حرفه‌ای‌تر دیده می‌شه.

👍32✍6❤3

www.tgoop.com/djangolearn_ir/1074

3.32K viewsedited  Jul 18 at 19:25

بکند کارها به این چیزا دقت نمیکنن. اما جالب بود. از لینکدین سعید خسروی:

یه ترفند کوچیک ولی مهم توی طراحی رابط کاربری که خیلی وقتا نادیده گرفته می‌شه 👇

اشتباه رایج: وقتی یه کانتینر (مثلاً یه کارت یا باکس) داخل یه کانتینر بزرگ‌تر قرار می‌گیره، بعضی‌ها میان و برای هر دو یه border-radius برابر می‌ذارن. نتیجه‌اش چی می‌شه؟ گوشه‌های تیز و ناهماهنگ که حس تمیزی طراحی رو از بین می‌بره!

راه‌حل درست: شعاع گوشه‌ی بیرونی باید برابر باشه با شعاع گوشه‌ی داخلی به‌علاوه‌ی فضای خالی (padding) بین اون‌ها.

مثلاً اگه border-radius عنصر داخلی ۱۶ پیکسل باشه و فاصله بین اون و عنصر بیرونی ۸ پیکسل باشه، پس border-radius عنصر بیرونی باید ۲۴ پیکسل باشه.

اینجوری گوشه‌ها دقیقاً هم‌مرکز و تمیز درمیاد و طراحی حرفه‌ای‌تر دیده می‌شه.

BY جنگولرن