<rmcreative>

RSS

Все заметки с тегом «CSS»

Можно уточнить:

  1. Flexbox froggy

    7 февраля 2016

    Попалась отличная обучалка позиционированию элементов методом CSS Flexbox в виде детской игры по перемещению лягушек на листики. Метод отлично поддерживается новыми браузерами и решает большинство типичных проблем вёрстки очень легко.

    Учимся

    4 комментария
  2. Плавная анимация в браузере

    20 февраля 2015

    Добиться плавной анимации при наличии тучи DOM-элементов, да ещё и когда в анимируемом контейнере грузятся картинки и какой-нибудь Google Maps, оказалось не просто. Путь был довольно долг и тернист. Приведу только рецепт:

    1. Не используйте jQuery.animate(). Он тормоз.
    2. Вместо него используйте Velocity.js.
    3. Если возможно, анимируйте только transform: translate, transform: scale, transform: rotate, opacity.
    4. Включайте аппаратное ускорение для анимируемого слоя. Делайте это сразу в CSS, приправьте чёрной магией.

    Если и после этого не помогло:

    1. Попробуйте уменьшить количество DOM-элементов в анимируемом контейнере.
    2. Не стартуйте несколько анимаций единовременно.
    3. Если контент в контейнер подгружается динамически, рисуйте во время анимации эмуляцию контента, как это делает, например, Facebook. Заменяйте на реальный контент как только анимация закончена.
    Комментировать
  3. Выложил исходники своих слайдов

    6 сентября 2014

    Много раз на конференциях просили поделиться исходником моих слайдов. Сегодня нашёл время привести их в более-менее человеческий вид и выложил всё на github.

    4 комментария
  4. Как при помощи CSS выровнять элемент по центру

    5 сентября 2014

    На CSS-Tricks в очень удобном виде опубликовали различные решения по центрированию элемента при помощи CSS практически для всех возможных случаев.

    http://css-tricks.com/centering-css-complete-guide/

    Кроме того, что информация сама по себе полезная, очень нравится подача.

    UPD: и ещё вариант подачи (даже лучше).

    4 комментария
  5. Ускоряемся в вёрстке, вебинар Юрия Артюха

    12 февраля 2014

    1 марта с 11:00 по 12:30 по Киевскому времени в формате вебинара можно будет послушать Юрия «akella» Артюха. Одного из самых опытных верстальщиков и автора cssing.org.ua. Известен он своими статьями и проектами, над которыми работал. Прежде всего kremlin.ru, subscribe.ru, sports.ru, ukr.net, zn.ua, delo.ua и pravda.com.ua.

    Рассказ будет про нешаблонную вёрстку в сжатые сроки и её автоматизацию.

    План:

    • Оптимизируем компьютер.
    • Выжимаем всё из текстового редактора.
    • Фотошоп, или не фотошоп.
    • Автоматизируем генерацию CSS и HTML.
    • Как назвать тот элемент, название которого вы до сих пор не придумали, или ускоряем мозг.

    Стоимость участия на данный момент 240 грн (30$).

    Регистрируемся

    Промо-код на скидку 10%: RMCREATIVE_WEBINAR.

    6 комментариев
  6. Верстаем код с номерами строк

    27 января 2014

    Задачка оказалась не совсем тривиальной. Надо учесть следующее:

    1. Номера могут начинаться с какого угодно числа, могут разрываться, могут быть не числами (например, ... для обозначения того, что часть кода не приводится).
    2. Номера не должны копироваться.
    3. Длинные строки должны переноситься.

    Решается так:

    <table class="code">
        <tr>
            <th data-line-number="1"></th>
            <td>public static function autoload($className)</td>
        </tr>
        <tr>
            <th data-line-number="2"></th>
            <td>{</td>
        </tr>
    .code th:before {
       content: attr(data-line-number);
    }

    Важный момент тут использование data-attributes и псевдо-селектора :before. Первое позволяет расставить номера на стороне сервера, второе — вставить их в ячейку. При этом они не выделяются и не копируются.

    Живой пример

    13 комментариев
  7. Focus transition

    24 сентября 2013

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

    Рассматриваем

    Комментировать
  8. Официальный набор для тестирования под Internet Explorer

    17 сентября 2013

    Microsoft сделала подарок всем, кому необходимо тестировать под Internet Explorer, выложив хороший набор официальных виртуальных машин, покрывающих IE начиная с шестого и заканчивая свежим одиннадцатым.

    Пользуемся

    14 комментариев
  9. LESS Hat

    17 сентября 2013

    Тем, кто рабоатет с CSS-препроцессором LESS или выбирает между SASS, LESS и другими, будет интересна библиотека LESS Hat.

    Библиотека является набором кроссбраузерных миксинов для анимации, теней, градиентов, трансформаций, прозрачности и шрифтов.

    Пользуемся

    Комментировать
  10. Bootstrap 3

    20 августа 2013

    Релизнулся разметочно-стилевой фреймворк Bootstrap версии 3. Что бы там не говорили, но штука очень полезная: экономит время, нервы и результат выходит лучше, чем делать по-быстрому с нуля.

    В версии 3 Bootstrap, наконец, стал по-настоящему независим от Twitter, который его породил, и обзавёлся отдельным сайтом. Стоит отметить следующие изменения:

    • Новый плоский дизайн для упрощения его стилизации. Старый можно вернуть специальной темой.
    • Ещё большая заточенность сетки и компонент под мобильные устройства.
    • По умолчанию для всего используется box-sizing: border-box.
    • Переписали JavaScript-плагины. Обещают, что будет работать лучше.
    • Значки теперь представлены в виде шрифта, а не в виде картинок.
    • Сделали правильные модальные окошки.
    • Добавили панели и группированные списки.
    • Убрали accordion (заменили панелями), подменю, typeahead и ещё всякие мелкие штуки.
    • Именование классов поменялось.
    • Добавили документации.
    • Не поддерживается Internet Explorer 7 и Firefox 3.6. Internet Explorer 8 поддерживается через Respond.js.

    Кстати, в Yii2 Bootstrap 3 и обёртки для него включены в состав фреймворка.

    11 комментариев