Добавляем Box Shadow (z-глубину) в компоненты Angular Material 2

Добавляем Box Shadow (z-глубину) в компоненты Angular Material 2

От автора: Angular Material 2 стала легче и проще в использовании, и я немного поигралась с этой библиотекой. Как увидите ниже, я поэкспериментировала с цветами. :)

Добавляем Box Shadow (z-глубину) в компоненты Angular Material 2

Теперь можно использовать на компонентах класс md-elevation (спасибо, Elad, что показал мне это!)! Класса еще нет в документации, но есть ссылка на репозиторий Angular Material 2 на github.

В документацию скоро добавят описание принципа работы класса md-elevation, он довольно прост. Ниже я объясню вам, как его использовать.

Для изображений, карточек, кнопок и т.д. просто добавьте class=»md-elevation-zX», где «Х» может быть любым числом от 1 до 24. Пример всех значений.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Добавляем Box Shadow (z-глубину) в компоненты Angular Material 2

Слишком много значений для меня, MaterializeCSS обычно сужает выбор до 6 вариантов. Поэтому я представила ниже свои эквиваленты. Шаг класса md-elevation должен быть z2, z3, z4, z5, z9, z15.

Добавляем Box Shadow (z-глубину) в компоненты Angular Material 2

Ниже показано мое радужное сравнение! В первом случае используется класс md-elevation, во втором все еще z-depth.

Добавляем Box Shadow (z-глубину) в компоненты Angular Material 2

Если интересно, вот код.

Вот так я делал, когда не знал про класс md-elevation. Я понял, что класс очень полезен, когда хотел создать или поменять глубину тени в компонентах точно так же, как я это делаю в MaterializeCSS с помощью класса «z-depth-4» и т.д. (документация по ссылке).

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Стили я взял с репозитория MaterializeCSS на github отсюда.

Можете скопировать эти стили в свой файл style.css в проект angular-cli и использовать их глобально с помощью следующей записи:

Получаются вот такие симпатичные кнопки.

Добавляем Box Shadow (z-глубину) в компоненты Angular Material 2

И код кнопок выше.

Надеюсь, моя статья поможет вам! :) С уважением, Трейси

Автор: Tracy Lee

Источник: https://medium.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree