Компонент Утилита Utility

Коллекция полезных классов для стилизации вашего контента. Адаптивные объекты. Вспомогательные классы.

Комбинирование различных радиусов скругления с тенями у элементов при наведении. Прикольная заглавная буква. Отображение логотипа в зависимости от цветового режима. Точка трансформации элемента. Режим смешивания цветов выбранного элемента с низлежащими слоями.

Panel

Блочная панель для разделов сайта

Фреймворк UIkit использует блочные панели для выделения определенных разделов вашего контента. Они могут быть расположены в столбцах модульной сетки, например, из компонента Grid. Для создания блочной панели добавьте к элементу <div> класс .uk-panel.

    • Высокий уровень вовлечения достойных представителей целевой аудитории является четким доказательством простого факта.
    • Внедрение современных методик обеспечивает актуальность существующих гибких и административных условий адаптивности.
    • В рамках спецификации современных стандартов, разработчики крупнейших компаний, превозмогая сложившуюся непростую ситуацию сайта.
  • <ul class="uk-child-width-1-3@s" uk-grid>
        <li>
            <div class="uk-panel">
            	Высокий уровень вовлечения достойных представителей целевой аудитории является четким доказательством простого факта.
            </div>
        </li>
        <li>
            <div class="uk-panel">
            	Внедрение современных методик обеспечивает актуальность существующих гибких и административных условий адаптивности.
            </div>
        </li>
        <li>
            <div class="uk-panel">
            	В рамках спецификации современных стандартов, разработчики крупнейших компаний, превозмогая сложившуюся непростую ситуацию сайта.
            </div>
        </li>
    </ul>

Scrollable panel

Блочный контейнер с вертикальной полосой прокрутки

Scrollable panel по умолчанию имеет небольшие внутренние отступы и стиль для всех четырёх границ. Добавьте класс .uk-panel-scrollable, чтобы дать панели фиксированную высоту и сделать ее прокручиваемой если ее содержимое превышает высоту.

  • <div class="uk-panel uk-panel-scrollable">
        <ul class="uk-list">
            <li><label><input class="uk-checkbox" type="checkbox"> Местные всезнайки</label></li>
            <li>
                <label><input class="uk-checkbox" type="checkbox"> Приобретенные свойства</label>
                <ul>
                    <li><label><input class="uk-checkbox" type="checkbox"> Естественные склонности</label></li>
                    <li><label><input class="uk-checkbox" type="checkbox"> Домашнее состояние</label></li>
                    <li>
                        <label><input class="uk-checkbox" type="checkbox"> Пять шиллингов</label>
                        <ul>
                            <li><label><input class="uk-checkbox" type="checkbox"> Нормального типа</label></li>
                            <li><label><input class="uk-checkbox" type="checkbox"> Приобретенный признак</label></li>
                        </ul>
                    </li>
                    <li><label><input class="uk-checkbox" type="checkbox"> Действительность представляет</label></li>
                </ul>
            </li>
            <li><label><input class="uk-checkbox" type="checkbox"> Известный момент</label></li>
            <li><label><input class="uk-checkbox" type="checkbox"> Проявляется спонтанность</label></li>
        </ul>
    </div>

Clearing и Floating

Создание и очистка плавающих элементов

Плавающие элементы для выравнивания по левой или правой стороне их контейнера, где текст и встроенные элементы будут обтекать его. С помощью классов *-float-* можно группировать элементы на странице, выстраивать в ряд один за другим, а CSS свойство float будет выполнять свою миссию.

Следующие классы помогут вам настроить основные макеты в HTML документе.

Класс Описание
.uk-float-left Добавьте этот класс, чтобы разместить элемент слева.
.uk-float-right Добавьте этот класс, чтобы разместить элемент справа.
.uk-clearfix Добавьте этот класс в родительский контейнер, чтобы очистить floats.
  • Справа
    Слева
  • <div class="uk-clearfix">
        <div class="uk-float-right">
            <div class="uk-card uk-card-default uk-card-body">Справа</div>
        </div>
        <div class="uk-float-left">
            <div class="uk-card uk-card-default uk-card-body">Слева</div>
        </div>
    </div>

Overflow

Утилита «Overflow»

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

UIkit 3 предоставляет разные классы для изменения поведения переполненного блочного элемента.

