Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.03.2013, 18:04
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Для тех кто юзает LESS кину сюда MIXIN линейных градиентов.
Для тех кто юзает LESS кину сюда MIXIN линейных градиентов.

Может кому то пригодиться:

/**
* Использование:
*   .linear-gradient(top, #00ff00, #ff0000);
*   .linear-gradient(left, #00ff00, #ff0000, important);
*/
.linear-gradient(@direction: left, @start_color: #124661, @stop_color: #1d6287, @_important: none) {
    @svg-keyword: ~`"@{direction}"=="left"?"100%25%22%20y2%3D%220":"0%25%22%20y2%3D%22100"`;
    @webkit-keyword: ~`"@{direction}"=="left"?"right top":"left bottom"`;
    @w3c-keyword: ~`"@{direction}"=="left"?"to right":"to bottom"`;
    @filter-keyword: ~`"@{direction}"=="left"?"1":"0"`;
    @important: ~`"@{_important}"=="none"?"":"!important"`;
    @svg_start_color: escape("@{start_color}");
    @svg_stop_color: escape("@{stop_color}");
    background-color: @start_color @important;
    background-image: ~"url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3ClinearGradient%20id%3D%22g%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22@{svg-keyword}%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22@{svg_start_color}%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22@{svg_stop_color}%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E)" @important;
    background-image: -webkit-gradient(linear, left top, @webkit-keyword, color-stop(0, @start_color), color-stop(1, @stop_color)) @important;
    background-image: -webkit-linear-gradient(@direction, @start_color, @stop_color) @important;
    background-image:    -moz-linear-gradient(@direction, @start_color, @stop_color) @important;
    background-image:     -ms-linear-gradient(@direction, @start_color, @stop_color) @important;
    background-image:      -o-linear-gradient(@direction, @start_color, @stop_color) @important;
    background-image:         linear-gradient(@w3c-keyword, @start_color, @stop_color) @important;
    filter: ~"progid:DXImageTransform.Microsoft.Gradient(StartColorStr='@{start_color}', EndColorStr='@{stop_color}', GradientType=@{filter-keyword})" @important;
    &,#ie#fix {
        /* Выключаем фильтр в ИЕ9 но оставляем в ИЕ7-8 */
        zoom: 1; /* Для ИЕ7 нужно что бы у элемента был включен режим hasLayout */
        filter: ~"expression(this.currentStyle.filter)" @important;
    }
}
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #2 (permalink)  
Старый 06.03.2013, 19:14
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Лучше юзать stylus, я пересел и теперь не представляю, как раньше юзал LESS А к нему есть хорошая либа nib (делают чуваки из Яндекса), которая реализует большинство новых стилей.

http://learnboost.github.com/stylus/
Препроцессор поддерживает переменные, миксины, наследование селекторов, функции, циклы, массивы и куче всего и причём использовать реально удобно) Имеет двойной синтаксис: CSS/C подобный (типа LESS) и Ruby/Python (типа SAAS).
В сравнении с SAAS, то реально лучше у Stulys реализовано parent reference.

ЗЫ: в stylus есть rest интерфейс вызова функций, который позволяет вызывать функцию как стиль CSS, т.е. внешне не отличаются от CSS.
__________________
kobezzza
code monkey

Последний раз редактировалось kobezzza, 06.03.2013 в 19:46.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Для тех кто любит простые сложные задачи dmonco Элементы интерфейса 2 26.05.2012 10:04