Kölgələr yerinə ton qatları

Kölgə interfeysdə dərinlik yaratmağın ən asan, amma ən ucuz yoludur. Bir neçə qat box-shadow əlavə edən kimi səhifə "yumşalır" — və eyni anda bulanıqlaşır.

Problem nədədir

Kölgə işığı simulyasiya edir. Tünd interfeysdə isə arxa fon artıq qaradır: qara üzərində qara kölgə heç nə demir. Nəticədə dizayner kölgəni getdikcə güclendirir, interfeys isə çirkli görünür.

Ton qatları

Bunun əvəzinə səthləri ton ilə ayırırıq:

• ən dərin səth — səhifə fonu
• bir pillə yuxarı — kart fonu
• ən yuxarı — aktiv və ya seçilmiş element

Hər pillə arasında fərq kiçikdir, lakin ardıcıldır. Göz bu ardıcıllığı dərhal oxuyur.

Sərhəd qalınlığı

İkinci alət — sərhəddir. 1px sərhəd bir kartı fondan kölgədən daha dəqiq ayırır və heç bir bulanıqlıq yaratmır. Hover zamanı sərhədin rəngini bir ton artırmaq kifayətdir.

Nəticə

Kölgəni tamamilə rədd etmirik — sadəcə onu son çarə kimi saxlayırıq. Modal və dropdown kimi həqiqətən "üzən" elementlər üçün. Qalan hər şey ton və sərhədlə həll olunur.