Сколько способов использования свойств css

CSS Макет — Свойство display

Свойство display является наиболее важным свойством CSS для управления макетом.

Свойство display

Свойство display определяет, как элемент отображается.

Каждый элемент HTML имеет отображаемое значение по умолчанию в зависимости от типа элемента. Значением по умолчанию для большинства элементов является block или inline .

Нажмите, чтобы показать панель

Эта панель содержит элемент <div> который по умолчанию скрыт ( display: none ).

Он стилизован под CSS, и мы используем JavaScript для его отображения (измените его на ( display: block ).

Блочные элементы

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

Примеры блочных элементов:

  • <div>
  • <h1> — <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Встроенные (строчные) элементы

Встроенный элемент не начинается с новой строки и занимает столько ширины, сколько необходимо.

Это встроенный элемент <span> внутри параграфа.

Примеры встроенных элементов:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; обычно используется с JavaScript для скрытия и отображения элементов без их удаления и повторного создания. Посмотрите на наш последний пример на этой странице, если вы хотите знать, как этого можно достичь.

Элемент <script> использует display: none; по умолчанию.

Переопределить значение display по умолчанию

Как уже упоминалось, каждый элемент имеет отображаемое значение по умолчанию. Однако вы можете переопределить это.

Замена встроенного элемента на блочный или наоборот может быть полезной для придания странице оригинального вида и при этом соблюдения веб-стандартов.

Типичным примером являются встроенные элементы <li> для горизонтальных меню:

Пример

Примечание: Установка свойства отображения элемента только изменяет способ отображения элемента, а НЕ КАКОЙ это элемент. Таким образом, встроенный элемент с display: block; не может содержать другие элементы блока внутри него.

В следующем примере элементы <span> отображаются как блочные элементы:

Пример

В следующем примере элементы <a> отображаются как блочные элементы:

Почему мы предпочитаем CSS(—variable) переменным SASS($variable)?

С момента релиза CodyHouse Framework, пару месяцев назад, многие пользователи спрашивали нас, почему мы выбрали переменные CSS вместо переменных SASS, хотя мы используем SASS в этой среде. В этой статье я расскажу о преимуществах использования пользовательских свойств и о том, почему они стали решающими в нашем рабочем процессе.

Определение переменных

В этой статье, я предполагаю, что вы знакомы с основами пользовательских свойств CSS и SASS (или любого другого препроцессора CSS). Если нет, давайте начнем с базового примера:

В SCSS:

Собственные, пользовательские свойства позволяют вам определять переменные без необходимости использовать расширения для CSS (т.е. не нужно использовать SASS).

Они одинаковы? На самом деле, нет! В отличие от переменных SASS, пользовательские свойства 1) ограничены элементом на котором они объявлены, 2) каскадом, 3) ими можно управлять в JavaScript. Эти три особенности, открывают целый мир новых возможностей. Позвольте мне показать вам несколько практических примеров!

Создание и применение цветовых тем

Вот пример того, как вы могли бы создать две (упрощенные) цветовые темы, используя переменные SASS:

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

Пока мы придерживаемся упрощенных (нереалистичных) примеров, никаких проблем не возникает. Но что если у нас есть компонент с большим количеством элементов? Нам бы пришлось переписать все свойства, где используются переменные для цвета, и заменить переменные на новые. И если вы измените основной компонент, вы должны дважды проверить все модификаторы. Да… не так удобно!

При создании нашего фреймворка мы придумали другой подход, основанный на переменных CSS. Прежде всего, давайте определим переменные для цвета:

К сведению: в приведенном выше примере мы используем атрибуты data-* для применения цветовой темы, но это не имеет ничего общего с переменными CSS и переменными SASS. Кроме того, мы определили шкалу нейтральных значений, используя номенклатуру на основе «уровня контрастности»

Важным моментом является то, что нам не нужно создавать новые цветовые переменные для нашей второй, третьей, четвертой… (темной) темы. В отличие от SASS, мы можем переопределить значение существующих пользовательских свойств.

Вот как применить переменные цвета к компоненту:

Как насчет темного варианта компонента? Нам не нужны дополнительные CSS. Поскольку мы переопределяем и не заменяем переменные, нам нужно применить правильные переменные для цвета, только при первом создании компонента. Неважно насколько сложным становится компонент, после того как вы установили цветовые темы в файле _colors.scss и применили цветовые переменные к элементам своих компонентов.

Вы можете применять цветовые темы очень простым способом:

В приведенном выше примере мы применили тему «темного» цвета к разделу и тему цвета «по умолчанию» к элементу «.child». Все верно, вы можете вкладывать цветные темы!

Это стало возможным благодаря использованию CSS свойств. Что позволило в кратчайшие сроки делать такие интересные вещи, как эта.

Вот несколько ссылок на тот случай, если вы хотите узнать больше об управлении цветами с помощью фреймворка CodyHouse:

Управление шкалой шрифтов

Модульная шкала — это набор гармоничных(размерных) значений, которые применяются к типографским элементам. Вот как вы можете установить масштаб шрифта в SCSS, используя переменные SASS:

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