Класс Описание
.uk-overflow-hidden Добавьте этот класс, чтобы обрезать содержимое, которое превышает размеры его контейнера, без предоставления прокрутки.
.uk-overflow-auto Добавьте этот класс, чтобы создать контейнер, обеспечивающий горизонтальную или вертикальную полосу прокрутки всякий раз, когда содержимое элементов шире или выше самого контейнера, если содержимое переполняет блок.
Примечание Класс .uk-overflow-auto полезен, когда приходится обрабатывать таблицы на отзывчивом сайте, которые в какой - то момент могут оказаться слишком большими (широкими). Класс-помощник также отлично работает с элементами <pre>.
  • Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
    Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы
    Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы
    Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул
  • <div class="uk-overflow-auto uk-height-small">
        <table class="uk-table uk-table-striped uk-table-condensed uk-text-nowrap">
            <thead>
                <tr>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                    <th>Заголовок таблицы</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                </tr>
                <tr>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                    <td>Нижний колонтитул</td>
                </tr>
            </tfoot>
        </table>
    </div>

Overflow Auto

Утилита «Overflow Auto»

Данная утилита предоставляет при необходимости вертикальную полосу прокрутки, если содержимое переполняет блочный элемент и целиком не помещается. Добавьте атрибут uk-overflow-auto к требуемому элементу, класс .uk-overflow-auto установится автоматически, также будет добавлена минимальная высота для элемента.

<div id="my-id" uk-modal>
    <div class="uk-modal-dialog" uk-overflow-auto></div>
</div>

Это часто используется в модальном окне. Хороший пример с переполнением в действии можно увидеть открыв модальное окно с примером, а как создать модальное диалоговое окно можно узнать здесь.

  • Открыть модальное окно
  • <a class="uk-button uk-button-primary" href="#modal-overflow" uk-toggle>Открыть модальное окно</a>
    
    <div id="modal-overflow" uk-modal>
        <div class="uk-modal-dialog">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <div class="uk-modal-header">
                <h2 class="uk-modal-title">Модальный заголовок</h2>
            </div>
            <div class="uk-modal-body" uk-overflow-auto>
                <p>В рамках спецификации современных стандартов, некоторые особенности внутренней области являются только методом резинового участия и своевременно верифицированы. Каждый из нас понимает очевидную вещь: высококачественный прототип будущего проекта в значительной степени обусловливает важность системы массового участия. Лишь символы крупнейших сайтов и по сей день остаются уделом работников, которые жаждут быть преданы с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг. Тщательные исследования конкурентов лишь добавляют фракционных разногласий и представлены в исключительно положительном свете. И нет сомнений, что пользователи крупнейших компаний представлены в исключительно положительном свете. Как уже неоднократно упомянуто, стремящиеся вытеснить традиционное умение, нанотехнологии формируют глобальную веб сеть и при этом - заблокированы в рамках своих собственных рациональных ограничений.</p>
                <p>Прежде всего, убеждённость некоторых пользователей, в своём классическом представлении, допускает внедрение экспериментов, поражающих по своей масштабности и грандиозности. Есть над чем задуматься: непосредственные участники технического прогресса могут быть объективно рассмотрены соответствующими умениями. В частности, повестка сегодняшнего дня требует от нас анализа с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг. Но предприниматели в сети интернет представляют собой не что иное, как знак победы маркетинга над разумом и должны быть в равной степени предоставлены сами себе. В рамках спецификации современных стандартов, независимые сайты, вне зависимости от их уровня, должны быть объединены в целые кластеры себе подобных.</p>
                <p>Укрепление и развитие внутренней структуры предполагает независимые способы реализации поэтапного и последовательного развития устройства. В целом, конечно, внедрение современных методик, в своём классическом представлении, допускает внедрение стандартных подходов. С учётом сложившейся обстановки, глубокий уровень погружения предполагает независимые способы реализации системы массового участия.</p>
                <p>Легко сказать, почему представители современных резервов, превозмогая сложившуюся ситуацию, разоблачены. Мы вынуждены отталкиваться от того, что высокое качество позиционных исследований однозначно фиксирует необходимость с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг, которые жаждут быть ассоциативно распределены по отраслям. С другой стороны, постоянный количественный рост и сфера  активности является качественно новой ступенью как самодостаточных, так и внешне зависимых концептуальных решений.</p>
                <p>Принимая во внимание показатели успешности, внедрение современных методик представляет собой интересный эксперимент проверки направлений прогрессивного развития. Задача, в особенности же сайтостроение сегодняшнего дня обеспечивает широкому кругу (специалистов) участие в формировании прогресса профессионального сообщества. Современные технологии достигли такого уровня, что высокое качество позиционных исследований позволяет оценить значение дальнейших направлений развития. Приятно наблюдать, как стремящиеся нанотехнологии призваны к ответу.</p>
                <p>В частности, разбавленное изрядной долей мышление не даёт нам иного выбора, кроме определения своевременного выполнения сверхзадачи. Вот вам яркий пример современных тенденций - укрепление и развитие внутренней структуры создаёт необходимость включения в производственный план целого ряда внеочередных мероприятий с учётом комплекса направлений прогрессивного развития.</p>
            </div>
            <div class="uk-modal-footer uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close" type="button">Сбросить</button>
                <button class="uk-button uk-button-primary" type="button">Сохранить</button>
            </div>
        </div>
    </div>

