<rmcreative>

RSS

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

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

  1. Лишний border у треугольников в Firefox

    20 декабря 2012

    Часто для того, чтобы изобразить треугольник на CSS использют технику slants. То есть элемент в 0px шириной и высотой c тремя border приличной ширины и одним нулевым. В этом блоге так оформлены уголочки у количества комментариев к постам на главной. Типичный код для этого выглядит так:

    .triangle {
        width: 0;
        height: 0;
     
        border-top: 0;
        border-bottom: 60px solid #fee;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
    }

    FF и раньше чудил с отрисовкой треугольничков. Ту багу поправили, появилась новая:

    Firefox CSS slant bug

    Серый border в один пиксель тут явно лишний. Ни в одном другом браузере его нет.

    Методом проб и ошибок поправил, но логики за всем этим так и не разглядел. Рабочий вариант без артефактов:

    .triangle {
        width: 0;
        height: 0;
     
        border-top: 0;
        border-bottom: 60px solid #fee;
        border-left: 40px solid rgba(255, 255, 255, 0);
        border-right: 40px solid rgba(255, 255, 255, 0);
    }

    Посмотреть вживую

    UPD: вместо rgba можно использовать -moz-border-top-colors: transparent;.

    Проявляется только в Windows и Linux.

    Баги в трекере mozilla:

    UPD: в 2016 это исправили.

    12 комментариев
  2. Книга «Инлайновый контекст форматирования»

    29 сентября 2012

    Максим Усачёв (psywalker) и Илья Стрельцын (SelenIT) раскрывают в деталях, аж на 70 страниц, тему строчного контекста форматирования в CSS.

    Читаем

    2 комментария
  3. Свой input[type=file] 2

    8 сентября 2012

    Нашлось ещё одно решение проблемы стилизации input[type=file], о которой я уже писал. Прошлое решение не требует JavaScript для самой подмены кнопки, но всё-равно требует его для эмуляции hover и title.

    Второе решение требует минимума JavaScript, точно работает в IE7+, Opera, Chrome, Safari, FF, никак не ограничивает в стилизации кнопки и изначально не имеет проблем с hover и title:

    +

    Читаем

    17 комментариев
  4. Свой input[type=file]

    31 июля 2012

    Иногда стандартное поле для загрузки файла ну совсем не вяжется с остальным дизайном страницы. В лоб подменить его нельзя, зато можно взять хитростью:

    +

    Читаем

    13 комментариев
  5. Правильные модальные окна

    5 июля 2012

    Обычно модальные окна и диалоги делаются при помощи плагинов jQuery. Например, SimpleModal или jqModal. К сожалению, все они, в варианте по умолчанию, работают неправильно.

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

    По этому принципу работает просмотр фото в Facebook и Вконтакте.

    Для реализации подобного функцианала частенько нагромождают тонны JavaScript, хотя можно обойтись почти чистым CSS (за исключением навешивания одного класса на контейнер).

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

    Немного прокомментирую:

    /* Данный класс навешивается на контейнер при открытии модального окна. Для нормальных браузеров это body, для стырах IE — html */
    .lock {
        /* Скрываем скроллбары */
        overflow: hidden;
    }
     
    .modal {
        /* По умолчанию не показываем содержимое модальных окон */
        display: none;
    }
     
    .lock .modal {
        /* Показываем подложку (полупрозрачное затенение) при открытии модального окна */
        display: block;
     
        /* Саму подложку фиксируем и растягиваем на всё пространство */
        position: fixed;
        bottom: 0; left: 0; top: 0; right: 0;
     
        /* Если содержимое модального окна в подложку не влезает — показываем скроллбары */
        overflow: auto;
    }

    UPD: оформил в плагин jQuery

    32 комментария
  6. Foundation 3

    30 июня 2012

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

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

    • Пробуем

    • Документация и демонстрация возможностей
    13 комментариев
  7. Бескартиночные треугольники и FF

    13 июня 2012

    В данном блоге для оформления трегольников у блока с количеством комментариев используется довольно старая техника, позволяющая обойтись без изображений. Всё бы хорошо, но последняя версия FF рисует вместо аккураного треугольника размытое месиво. К сожалению, решение пока не найдено. Если знаете — подскажите.

    UPD: вот так это выглядит в моём FF 13.0 под Windows 7.

    Лечится через Options → Advanced. Нужно убрать галку с Use hardware acceleration when available.

    9 комментариев
  8. Можно ли использовать в браузере X штуку Y

    29 мая 2012

    На подобные вопросы отлично отвечает ресурс caniuse.com.

    Есть данные о:

    • CSS (@font-face, Media Queries, …).
    • HTML5 (Canvas, WebGL, …).
    • JS API (CORS, Web Sockets, …).
    • SVG.
    • И другом (Data URLs, XMLHttpRequest 2, …)

    Информация предствлена в виде удобных таблиц.

    Пользуемся

    Комментировать
  9. CSS3 PIE 1.0

    16 мая 2012

    Вышел релиз библиотеки PIE 1.0, котрая добавляет в IE 6, 7 и 8 поддержку некоторых возможностей CSS3: boder-radius, box-shadow, border-image, border-image и несколько фоновых изображений.

    Пользуемся

    2 комментария
  10. 20 лет Wolfenstein

    10 мая 2012

    ID Software, по случаю двадцатилетия игры-первопроходца жанра 3D-action, дала всем желающим бесплатно поиграть в версии для iPhone и iPad. Как приятное дополнение — можно поиграть прямо в браузере. Решив посмотреть, что же внутри этой версии, я был немного удивлён тому, что построена она на спрайтах и div-ах.

    4 комментария