Я думал, что ненавижу 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 намного больше, чем я думал! Когда я работаю с дизайнером, который действительно хорошо разбирается в цветах и макетах, довольно приятно возиться, пока все не будет выглядеть правильно.
Очень рад закончить этот проект и выпустить его для публики!