Вы можете изменить высоту цели, добавив в атрибут опции.

Опция Значение По умолчанию Описание
sel-container String .uk-modal CSS селектор для элемента контейнера, который обеспечивает высоту.
sel-content String .uk-modal-dialog CSS селектор для элемента, который оборачивает внутреннее содержимое, чтобы обеспечить его высоту.

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

  • Какой-то контент перед контейнером «Overflow Auto».

    Overflow
    Overflow
    Overflow
    Overflow

    Какой-то контент после контейнера «Overflow Auto».

  • <div class="uk-height-medium">
        <div class="js-wrapper">
            <p>Какой-то контент перед контейнером «Overflow Auto».</p>
            <div uk-overflow-auto="sel-container: .uk-height-medium; sel-content: .js-wrapper">
                <div class="uk-grid-small" uk-grid>
                    <div class="uk-width-1-2"><img src="/demo/img/light.jpg" width="450" height="300" alt="Overflow" loading="lazy"></div>
                    <div class="uk-width-1-2"><img src="/demo/img/dark.jpg" width="450" height="300" alt="Overflow" loading="lazy"></div>
                    <div class="uk-width-1-2"><img src="/demo/img/photo.jpg" width="450" height="300" alt="Overflow" loading="lazy"></div>
                    <div class="uk-width-1-2"><img src="/demo/img/photo2.jpg" width="450" height="300" alt="Overflow" loading="lazy"></div>
                </div>
            </div>
            <p>Какой-то контент после контейнера «Overflow Auto».</p>
        </div>
    </div>

Resize

Управление изменением размера элемента

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

Класс Описание
.uk-resize Добавьте этот класс, чтобы включить горизонтальное и вертикальное изменение размера.
.uk-resize-vertical Добавьте этот класс, чтобы включить только вертикальное изменение размера.
.uk-resize-horizontal Добавьте этот класс, чтобы включить только горизонтальное изменение размера.

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

  • <!-- Вертикальное изменение размера -->
    <div uk-grid>
        <div class="uk-width-1-2">...</div>
        <div class="uk-width-1-2">...</div>
    </div>
    
    <!-- Горизонтальное изменение размера -->
    <div uk-grid>
        <div class="uk-width-1-2">...</div>
        <div class="uk-width-1-2">...</div>
    </div>
    
    <!-- Горизонтальное и вертикальное изменение размера -->
    <div uk-grid>
        <div class="uk-width-1-2">...</div>
        <div class="uk-width-1-2">...</div>
    </div>
    
  • <div class="uk-child-width-1-1 uk-grid-small" uk-grid>
    	
        <div>
    <pre class="uk-resize-vertical"><code>&lt;!-- Вертикальное изменение размера --&gt;
    &lt;div uk-grid&gt;
        &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
        &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;/div&gt;
    </code></pre>
        </div>
        
        <div>
    <pre class="uk-resize-horizontal"><code>&lt;!-- Горизонтальное изменение размера --&gt;
    &lt;div uk-grid&gt;
        &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
        &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;/div&gt;
    </code></pre>
        </div>
        
        <div>
    <pre class="uk-resize"><code>&lt;!-- Горизонтальное и вертикальное изменение размера --&gt;
    &lt;div uk-grid&gt;
        &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
        &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;/div&gt;
    </code></pre>
        </div>
        
    </div>

Display

Значения свойства «display»

Данные классы помогут определить тип отображения элемента. Cписок классов с описанием приведён ниже. Добавьте один из этих классов, чтобы изменить свойство отображения элемента display.

