Использование CSS с угловым стилем

Я использую Angular, чтобы пользователь мог изменить цвет навигационной панели. Фактическое изменение цвета фона достаточно простое, но я также хочу изменить некоторые связанные элементы, такие как пограничный цвет и некоторые из теней.Использование CSS с угловым стилем

Что у меня есть:

<nav class="navbar navbar-default" ng-style="{ 'background-color': user.topBarBackgroundColor }">

Как бы я идти об использовании user.topBarBackgroundColor определить некоторый оттенок (например, более темный оттенок) для границы NavBar, в особо li с, и т.д.?

Обратите внимание, что цвет текста может быть изменен независимо, поэтому любые методы должны применяться к этому также параллельно.

EDIT

мне нужно только это работать в современных браузерах, поэтому любой принятой CSS3, HTML5, и т.д. справедливая игра

источник

2014-12-15 tyler

Короче говоря, вам нужно будет рассчитать более темную версию этого цвета. Я сделал аналогичные вещи и использовал javascript для преобразования между цветовыми пространствами и расчета более темных/светлых цветов. – Ted

@Ted вы относительно уверены, что нет каких-либо CSS3-трюков, которые можно сделать? Например. является ли подход JS одним возможным маршрутом, который будет работать, или это будет только ** маршрут, который будет работать? – tyler

Это зависит от того, чего вы надеетесь достичь - вы могли бы использовать контуры/границы/тени теней и т. Д., Которые являются прозрачными черными/белыми значениями ... но трудно сказать, будет ли это работать или нет без живого образца – Ted

Я решил, создав .navbar-rgba-colors класс и добавить его в .navbar элемент. CSS (LESS) ниже перекрывает соответствующее начальную загрузку по умолчанию:

.navbar-rgba-colors { 
    border-color: rgba(0,0,0,0.2); 
    .navbar-nav > li > a, 
    a.navbar-brand { 
    opacity: 0.7; 
    } 
    .navbar-nav > li:hover > a, 
    .navbar-nav > li > a:focus, 
    .navbar-nav > li.active > a, 
    .navbar-nav > li.active > a:hover, 
    .navbar-nav > li.active > a:focus, 
    .navbar-nav > li.open > a, 
    .navbar-nav > li.open > a:hover, 
    .navbar-nav > li.open > a:focus 
    a.navbar-brand:hover, 
    .navbar-header:hover > a, 
    a.navbar-brand:focus { 
    opacity: 1; 
    background: rgba(255, 255, 255, 0.1) !important; 
    } 
}

opacity изменения делает текст ярче при наведении курсора мыши, в то время как background делает целенаправленный/активный элемент a выглядеть светлее, а также.

Тогда я реализовал в HTML так:

<nav class="navbar navbar-default navbar-rgba-colors" ng-style="{ 'background-color': user.topBarBackgroundColor }">

и для любых a элементов в навигационной панели:

<a ... ng-style="{ color: user.topBarColor }">Home</a>

Теперь изменяя значения шестнадцатеричных для topBarBackgroundColor и topBarColor изменяет цвет фона и цвет текста на панели навигации, соответственно. Я использую для этого angular-bootstrap-colorpicker, и он работает хорошо.

источник

2014-12-16 05:30:39 tyler

Использование CSS с угловым стилем

ответ

Смежные вопросы