<rmcreative>

RSS

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

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

    (1)
    (1)
    (2)
    (1)
  1. Ускоряемся в вёрстке, вебинар Юрия Артюха

    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 комментариев
  2. Верстаем код с номерами строк

    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 комментариев
  3. Официальный набор для тестирования под Internet Explorer

    17 сентября 2013

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

    Пользуемся

    14 комментариев
  4. 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 комментариев
  5. Foundation 3

    30 июня 2012

    Вышла третья версия фреймворка Foundation. Скорее всего вы слышали о популярном Twitter Bootsrap. После него большинство фреймворков смотрится блекло: элементов меньше, разметка ещё нелогичней, куча багов и ничего нового. Так вот Foundation отличается от Bootstrap в лучшую сторону:

    • Разметка более лаконичная и логичная.
    • Заточен для работы с кучей всяких устройств. Можно контролировать, как именно будет выглядеть сайт при каких параметрах экрана. Имеется очень гибкая адаптивная сетка.
    • Для всего используется box-sizing: border-box.
    • Неплохие наборы кнопочек, формочек, менюшек и мелких элементов.
    • Табы, галерея и модальные окошки, которые отлично работают на всех устройствах.

    • Пробуем

    • Документация и демонстрация возможностей
    13 комментариев
  6. Запретить выделение текста средствами браузера

    25 июля 2011

    Иногда полезно запретить выделение какого-либо текста. Например, когда этот текст располагается на элементе, выполняющем функции скроллбара.

    Пример:

    Попробуйте выделить и скопировать этот текст.

    Для основных браузеров достаточно следующих стилей:

    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    IE приходится обучать отдельно:

    <div unselectable="on">текст</div>

    UPD: допиленное решение mihdan-а.

    15 комментариев
  7. Как прописать путь

    20 октября 2010

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

    Читаем

    12 комментариев
  8. ZenCoding 0.6 для Notepad++

    8 марта 2010

    В Notepad++ добавлена поддержка Zen coding 0.6. Долгое время реализовать это было затруднительно, но после того, как sieukrem добавил в Notepad++ поддержку JavaScript, Сергей Чикуёнок реализовал задуманное.

    Забрать можно из файлов проекта на Google Code

    3 комментария
  9. Zen Coding для Akelpad и cheat sheet-ы

    25 января 2010

    К проекту Zen Coding, позволяющему быстро набирать HTML и CSS, добавилась частичная поддержка Akelpad и шпаргалки.

    Всё это можно забрать из файлов проекта

    Комментировать
  10. Рендеринг: отрисовка, перерасчет дерева / макета, стилизация

    31 декабря 2009

    Перевод довольно подробной статьи о процессе отрисовки HTML и CSS.

    Читаем

    Комментировать