Класс Описание
.uk-display-block Заставляет элемент вести себя как блочный элемент.
.uk-display-inline Заставляет элемент вести себя как встроенный элемент.
.uk-display-inline-block Заставляет элемент вести себя как inline-block (нечто: блочно-строчный).

Inline

Утилита «Inline»

Эти классы часто используются для создания контекста позиции в контейнере с изображением в качестве дочернего элемента. Контейнер сохраняет тот же размер, что и изображение, а также сохраняется отзывчивое поведение. Таким образом, содержимое, расположенное поверх изображения, используемое компонентом позиционирования, не будет "вытекать" из размеров изображения.

Класс Описание
.uk-inline Добавьте этот класс, чтобы применить поведение встроенного блока к элементу, добавляется max-width 100% и создаётся контекст позиции.
.uk-inline-clip Так же как .uk-inline, но доплнительно ещё обрезает переполненные дочерние элементы (если превышены размеры).
<div class="uk-inline">
    <img src="" width="" height="" alt="">
    <div class="uk-position-cover"></div>
</div>
  • Inline
    Оверлей
  • <div class="uk-inline">
        <img src="/demo/img/photo.jpg" width="450" height="300" alt="Inline" loading="lazy">
        <div class="uk-position-medium uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Оверлей</div>
    </div>

Адаптивные объекты

Адаптивное поведение элементов

В UIkit 3 элементы <img>, <canvas>, <audio> и <video> адаптируются к ширине их родительского контейнера по умолчанию. Чтобы применить адаптивное поведение к iframe добавьте атрибут uk-responsive. Для других элементов или для применения другого поведения вы можете добавить один из следующих классов.

Класс Описание
.uk-responsive-width Добавьте этот класс, чтобы применить адаптивное поведение к любому элементу.
Он регулирует ширину объекта в соответствии с шириной его родителя, сохраняя исходное соотношение сторон.
.uk-responsive-height Добавьте этот класс, чтобы настроить высоту объекта (а не его ширину) в соответствии с высотой его родителя, сохраняя исходное соотношение сторон.
.uk-preserve-width Добавьте этот класс, чтобы избежать адаптивного поведения по умолчанию и сохранить исходные размеры изображения.
Вы также можете добавить класс к родительскому элементу, тогда будет применено ко всем соответствующим элементам, содержащим его. Если вы встраиваете Google Карты на свой сайт, этот вариант может понадобиться для исправления изображений карты.
<img class="uk-responsive-height" src="" width="" height="" alt="">

<iframe src="" width="" height="" uk-responsive></iframe>

Object Fit и Position

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

Класс Описание
.uk-object-cover Масштабирует изображение, сохраняя соотношение сторон при заполнении блока, полностью охватитывая всю область.
.uk-object-contain Подстраивается под область пропорционально собственным параметрам. Масштабирует изображение, сохраняя соотношение сторон настолько, насколько его ширина и высота могут поместиться в поле содержимого.
.uk-object-fill Масштабирует объект, чтобы заполнить область содержимого элемента, используя ширину и высоту независимо от соотношения сторон.
.uk-object-none Совершенно не изменяет свой размер при заполнении блочного пространства.
.uk-object-scale-down Не масштабируется. Содержимое элемента сравнит none и contain значение, вернув наименьший размер объекта.

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

<img class="uk-object-cover" src="" width="" height="" alt="" style="aspect-ratio: 1 / 1">
  • object
    object
  • <div class="uk-child-width-1-2@s" uk-grid>
        <div>
            <img class="uk-object-cover" src="/demo/img/dark.jpg" 
                 width="1000" height="1000" alt="object" loading="lazy" 
                 style="aspect-ratio: 1 / 1;">
        </div>
        <div>
            <img class="uk-object-contain" src="/demo/img/dark.jpg" 
                 width="1000" height="1000" alt="object" loading="lazy" 
                 style="aspect-ratio: 1 / 1;">
        </div>
    </div>

Чтобы изменить выравнивание изображения или видео внутри его элемента, добавьте один из классов uk-object-position-*.

Класс Описание
.uk-object-position-top-left Расположение по левому верхнему краю.
.uk-object-position-top-center Выровнять по верху.
.uk-object-position-top-right Расположение по правому верхнему краю.
.uk-object-position-center-left Разместить по левому краю.
.uk-object-position-center-center Выровнять по центру.
.uk-object-position-center-right Разместить по правому краю.
.uk-object-position-bottom-left Выравнивание по нижнему левому краю.
.uk-object-position-bottom-center Выровнять по низу.
.uk-object-position-bottom-right Выравнивание по нижнему правому краю.

