Форма входа

    Бесплатный раздел

    Вы здесь: Главная страница » Файлы » Уроки / Литература / Пособия
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    Использование SVG (часть первая)

    Дата добавления: 11.02.2015 - 07:02
    Добавил: Buger
    Количество просмотров: 2.0k
    Количество комментариев: 0
    Рейтинг материала: 0.0 / 0
    Использование SVG (часть первая)
    БЕСПЛАТНО
    рейтинг 0.0
    /
    голосов 0
    Данная статья/урок будет рассказываться от имени автора данного материала, тем самым не относится к арт юкоз.

    И так, читаем и познаем вместе...

    При создании front-end я разделяю всю графику на две категории:
    “контент” — изображения, которые меняются в зависимости от содежимого
    “UI” — всё, что интегрировано в сайт

    Названия не сильно важны, а вот распознавать эти две категории важно. Мы можем объединять все иконки в один спрайт (что будет рассмотрено во второй части), но никогда такого не сделаешь для изображений, используемых в статье.

    Содержимое
    Для изображений «контента» нет ничего лучше старого доброго . Он будет работать* с SVG и растровыми картинками (PNG, JPEG и др.). Все зависит лишь от того, что загрузит владелец сайта.

    * в том случае, если сервер и CMS не блокируют MIME тип: image/svg+xml

    По моему мнению, хорошая поддержка тэга браузерами не вынуждает нас искать каких-либо альтернатив для работы с SVG.

    Однако!
    При использовании отзывчивого дизайна Internet Explorer не масштабирует , хотя многие этого ожидают. Давайте воспользуемся таким примером:

    Код
    <article class="media">
      <img class="media__image" src="smile.svg" alt="Smiley">
      <div class="media__body">
      <p><strong>Media object with SVG image.</strong> … </p>
      </div>
    </article>

    Код
    .media__image {
      max-width: 20%;
    }

    Тестируя SVG и PNG, обнаруживается ошибка, уникальная лишь для IE (в данный момент SVG поддерживается в версиях 9–11):



    Обычно мы можем задать параметр max-width в CSS, и все картинки будут хорошо масштабированы (но они не станут больше, чем исходное изображение). В IE этот принцип не работает.

    Мы должны сами задать width для изображений. Вот так:
    Код
    .media__image {
      width: 20%;
      max-width: 300px;
    }


    Либо можно задать глобальный параметр max-width для родительского элемента:
    Код
    img {
      display: block;
      width: 100%;
    }

    Код
    .media__image {
      max-width: 20%;
    }

    Код
    <article class="media">
      <div class="media__image">
      <img src="smile.svg" alt="Smiley">
      </div>
      <div class="media__body">
      <p><strong>Media object with SVG image.</strong> … </p>
      </div>
    </article>

    То же самое можно сделать тогда, когда хочется сделать текст обтекаемым рядом с изображением:



    Код
    <article class="prose">
      <img src="smile.svg" class="prose__image">
      <p><strong>Media object with SVG image.</strong> … </p>
    </article>


    В идеале мы должны использовать .prose__image { max-width: 20%; }. В результате будут выполнять эти условия:
    - Может быть шире родительского элемента не более, чем на 20%;
    - Не шире исходного изображения (300px).

    Вывод
    В этом уроке мы поговорили о создании отзывчивых изображений. А почему бы и нет? Дело в том, что неправильно добавлять их с помощью одного лишь тэга . Необходимо как минимум указывать ширину и высоту, а еще лучше создать отдельный элемент для полного контроля над изображением.
    Звучит легко, но, если Вы раньше не использовали SVG, могут возникнуть неприятности с IE.

    В части 2 мы рассмотрим использование SVG для категории «UI».

    Все самое интересное впереди!

    Источник: http://habrahabr.ru/post/250129/
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: