<rmcreative>

RSS

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

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

  1. CSS reset Мейера 2

    27 января 2011

    В новой версии CSS-ластика, предназначенного для выравнивания начальных условий при вёрстке под разные браузеры, произошли некоторые изменения:

    • Больше не сбрасывается тег font, свойство outline и фон не выставляется в прозрачный.
    • Всем сбрасываемым элементам выставляется font: inherit.
    • Добавлены в сброс article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video.
    • Убраны правила для ins и del.
    • Добавлено правило для элементов HTML5:
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
        display: block;
    }

    Пользуемся

    3 комментария
  2. Сложное обтекание текстом

    26 января 2011

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

    Если картинка квадратная, то решается наша задача довольно просто. Свойство float с соответствующим значением left или right вполне решает нашу проблему. Но что же нам делать с яблоком?!

    На самом деле наше яблоко почти ничем не отличается от квадратного… разве что квадрат получается не один.

    Текст будет идти в две колонки, поэтому мы делим яблоко на две части. Далее сверху вниз у нас выходят отступы с разной шириной. На каждый из таких отступов заводим отдельный элемент div. Сразу после блоков- отступов размещаем текст.

    Для лучшего понимания можно навести мышь на яблоко и посмотреть код.

    23 комментария
  3. Каскад background-а для table в IE7

    16 декабря 2010

    Сегодня IE7 преподнёс неприятный сюрприз. Необходимо было положить фоновую картинку под table. Положил. Проверил в IE8 и остальных. Порадовался. Открыл IE7 и был немного удивлён тем, что картинка повторяется. Сначала подумал на несрабатывание no-repeat, но оказалось, что background, заданный для table, в IE7 каскадируется на каждую td. Итого, чтобы положить фон под всю таблицу пришлось:

    /* задать фон */
    #mytable {
      background: url(/images/table-bg.png) no-repeat 0 0;
    }
     
    /* вернуть прозрачный фон ячейкам */
    #mytable td {
      background: transparent;
    }

    И, всё-таки, как приятен IE после Outlook…

    3 комментария
  4. Premailer

    14 декабря 2010

    Premailer — похоже, единственный бесплатный инструмент, хоть как-то облегчающий участь тех, кому приходится верстать HTML-письма. На вход подаём наш HTML с CSS в head → style. Отдаётся:

    • HTML, по возможности, без тега style со всеми стилями, применёнными inline.
    • Относительные ссылки заменены на абслютные.
    • То, что нельзя вынести в inline, например, :hover остаётся в head.
    • Куча предупреждений по совместимости с почтовыми клиентами.
    • Текстовая версия письма.

    Пользуемся

    5 комментариев
  5. CSS3 PIE стал частью Sencha Labs

    11 ноября 2010

    CSS3 PIE, добавляющий в IE border-radius и другие приятные плюшки нового CSS, стал частью фонда Sencha Labs. То есть фактически будет спонсироваться Sencha (бывшей Ext JS). Ранее в Sencha Labs вошли такие проекты, как Raphaël, JavaScript InfoVis Toolkit и jQTouch.

    CSS3 PIE останется бесплатным и открытым, но, думаю, развиваться будет теперь быстрее.

    1 комментарий
  6. Как прописать путь

    20 октября 2010

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

    Читаем

    12 комментариев
  7. Странная рамка вокруг input[type=submit] в Opera

    12 августа 2010

    Opera, в отличие от IE, не так часто «радует» странностями, но иногда, как и у остальных браузеров, случается.

    Тестовый наборчик (воспроизводится на последнем релизе, Windows)

    При фокусе на input[type=text] вокруг submit появляется чёрная однопиксельная рамка. Так как для кнопки использован border-radius, а рамка у нас прямоугольная, логично предположить, что это не border. Также проверил, что это не outline.

    Вадим Макеев подтвердил, что это такая фича, означающая, что форма в данный момент находится в фокусе, а кнопка с чёрной рамочкой её сабмитит. Работает это таким образом только на Windows. Ну и так как такое поведение желательно не всегда, в будущих версиях рамочка либо будет убрана совсем, либо будет документирована и её будет возможно убрать.

    Пока же единственный способ решить данную проблему — обернуть кнопку дополнительным элементом, задать самой кнопке border: none, а обёртке соответствующий border и border-radius.

    15 комментариев
  8. CSS3PIE

    14 июля 2010

    Появилась альтернтива ie-css3.htc, добавляющего IE поддержку теней от блока и текста и уголков CSS3.

    На данный момент в CSS3PIE поддерживаются:

    • border-radius.

    • box-shadow.

    • border-image.

    • несколько background.

    • линейный градиент как фон.

    Планируется поддержка других возможностей.

    Пользуемся

    2 комментария
  9. Все префиксированные CSS-свойства на одной странице

    10 июля 2010

    Peter Beverloo собрал полезную табличку, показывающую префиксированные CSS-свойства для Gecko (FF), WebKit (Safari, Chrome), Presto (Opera) и Trident (IE).

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

    Комментировать
  10. Кроссбраузерный градиент

    23 июня 2010

    Онлайн-генератор, позволяющий получить код кроссбраузерного градиента.

    Для IE используется фильтр, растягивающий PNG. Для Opera — SVG.

    Пользуемся

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