Border radius

Утилита «Border radius»

Классы позволяют определять, как скругляются границы элемента. Каждый класс применяет размер радиуса окружности скругления для всех четырех углов элемента. Если вам необходимо закруглить углы изменив радиус границы элемента, например изображения, добавьте один из следующих классов:

Класс Описание
.uk-border-rounded Добавьте этот класс, чтобы применить закругленные углы.
.uk-border-circle Добавьте этот класс, чтобы использовать круглую форму.
.uk-border-pill Добавьте этот класс, чтобы установить форму эллипса, таблетки.
  • Border rounded Border circle Border pill
  • <img class="uk-border-rounded" src="/demo/img/avatar.jpg" width="200" height="200" alt="Border rounded" loading="lazy">
    <img class="uk-border-circle" src="/demo/img/avatar.jpg" width="200" height="200" alt="Border circle" loading="lazy">
    <img class="uk-border-pill" src="/demo/img/avatar.jpg" width="200" height="200" alt="Border pill" loading="lazy">
  • Border circle
    Border circle
    Border pill
    Border pill
  • <div class="uk-child-width-1-2@m" uk-grid>
        <div>
            <div class="uk-inline">
                <img class="uk-border-circle" src="/demo/img/dark.jpg" width="450" height="300" alt="Border circle" loading="lazy">
                <div class="uk-overlay uk-overlay-default uk-position-center">
                    Border circle
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline">
                <img class="uk-border-pill" src="/demo/img/dark.jpg" width="450" height="300" alt="Border pill" loading="lazy">
                <div class="uk-overlay uk-overlay-default uk-position-center">
                    Border pill
                </div>
            </div>
        </div>
    </div>

Box shadow

Добавление тени к элементам

Вы можете применять различные тени к элементам. Если для элемента задается радиус скругления углов добавляемый Border radius, то тень также получится с закругленными уголками. Чтобы добавить внешнюю тень к элементу, просто добавьте один из следующих классов.

Класс Описание
.uk-box-shadow-small Добавьте этот класс, чтобы применить маленькую тень к элементу.
.uk-box-shadow-medium Добавьте этот класс, чтобы добавить умеренную (среднюю) тень.
.uk-box-shadow-large Добавьте этот класс, чтобы задать элементу большую тень.
.uk-box-shadow-xlarge Добавьте этот класс, чтобы применить к элементу очень большую тень.

Разметка

<div class="uk-box-shadow-small"></div>

Примеры

Несколько примеров с различными размерами теней, которые можно смело применять на практике.

  • Small
    Medium
    Large
    XLarge
  • <div class="uk-child-width-1-2@s uk-text-center" uk-grid>
        <div>
            <div class="uk-box-shadow-small uk-padding">Small</div>
        </div>
        <div>
            <div class="uk-box-shadow-medium uk-padding">Medium</div>
        </div>
        <div>
            <div class="uk-box-shadow-large uk-padding">Large</div>
        </div>
        <div>
            <div class="uk-box-shadow-xlarge uk-padding">XLarge</div>
        </div>
    </div>
  • + Circle
    + Pill
  • <div class="uk-child-width-1-2@s uk-text-center" uk-grid>
        <div>
            <div class="uk-box-shadow-medium uk-border-circle uk-padding">+ Circle</div>
        </div>
        <div>
            <div class="uk-box-shadow-medium uk-border-pill uk-padding">+ Pill</div>
        </div>
    </div>

Box shadow bottom

Тень в нижней части элемента

Чтобы добавить тень к нижней части элемента, так что получится эффект "Парящий", добавьте класс .uk-box-shadow-bottom. Этот класс также можно комбинировать с одним из других модификаторов .uk-box-shadow-*, например, можно добавить тень от блока при наведении.

<div class="uk-box-shadow-bottom"></div>

Примеры

  • Box shadow bottom
  • <div class="uk-box-shadow-bottom uk-width-1-2@s uk-text-center">
        <div class="uk-background-default uk-padding-large">
            Box shadow bottom
        </div>
    </div>
  • Bottom + Medium
  • <div class="uk-box-shadow-bottom uk-box-shadow-medium uk-width-1-2@s uk-text-center">
        <div class="uk-background-default uk-padding-large">
            Bottom + Medium
        </div>
    </div>

