Perfekti noapaļoti stūri

Viena no biežākajām kļūdām UI dizainā ir brīdis, kad tiek veidots elements iekš cita elementa (piemēram, bilde kartītē vai poga rāmītī). Ja abiem uzliek vienādu noapaļojumu (border-radius), rezultāts izskatās vizuāli “neglīts” un neprofesionāli veidots.

Vienkārša formula: “ārējais rādiuss mīnus atstarpe”

Lai abas līnijas stūros skrietu smuki paralēli (kā sliedes vai celiņi stadionā), iekšējam aplim ir jābūt asākam nekā ārējam.

To aprēķina ar elementāru formulu:

Iekšējais rādiuss = Ārējais rādiuss – Atstarpe (padding)

See the Pen Inner Radius Design Tip with CSS Custom Properties by Jhey (@jh3y) on CodePen.

Kā tas izskatās dzīvē?

Iedomājies, ka taisi profila kartīti:

1. Tev ir ārējais konteiners, kuram stūri noapaļoti par 30 pikseļiem.
2. Iekšā ir saturs, un malu atstarpe (padding) ir 20 pikseļi.

Lai iekšējais stūris iegultos perfekti, tev no 30 jāatņem 20. Tātad, iekšējās kastes stūriem jābūt 10 pikseļus apaļiem.

Ja iekšējam elementam uzliksi tos pašus 30px, tas izskatīsies saspiests. Ja uzliksi 10px – tas izskatīsies dabiski un glīti.

Gatavs kods, ko nokopēt

Lai nav jārēķina galvā, ļauj pārlūkam to izdarīt tavā vietā, izmantojot CSS funkciju calc(). Šis ir modernākais un vienkāršākais veids:

.areja-kaste {
  /* Tavi izmēri */
  --radius: 30px;
  --atstarpe: 20px;
  
  /* Iestatām ārējo izskatu */
  background-color: #333; /* Tumšs fons */
  border-radius: var(--radius);
  padding: var(--atstarpe);
}

.ieksja-kaste {
  /* Maģija notiek šeit: Ārējais mīnus Atstarpe */
  border-radius: calc(var(--radius) - var(--atstarpe));
  
  background-color: #fff; /* Balts saturs */
  height: 100px;
}