Функции из LESS в обычном CSS

Тема в разделе "Мегафлуд", создана пользователем dixonn, 7 май 2015.

  1. dixonn

    dixonn Постоялец

    Регистр.:
    25 май 2011
    Сообщения:
    53
    Симпатии:
    20
    В LESS есть такая хорошая штука как светлее (lighten) и темнее (darken).
    Пример такого кода: lighten(#000, 13.5%)
    Это означает, что если наложить этот эффект на любой цвет, то он посветлеет (#000 - белый цвет) на 13,5%.
    http://lesscss.org/functions/#color-operations

    Так вот... У меня есть класс со стилем, в котором прописано значение background: #428bca;
    Я хочу применить к этому классу добавочный стиль, который сделает этот цвет немного светлее, как в примере с LESS.
    Как это сделать силами CSS3 ?
     
  2. nejtr0n

    nejtr0n Постоялец

    Регистр.:
    24 янв 2014
    Сообщения:
    95
    Симпатии:
    38
    opacity не то?
     
  3. dixonn

    dixonn Постоялец

    Регистр.:
    25 май 2011
    Сообщения:
    53
    Симпатии:
    20
  4. nejtr0n

    nejtr0n Постоялец

    Регистр.:
    24 янв 2014
    Сообщения:
    95
    Симпатии:
    38
    Все примеры для IE.
    По первой ссылке если приглядеться - opacity=50 ( filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50));
    То есть тот же самый opacity в нормальном браузере.
    По второй не пробовал, что за Lighten. Но наверняка есть аналог в других браузерах.
     
  5. dixonn

    dixonn Постоялец

    Регистр.:
    25 май 2011
    Сообщения:
    53
    Симпатии:
    20
    Мой предыдущий пример работает лишь с js. Так что он отпадает. Еще варианты есть, как заменить LASS?
     
  6. nejtr0n

    nejtr0n Постоялец

    Регистр.:
    24 янв 2014
    Сообщения:
    95
    Симпатии:
    38
    JavaScript - императивный, CSS - декларативный.
     
  7. dixonn

    dixonn Постоялец

    Регистр.:
    25 май 2011
    Сообщения:
    53
    Симпатии:
    20
    Вообщем сделал просто другим цветом и не парился :D
     
  8. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    179
    Можно, таки, использовать opacity для этого, только не на этом background-е, а добавить ещё один #fff поверх и к нему opacity 0.15 - это если надо светлее.
    Или #000 с opacity 0.15 - если надо темнее.
    Можно это сделать через before/after.
    Вот например:
    http://xx0.ru/asd/transform1.html
    Я там кому-то косую прозрачную линию делал. Но и для Вас подойдёт, просто замените opacity 0.8 на 0.15.
     
    Последнее редактирование: 8 май 2015