x
 
Илья Бирман
13 сентября 2012

Кстати, Артём, а как верстать радиокнопки имени Плотникова? Чтобы всё ровно попадало куда надо.



Илья!

Надёжного решения, сохраняющего родные «шкурки» системы и браузера, я не знаю, и сделал бы всё картинками, стилизовав все другие радиогруппы на сайте. Достаточно просто сверстать эти кнопки «пиксель в пиксель», используя обычные картинки, ЦСС 3 или СВГ.

Если это неприемлемо и надо отталкиваться от настоящих элементов, я бы искал способ подложить копьё и зеркало под абстрактные радиокнопки, выравняв их относительно центра. Вот что у меня получилось в первом приближении:



Cкриншот кнопок в Виндоусе с классической темой оформления, браузер — ИЕ:

Виндоус 7, кнопки поехали:

Опера на Маке, тоже есть, что подвигать:

Хром и Сафари, красота:

Айпад, нужен вектор:


ХТМЛ получился таким:

<div class="radio">
  <label>
    <span class="input">
      <input type="radio" name="plotnikov" checked>
    </span>
  <span class="label">не указан</span>
</label>
</div>
<div class="radio">
  <label>
    <span class="input input--male">
      <input type="radio" name="plotnikov">
    </span>
    <span class="label">мужской</span>
  </label>
</div>
<div class="radio">
  <label>
    <span class="input input--female">
      <input type="radio" name="plotnikov">
    </span>
    <span class="label">женский</span>
  </label>
</div>

ЦСС:

.radio {
  display: table-row;
  /* * — для ИЕ 7− */
  *display: block;
  *zoom: 1;
  font-family: Verdana, sans-serif;
  font-size: 11px;
}
.radio .input {
  /* Табличность — для простого
  выравнивания по вертикали */
  display: table-cell;
  *display: inline;
  *zoom: 1;
  width: 28px;
  height: 28px;
  text-align: center;
  vertical-align: middle;
}
.radio .input--male,
.radio .input--female {
  background: url('sex.sprite.png') no-repeat;
}
.radio .input--male {
  background-position: -28px 0;
}
.radio .input--female {
  background-position: 0 0;
}
.radio .input input {
  margin: 0;
}
.radio .input input:not(:checked) {
  /* Чтобы кругляшок
  не просвечивал в АйОСе */
  background: #fff;
}
.radio .label {
  display: table-cell;
  *display: inline;
  *zoom: 1;
  height: 28px;
  vertical-align: middle;
}

Главная проблема в том, что кнопки непредсказуемо съезжают в разном окружении, несмотря на стили. Я не поленился бы расставить их по местам грязными хаками в каждом отдельном браузере, но не готов советовать этот путь другим.

Быть может, уважаемые советчики подскажут лучшее решение?


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Что дизайнеру стоит знать о якорных ссылках? Чем дизайнеру могут помочь инструменты разработчика? Анализ сетевых запросов Чем плоха стилизация по айди? Вредные комментарии: зарубки, тудушки и документашки




Недавно всплыло

Как подружить иконки. Цвет 1 Защититься от случайного нажатия «Сдаться» 1 2 Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5