При создании фреймворка мы решили включить всю формулу масштаба в файл _typography.scss. Вот как мы устанавливаем масштаб шрифта с помощью переменных CSS:

В чем преимущество такого подхода? Это дает возможность контролировать всю типографскую систему, редактируя только две переменные: —text-base-size (размер базового шрифта) и —text-scale-ratio (множитель масштаба).

«Разве нельзя сделать то же самое, используя переменные sass»? Нет, если вы хотите изменить типографику в определенных точках при медиа-запросах:

Данный фрагмент является краеугольным камнем нашего гибкого подхода. Поскольку мы используем относительные единицы измерения Ems, при изменении —text-base-size (размер базового шрифта) это влияет, как на типографику, так и на интервалы. В итоге вы получаете систему, которая изменяет размеры всех ваших компонентов практически без необходимости задавать медиа-запросы на уровне компонентов.

Вот несколько полезных ссылок по теме:

Управление шкалой расстояний

Шкала интервалов эквивалентна шкале типов, но применяется к пространственным значениям. Еще раз, включение формулы масштаба в структуру позволило нам контролировать систему интервалов и сделать ее отзывчивой:

Этот подход становится особенно мощным в сочетании с методом типографики, рассмотренным выше. С помощью всего лишь нескольких строк CSS вы получите отзывчивые компоненты:

Еще одна вещь, которая мне нравится в использовании модулей Ems вместе с этой системой интервалов, заключается в том, что если размеры интервалов и типографики выглядят правильно в конкретной точке медиа-запроса, они почти наверняка смотрятся правильно на всех точках медиа-запросов, независимо от того, что вы обновляете значение —space-unit. Поэтому, я могу проектировать без необходимости изменять размеры окон браузера (кроме случаев, когда я хочу изменить поведение компонента).

Больше ссылок по теме:

Редактирование «вертикального ритма» на уровне компонентов

В отличие от переменной SASS, мы можем переопределить значение переменных CSS. Одним из способов использования этого свойства, является добавление пользовательских свойств в другие пользовательские свойства, создавая тем самым «элементы управления», которые можно редактировать на уровне компонентов.

Вот пример, когда вы устанавливаете вертикальный интервал для текстового компонента, вы, вероятно, захотите указать line-height и margin-bottom для ваших элементов:

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

… и так каждый раз, если вы захотите обновить «вертикальный ритм».

Вот альтернативный подход, основанный на переменных CSS:

—line-height-multiplier и —text-vspace-multiplier являются двумя переменными управления текстового компонента. Когда мы создаем модификатор класса .text-component, для редактирования вертикального интервала нам нужно только переопределить эти две переменные:

В случае, если вы хотите попробовать сами и взять на заметку:

Абстрагирование компонентов поведения

Возможность переопределить значение компонента можно использовать по-разному. В общем, в любое время, когда вы можете абстрагировать поведение компонента в одной или нескольких переменных, вы облегчаете свою жизнь, когда этот компонент требует редактирования (или вам нужно создать вариант компонента).

Примером является наш компонент Auto Sized Grid, где мы используем CSS-сетку для создания макета, где элементы галереи автоматически заполняют доступное пространство на основе минимальной ширины, заданной в CSS, затем мы абстрагируем значение min-width элементов, храня его в переменной.

Set the min-width of the gallery item, and let our gridAuto mixin do the heavy lifting for you https://t.co/IPkjDHGCSD pic.twitter.com/yfFijBffEv

— CodyHouse (@CodyWebHouse) March 7, 2019

Значение минимальной ширины — это единственное, что нужно изменить при создании варианта компонента сетки Auto Size.

В чем подвох?

В двух словах: поддержка браузерами… Вы можете использовать переменные CSS всеми способами, описанными в этой статье, с помощью плагина PostCss. Есть ряд ограничений для старых браузеров(<IE11). В остальном, можно свободно использовать. Посмотрите нашу документацию, для получения дополнительной информации, об ограничениях использования переменных CSS сегодня.

Могу ли я использовать переменные CSS с препроцессором?

Да! Пока SASS (или любой другой препроцессор) позволяет вам делать то, чего вы не можете делать в CSS, и вам это нужно, почему бы не использовать его? SASS — это не библиотека, которую пользователи должны загружать при доступе к вашему сайту. Это инструмент в вашем рабочем процессе. Мы используем SASS, например, для определения цветовых функций, которые работают с переменными CSS.

CSS Анимации

CSS позволяет сделать анимацию HTML-элементов без использования JavaScript или Flash!

В этой главе вы узнаете о следующих свойствах:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Браузерная поддержка анимации

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

Что такое CSS анимация?

Анимация позволяет элементу постепенно переходить от одного стиля к другому.

Вы можете изменить столько свойств CSS, сколько захотите, и столько раз, сколько хотите.

Чтобы использовать CSS-анимацию, сначала необходимо указать несколько ключевых кадров для анимации.

Ключевые кадры содержат стили, которые элемент будет иметь в определенное время.

Правило @keyframes (ключевые кадры)

Когда вы задаете стили CSS внутри правила @keyframes анимация постепенно изменится с текущего стиля на новый в определенные моменты времени.