Box shadow hover

Тень от блока при наведении

При добавлении одного из классов -box-shadow-hover-, при наведении на элемент, элемент плавно выделяется путём отбрасывания тени. Это также может быть использовано для изменения размера тени при наведении. Для этого просто объедините их с одним из классов выше. Чтобы применить тень от блока при наведении, добавьте один из следующих классов.

Класс Описание
.uk-box-shadow-hover-small Добавьте этот класс, чтобы создать небольшую тень блоку при наведении на него курсором.
.uk-box-shadow-hover-medium Добавьте этот класс, чтобы использовать среднюю тень при наведении.
.uk-box-shadow-hover-large Добавьте этот класс, чтобы применить большую тень при наведении.
.uk-box-shadow-hover-xlarge Добавьте этот класс, чтобы применить очень большую тень от блока при наведении на него курсором.
<div class="uk-box-shadow-hover-small"></div>

Примеры с наведением. Несколько вариантов решения

  • Hover Small
    Hover XLarge
    Small + Hover Large
    XLarge + Hover Medium
  • <div class="uk-child-width-1-2@s uk-text-center" uk-grid>
        <div>
            <div class="uk-box-shadow-hover-small uk-padding">Hover Small</div>
        </div>
        <div>
            <div class="uk-box-shadow-hover-xlarge uk-padding">Hover XLarge</div>
        </div>
        <div>
            <div class="uk-box-shadow-small uk-box-shadow-hover-large uk-padding">Small + Hover Large</div>
        </div>
        <div>
            <div class="uk-box-shadow-xlarge uk-box-shadow-hover-medium uk-padding">XLarge + Hover Medium</div>
        </div>
    </div>

Drop cap

Буквица. Оформление первой буквы

Drop cap - позволяет оформить первую букву строки делая предложение с красивой большой буквы как это делают в газетах и журналах. С помощью класса .uk-dropcap вы можете создать прикольную первую буквицу внутри текста, абзаца, просто добавив класс непосредственно к элементу <p>. Реализация будет выглядеть следующим образом:

  • Таким образом, семантический разбор внешних противодействий является качественно новой ступенью переосмысления внешнеэкономических буковок. Банальные, но неопровержимые выводы, а также элементы буквенного процесса формируют глобальный интерактивный инструмент, и при этом - призваны к ответу. Лишь расположение крупнейших генераторов смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности.

  • <p class="uk-dropcap">
    	Таким образом, семантический разбор внешних противодействий является качественно новой ступенью переосмысления внешнеэкономических буковок. 
    	Банальные, но неопровержимые выводы, а также элементы буквенного процесса формируют глобальный интерактивный инструмент, и при этом - 
    	призваны к ответу. Лишь расположение крупнейших генераторов смешаны с не уникальными данными до степени совершенной неузнаваемости, 
    	из-за чего возрастает их статус бесполезности.
    </p>

Утилита «Logo» - Оформление логотипа

С классом .uk-logo вы можете легко определить свой логотип, например, установив логотип в панели навигации Navbar.

<a class="uk-logo" href=""></a>

Пример

Добавьте класс .uk-light из компонента Инверсия при отображении лого на темном фоне, чтобы его цвет автоматически инвертировался для лучшей видимости.

  • <div class="uk-panel uk-padding uk-background-secondary uk-light">
        <a class="uk-logo" href="#">Лого</a>
    </div>

Логотип картинкой

В качестве логотипа вы также можете использовать элемент <img>, например с SVG.

<a class="uk-logo" href="">
    <img src="" width="" height="" alt="">
</a>

Вы можете автоматически отображать альтернативные логотипы для светлого и темного фона с помощью компонента Inverse. Просто нужно добавить класс .uk-logo-inverse ко второму изображению логотипа. В зависимости от цветового режима, когда применяется класс .uk-light или .uk-dark к родительскому элементу, будет отображаться инвертированный логотип.

HTML разметка

<div class="uk-light">
    <a class="uk-logo" href="">
        <img src="" width="" height="" alt="">
        <img class="uk-logo-inverse" src="" width="" height="" alt="">
    </a>
</div>
Примечание Чтобы добавить SVG логотип для сайта как встроенный SVG, используйте компонент SVG.

