Управление освещением
    Презентации
    Технические решения на LogicMachine
    Визуализация
      evika.ru    Технические решения на LogicMachine    Работа с css – каскадными таблицами стилей

    Работа с css – каскадными таблицами стилей

    Часто приходится сталкиваться с невозможностью применения стандартных элементов в том или ином дизайне визуализации. Как пример имеем стандартные управляющие элементы:

    css

    css

    Дизайнеры видят решение в таком виде:

    css

    css

    Будем приводить стандартные элементы к желаемым с помощью возможности LogicMachine — Custom css. Редактор можно найти в разделе LogicMachine — > Графика -> Редактировать пользовательский CSS (Logic Machine – Vis. Graphics – Custom css).

    css

    css

    Изменение стилей в Пользовательском CSS приведёт их к изменению во всей визуализации, если не применять дополнительные классы.

    Начнем с горизонтальных слайдеров.

    Для начала требуется сделать их «тонкими» и с прозрачным фоном:

     
    .progress {
    	background-color: #382d2b;
    	height: 2px;
    	  border: 1px #7f655a solid !important;
    }

    И изменим их размер:
     
    .slider-h .slider {
    	width: 240px;
    	padding: 31px 0px;
    }
    .slider-h .slider .progress {
    	margin: 0px 0px;
    	width: 238px;
    }

    Далее убираем кнопки минимума и максимума, оставляя место под них (так удобнее будет выравнивать слайдеры в конструкторе):
     
    .slider-min.icon {
    padding: 5px 5px;
    visibility: hidden;
    }
     
    .slider-max.icon {
    padding: 5px 5px;
    visibility: hidden;
    }

    Для замены «бегунка» слайдера будем использовать кодирование картинки в формат BASE64 и вставим картинку сразу в css. Для кодирования я использовал данный сервис http://www.base64-image.de/:

    .slider-handle{
    padding: 0px 0px !important;
    width:            61px !important;
    height:           61px !important;
    background-image: url("data:image/png;base64,iVBORw0K… (код картинки)");
    background-color: transparent !important;
    border: 0px;
    box-shadow: none !important;
    }

    Здесь так же указывается, что нам не нужен фон (будет прозрачным) и не нужны границы и тени.

    Для отключения визуальных эффектов при выставлении значения в слайдере применим следующий код:

     
    .slider-handle:hover { background-position: 0 0; }
     
    .slider-handle:hover { background-color: transparent; }

    Получилось вот так,

    css

    Исходя из макета,  во втором столбце нам нужны другие «бегунки». Для этого в объектах, отвечающих за эти слайдеры, сделаем дополнительный класс

    css

    В данном случае класс имеет название sliderdark, но в целом это непринципиально. Теперь необходимо прописать для дополнительного класса свой «бегунок». Правим только те позиции, которые отличаются от базового «бегунка»:

    .sliderdark .slider-handle{
     
    background-image: url("data:image/png;base64,iVBORw….. ");
     
    background-color: transparent;
     
    border: 0px;
     
    box-shadow: none !important;
     
    }

    Также с помощью параметра !important указываем браузеру на необходимость использования именно этих параметров.

    Получилось вот так:

    css

    С первым планом закончили. Переходим ко второму. Так он выгладит на данный момент.

    css

    Необходимо сделать progress bar тонким и сделать ему нужный размер:

     
    .slider-v .slider .progress {
    bottom: 0;
    left: 35px;
    right: auto;
    top: 0;
    width: 2px;
    }
     
    .slider-v .slider {
    height: 295px;
    width: 3px;
    padding: 0px 33px;
    }

    Получилось вот так:

    css

    Осталось поменять сам «бегунок» на необходимый. Аналогично применяем дополнительный класс. Пусть это будет sliderbronze:

    .sliderbronze .slider-handle{
     
    background-image: url("data:image/png;base64,iVBORw0….") !important;
     
    background-color: transparent;
     
    border: 0px;
     
    box-shadow: none !important;
     
    }

    Результат:

    css

    Что и требовалось изначально.




    Copyright
    © Embedded Systems Rus
    2017. All Rights Reserved