Қазақтар - верстканы сараптайды

Салам жігіттер

Бүгін бізде түскі асқа дизайн болмақ. Естідіңдер ме design eye деген терминді. Кейбір вакансияларда осы сөз кейде көздеседі. Оның мәні сенде дизайнердің талғамы болу керек, яғни оның көзімен қарауды үйрену. Мысалы жақсы дизайн мен жаман дизайнды ажырату үшін. Немесе сол мамандықты толықтай игеру мақсатымен. Ешкімді ойландырмады ма? Неге дизайн продакшенға кетпейді. Егер ол еңбектің соңғы нәтижесі — продакшенға кеткен сайттың құрамында болмаса. Не себепті оған мұқтажбыз. Мысалы кодсыз, базасыз сайт істемейді дерлік, ал psd-cіз сайт жұмыс істей алады ғой? Сөздің мәнін түсіндіңдер ме? Егер frontend разработчиктер дизайн мамандығын игерсе, оған дизайнсыз проектар жасау, түкте емес. Жақсы жақтары ол әрине уақытты үнемдеу, дизайн жасай алам деген резюмеде понт. Ал жаман жақтары бәрібір сен екі есе зарплата ала алмайсың, ал жұмысың көбейеді. Шынайы өмірде бұл тек егер өзіңе жеке сайт жасағанда ғана қажет болу мүмкін.Сонда да кішігірім дизайннан хабардар болу, жақсы frontend-тің кармасын көбейтеді. Сонымен қайта оралайық. Бүгін біз белгілі бір сайттарға кіріп, сол жерде CSS, HTML өзгертіп кішкене ойнаймыз. Ал экспериментіміздің объекті — codeo.kz сайты болмақ. Маған баяғыда Айтылып жатыр деген блок ұнамайтын. Сол блок эстатикалық көзғарасты құртып тұр бүкіл сайттың. Басында админдерге сол блоктағы картинканың дұрыс жасалмағаны тұралы жазғым келген, сосын өзім қалай шешем деп шештім. Ал шешу барысы мынандай болды.

img картинка бар. Ол постың бетбелгісі. Барлығы дерлік жалпақ тік-төртбұрыштың формасына ұқсайды. Ал Айтылып жатыр блокында ол картинка квадрат болу керек. Себебі border-radius: 50% арқылы дөңгелей жасау үшін, барлық қабырғалары тең болу керек. Сол себепті, қазір ол жерде картинка мыжылып қалған шаршыға ұқсайды.

Бірінші шешім

Бұл вариант меніңше ең оңтайлы. Картинканың өзінен border-radius, margin-top алып тастап, оған max-width: 100% және height: auto береміз. Сол кезде ол пропорцияларын сақтайды. Одан кейін оның контейнеріне display: flex беріп, центровка жасаймыз.

<code class="css language-css">.post-img-wrapper {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.post-imt-wrapper img {
  width: auto;
  max-width: 100%;
  height: auto;
  /*margin-top: 5px;*/
  /* border-radius: 50px; */
}
</code>

Екінші вариант

Бұл жерде мен бастапқы варианттың көрініс сақтап қалуды ойладым. Дәлірек border-radius ті clip-path бен алмастырып, background қостым. Әйтпесе дөңгелектің ішінде тік-төртбұрыш қалып қалғандай болар еді. Тағы айтарым clip-path барлық браузерлерде істейді деп уәде бере алмаймын. Поддержкасын қарап, өздерің шешіңдер.

<code class="css language-css">.post-img-wrapper {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: rgba(158, 158, 158, 0.5);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}
.post-imt-wrapper img {
  width: auto;
  max-width: 100%;
  height: auto;
  /*margin-top: 5px;*/
  /* border-radius: 50px; */
}
</code>

Соңғы вариант

Бұл вариант маған бәрінен де қатты ұнайды,

<code class="css language-css">.post-img-wrapper {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: #000;
  -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.post-imt-wrapper img {
  width: auto;
  max-width: 100%;
  height: auto;
  /*margin-top: 5px;*/
  /* border-radius: 50px; */
}
</code>

Дегенмен оны сайт админдары қабылдамайтынына сенімдімін. Ол UI жағынан жақсы көрінгенімен, UX жағынан нашар фидбэк береді. Дәл айтсақ ол жерде постың картинкасында не тұрғаны түкте көрінбейді. Дегенмен егер сендерге осы вариант ұнаса немесе өзіңіздің варианттарың бар болса. Онда сендерге мына плагин ұнайтынына сенімдімін.

Stylebot — қалаған сайтқа өзіңіздің стильдеріңізді жабыстырасыз. Әрине ол стильдер тек сізге ғана көрінеді. Серверде ештеңе сақталмайды. Ол мүмкін емес. Facebook сайтын өзгертсеңіз басқалар сіздің сайтыңызды қарапайым көрсе, сізде жеке вариантыңыз болады. Оны тек сіздің компьютеріңізден көресіз.

Және соңғы сілтеме маған дайын clip-pathдарды сызып берген мынау құрал.