Чтобы анимация работала, вы должны привязать её к элементу.

В следующем примере анимация "example" связывается с элементом <div> . Анимация будет длиться 4 секунды и постепенно изменит цвет фона элемента <div> с красного — " red " на желтый — " yellow ":

Пример

/* Элемент, к которому применяется анимация */
div <
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
>

Примечание: Свойство animation-duration свойство определяет, сколько времени анимация должна занять для завершения. Если свойство animation-duration не указано, анимация не будет выполняться, поскольку значение по умолчанию равно 0s (0 секунд).

В приведенном выше примере мы указали, когда стиль изменится, используя ключевые слова "от" и "до" (что соответствует 0% (начало) и 100% (завершение)).

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

В следующем примере будет изменен цвет фона элемента <div> , когда анимация завершена на 25%, завершена на 50% и снова, когда анимация завершена на 100%:

Пример

/* Элемент, к которому применяется анимация */
div <
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
>

Следующий пример изменит цвет фона и положение элемента <div> , когда анимация завершена на 25%, завершена на 50%, и снова, когда анимация завершена на 100%:

Пример

/* Элемент, к которому применяется анимация */
div <
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
>

Задержка анимации

Свойство animation-delay указывает задержку начала анимации.

В следующем примере перед запуском анимация задерживается на 2 секунды:

Пример

Отрицательные значения также допускаются. При использовании отрицательных значений анимация начнется так, как если бы она уже воспроизводилась в течение N секунд.

В следующем примере анимация запустится так, как если бы она уже воспроизводилась в течение 2 секунд:

Пример

Установите, сколько раз анимация должна запускаться

Свойство animation-iteration-count указывает, сколько раз анимация должна запускаться.

В следующем примере анимация будет запущена 3 раза до ее остановки:

Пример

В следующем примере используется значение "infinite" (бесконечно), чтобы анимация продолжалась постоянно:

Пример

Запустите анимацию в обратном направлении или альтернативных циклах

Свойство animation-direction указывает, следует ли воспроизводить анимацию вперед, назад или в чередующихся циклах.

Свойство animation-direction может иметь следующие значения:

  • normal — Анимация воспроизводится как обычно (вперед). Это по умолчанию
  • reverse — Анимация воспроизводится в обратном направлении (назад)
  • alternate — Сначала анимация воспроизводится вперед, затем назад
  • alternate-reverse — Сначала анимация воспроизводится в обратном направлении, затем вперед

В следующем примере анимация будет запущена в обратном направлении (назад):

Пример

В следующем примере используется значение "alternate", чтобы сначала запустить анимацию вперед, а затем назад:

Пример

В следующем примере используется значение "alternate-reverse", чтобы сначала запустить анимацию назад, а затем вперед:

Пример

Укажите кривую скорости анимации

Свойство animation-timing-function задает кривую скорости анимации.

Свойство animation-timer-function может иметь следующие значения:

  • ease — Определяет анимацию с медленным началом, затем быстрым, а затем медленным завершением (по умолчанию)
  • linear — Определяет анимацию с одинаковой скоростью от начала до конца
  • ease-in — Определяет анимацию с медленным стартом
  • ease-out — Определяет анимацию с медленным окончанием
  • ease-in-out — Определяет анимацию с медленным началом и окончанием
  • cubic-bezier(n,n,n,n) — Позволяет определить свои собственные значения в функции кубического Безье

В следующем примере показаны некоторые из различных кривых скорости, которые можно использовать:

Пример

Укажите режим заполнения для анимации

CSS-анимация не влияет на элемент перед воспроизведением первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство animation-fill-mode может переопределить это поведение.

Свойство animation-fill-mode определяет стиль для целевого элемента, когда анимация не воспроизводится (до ее запуска, после ее завершения или в обоих случаях).

Свойство animation-fill-mode может иметь следующие значения:

  • none — Значение по умолчанию. Анимация не будет применять какие-либо стили к элементу до или после его выполнения
  • forwards — Элемент сохранит значения стиля, установленные последним ключевым кадром — зависит от animation-direction (направления анимации) и animation-iteration-count (итеративного подсчета анимации)
  • backwards — Элемент получит значения стиля, заданные первым ключевым кадром — зависит от animation-direction (направления анимации), и сохранит его в течение периода animation-delay (задержки анимации)
  • both — Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях.

В следующем примере элемент <div> сохраняет значения стиля из последнего ключевого кадра после окончания анимации:

Пример

В следующем примере элемент <div> получает значения стиля, установленные первым ключевым кадром, до начала анимации (в течение периода задержки анимации):

Пример

В следующем примере элемент <div> получает значения стиля, установленные первым ключевым кадром до начала анимации, и сохраняет значения стиля из последнего ключевого кадра после завершения анимации:

Пример

Сокращенные свойства анимации

В приведенном ниже примере используются шесть свойств анимации:

Пример

Тот же эффект анимации, что и выше, может быть достигнут с помощью свойства сокращения animation :

Пример

Проверьте себя с помощью упражнений!

CSS Свойства анимации

В следующей таблице перечислены правила @keyframes и все свойства CSS-анимации:

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

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