На примерах можно увидеть отображение логотипа в зависимости от цветового режима.

  • <div class="uk-child-width-expand@s" uk-grid>
        <div>
            <div class="uk-panel uk-padding uk-background-muted">
                <a class="uk-logo" href="/" aria-label="На главную">
                    <img src="/demo/img/logo-placeholder.svg" width="130" height="70" alt="лого">
                    <img class="uk-logo-inverse" src="/demo/img/logo-placeholder-light.svg" width="130" height="70" alt="лого">
                </a>
            </div>
        </div>
        <div>
            <div class="uk-panel uk-padding uk-background-secondary uk-light">
                <a class="uk-logo" href="/" aria-label="На главную">
                    <img src="/demo/img/logo-placeholder.svg" width="130" height="70" alt="лого">
                    <img class="uk-logo-inverse" src="/demo/img/logo-placeholder-light.svg" width="130" height="70" alt="лого">
                </a>
            </div>
        </div>
    </div>

Blend mode

Режимы наложения : «Blend mode»

Определяет режим наложения (смешивания) исходного цвета на фоновый цвет или фоновое изображение. С помощью режимов наложения объекты смешиваются друг с другом.

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

Классы "режимов смешивания" цветов выбранного элемента с низлежащими слоями:

Класс Описание
.uk-blend-multiply Этот класс устанавливает эффект режима смешивания «Умножение».
.uk-blend-screen Этот класс устанавливает эффект режима смешивания «Осветление».
.uk-blend-overlay Этот класс устанавливает эффект режима смешивания «Перекрытие».
.uk-blend-darken Этот класс устанавливает режим смешивания «Замена тёмным».
.uk-blend-lighten Этот класс устанавливает режим смешивания «Замена светлым».
.uk-blend-color-dodge Этот класс устанавливает режим смешивания «Осветление основы».
.uk-blend-color-burn Этот класс устанавливает режим смешивания «Затемнение основы».
.uk-blend-hard-light Этот класс устанавливает режим смешивания «Направленный свет».
.uk-blend-soft-light Этот класс устанавливает режим смешивания «Рассеянный свет».
.uk-blend-difference Этот класс устанавливает эффект режима наложения «Разница».
.uk-blend-exclusion Этот класс устанавливает эффект режима наложения «Исключение».
.uk-blend-hue Этот класс устанавливает эффект режима наложения «Тон».
.uk-blend-saturation Этот класс устанавливает эффект режима наложения «Насыщенность».
.uk-blend-color Этот класс устанавливает эффект режима наложения «Цвет».
.uk-blend-luminosity Этот класс устанавливает эффект режима наложения «Яркость».
<div class="uk-position-relative">
    <div class="uk-blend-multiply uk-overlay uk-overlay-primary"></div>
    <img src="" alt="">
</div>

mix-blend-mode

Режим наложения определяет формулу, которая должна использоваться для смешивания цветов выбранного элемента с фоном. Цвета исходного элемента смешиваются с фоном, после смешивания измененный исходный элемент совмещается с фоном.

  • Blend Multiply

    Multiply

    Blend Screen

    Screen

    Blend Overlay

    Overlay

    Blend Darken

    Darken

    Blend Lighten

    Lighten

    Blend Color Dodge

    Color Dodge

    Blend Color Burn

    Color Burn

    Blend Hard Light

    Hard Light

    Blend Soft Light

    Soft Light

    Blend Difference

    Difference

    Blend Exclusion

    Exclusion

    Blend Hue

    Hue

    Blend Saturation

    Saturation

    Blend Color

    Color

    Blend Luminosity

    Luminosity

  • <div class="uk-child-width-1-2 uk-child-width-1-3@s uk-grid-small uk-light" uk-grid>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-multiply" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Multiply" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Multiply</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-screen" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Screen" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Screen</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-overlay" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Overlay" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Overlay</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-darken" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Darken" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Darken</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-lighten" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Lighten" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Lighten</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-color-dodge" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Color Dodge" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Color Dodge</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-color-burn" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Color Burn" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Color Burn</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-hard-light" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Hard Light" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Hard Light</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-soft-light" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Soft Light" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Soft Light</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-difference" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Difference" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Difference</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-exclusion" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Exclusion" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Exclusion</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-hue" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Hue" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Hue</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-saturation" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Saturation" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Saturation</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-color" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Color" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Color</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-background-primary">
                <img class="uk-blend-luminosity" src="/demo/img/dark.jpg" width="450" height="300" alt="Blend Luminosity" loading="lazy">
                <div class="uk-position-center">
                    <p class="uk-h4 uk-margin-remove">Luminosity</p>
                </div>
            </div>
        </div>
    </div>
  • blend
    color-burn

    blend
    difference

    blend
    color-dodge

  • <div class="uk-child-width-1-3@s uk-grid-small uk-h2 uk-text-center uk-text-bold" uk-grid>
    	
        <div>
        	<div class="uk-height-medium uk-flex uk-flex-center uk-flex-bottom uk-background-cover" data-src="/demo/img/light.jpg" uk-img>
        		<p class="uk-blend-color-burn">
        			<b>blend<br> color-burn</b>
        		</p>
        	</div>
        </div>
        <div>
        	<div class="uk-height-medium uk-flex uk-flex-center uk-flex-bottom uk-background-cover" data-src="/demo/img/light.jpg" uk-img>
        		<p class="uk-blend-difference">
        			<b>blend<br> difference</b>
        		</p>
        	</div>
        </div>
        <div>
        	<div class="uk-height-medium uk-flex uk-flex-center uk-flex-bottom uk-background-cover" data-src="/demo/img/light.jpg" uk-img>
        		<p class="uk-blend-color-dodge">
        			<b class="uk-text-danger">blend<br> color-dodge</b>
        		</p>
        	</div>
        </div>
        
    </div>

