Я думал, что ненавижу CSS! Меня всегда больше интересовало, как вещи работают, а не то, как они выглядят. Тем не менее, моя последняя задача на работе заключалась в том, чтобы взять наш регистратор доменов и инструмент управления DNS, домены Daplie, и сделать его «красивым».

Наш дизайнер, JD, сделал очень стильный дизайн пользовательского интерфейса, и я пытался обновить наш старый сайт, сделать его презентабельным и готовым к публичному выпуску. Хотя, по общему признанию, утомительно кропотливо пытаться сделать так, чтобы каждая деталь точно соответствовала дизайну, воображению осталось очень мало. Приятно не тратить слишком много времени на «выяснение чего-либо» и просто заниматься проблемой, на которую я уже знаю ответ!

Одним из моих любимых триумфов было создание кнопки «переключатель». Это три слоя цвета, когда он активен, и два слоя цвета, когда он неактивен. В итоге я сделал два круглых элемента div друг над другом, чтобы добиться желаемого эффекта.

Сначала я попытался использовать значок с потрясающим шрифтом, но не смог получить темно-фиолетовую рамку вокруг индикатора «Вкл.». Эффект «Выкл.» представляет собой красный кружок, который на 1 пиксель шире белого круга, а индикатор «Вкл.» представляет собой фиолетовый кружок, который на 1 пиксель шире, чем другой фиолетовый кружок с толстой белой рамкой, чтобы придать фиолетово-белый цвет. фиолетовый, чего и требовал дизайн. Наконец, немного манипуляций с z-index, чтобы окружности располагались друг над другом, а затем немного Javascript для переключения классов CSS.

.dap-toggle-dot-on-bg {
  margin: 2px 0 0 12px;
  padding-right: 5px;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  background-color: #7464ED;
  z-index: 2;
  position: absolute;
}

.dap-toggle-dot-on {
  margin: 3px 0 0 13px;
  padding-right: 5px;
  border-radius: 50%;
  border: 2px solid white;
  height: 12px;
  width: 12px;
  background-color: #7464ED;
  z-index: 3;
  position: absolute;
}

.dap-toggle-dot-off-bg {
  margin: 2px 0 0 12px;
  padding-right: 5px;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  background-color: #D0011B;
  z-index: 2;
  position: absolute;
}

.dap-toggle-dot-off {
  margin: 3px 0 0 13px;
  padding-right: 5px;
  border-radius: 50%;
  height: 12px;
  width: 12px;
  background-color: white;
  z-index: 3;
  position: absolute;
}

В общем, оказалось, что мне нравится работать с CSS намного больше, чем я думал! Когда я работаю с дизайнером, который действительно хорошо разбирается в цветах и ​​макетах, довольно приятно возиться, пока все не будет выглядеть правильно.

Очень рад закончить этот проект и выпустить его для публики!