Transform center

Центр трансформации

Точка трансформации в самом центре. Чтобы центрировать элемент "в себе", добавьте класс uk-transform-center. Это особенно полезно при абсолютном позиционировании.

  • Центр трансформации
  • <div class="uk-inline">
        <img src="/demo/img/light.jpg" width="1600" height="1200" alt="Центр трансформации" loading="lazy">
        <a class="uk-position-absolute uk-transform-center" 
           style="left: 50%; top: 50%" 
           href="#modal-overflow" uk-toggle  
           uk-tooltip="title: Крутяк! Нажмешь?" uk-scroll="offset: 80" uk-marker></a>
    </div>

Transform origin

Координаты точки : Точка трансформации

Устанавливайте координаты точки, относительно которой будет происходить трансформация элемента. Чтобы изменить источник анимации, например масштабирование, добавьте один из классов uk-transform-origin-*. Это можно комбинировать вместе с компонентом Animation.

Класс Описание
.uk-transform-origin-top-left Переход происходит сверху слева.
.uk-transform-origin-top-center Переход происходит сверху.
.uk-transform-origin-top-right Переход происходит сверху справа.
.uk-transform-origin-center-left Переход происходит слева.
.uk-transform-origin-center-right Переход происходит справа.
.uk-transform-origin-bottom-left Переход происходит внизу слева.
.uk-transform-origin-bottom-center Переход происходит снизу.
.uk-transform-origin-bottom-right Переход происходит снизу справа.
<div class="uk-transform-origin-bottom-right uk-animation-scale-up"></div>

Примеры. Появление с разных сторон

  • Bottom Right

    Top Center

    Bottom Center

  • <div class="uk-child-width-1-3@m" uk-grid>
        <div class="uk-animation-toggle" tabindex="0">
            <div class="uk-transform-origin-bottom-right uk-card uk-card-default uk-card-body uk-animation-scale-up">
                <p class="uk-text-center">Bottom Right</p>
            </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
            <div class="uk-transform-origin-top-center uk-card uk-card-default uk-card-body uk-animation-scale-up">
                <p class="uk-text-center">Top Center</p>
            </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
            <div class="uk-transform-origin-bottom-center uk-card uk-card-default uk-card-body uk-animation-scale-up">
                <p class="uk-text-center">Bottom Center</p>
            </div>
        </div>
    </div>

Disabled

Отключение элемента

Чтобы отключить поведение клика любому элементу, например <a>, <button> или <iframe>, добавьте к нему класс .uk-disabled.

Drag

Курсор «Перемещение»

Чтобы изменить курсор по умолчанию и применить курсор перемещения к перетаскиваемым элементам, добавьте класс .uk-drag.

<div class="uk-drag"></div>

Чтобы создать тень для блока загрузочной области добавьте класс .uk-dragover.


  • <div class="uk-drag uk-width-small uk-padding uk-background-muted uk-text-center">
        <i uk-icon="icon: move; ratio: 2"></i>
    </div>
    
    <hr />
    
    <div class="uk-drag uk-dragover uk-width-medium uk-padding uk-background-muted">
        <i uk-icon="icon: move; ratio: 2"></i>
    </div>