Семантический интерфейс | Диммер

Semantic UI - это фреймворк с открытым исходным кодом, который использует CSS и jQuery для создания отличных пользовательских интерфейсов. Это то же самое, что и бутстрап для использования, и в нем есть множество различных элементов, которые можно использовать, чтобы ваш сайт выглядел более потрясающе. Он использует класс для добавления CSS к элементам.

Диммер скрывает отвлекающие факторы, чтобы сосредоточить внимание на конкретном контенте и затемнять его.

Пример 1:

В этом примере отображается эффект затемнения при наведении курсора.

Для этого вам понадобится код jQuery.

$(".image").dimmer({
    on: "hover"
});

Complete code:

Выход:

Пример 2:

В этом примере отображается эффект диммера при нажатии кнопки.

Код jQuery:

$ ('. dim'). click (function () {$ ('. image'). dimmer ('show')});
$ ('. show'). click (function () {$ ('. image'). dimmer ('hide')});

dim and show are classes of the two buttons.

Complete code:

Выход:

Пример 3:

This example displaying the Blurring Dimmer effect.

Выход:

Пример 4:

This example creating the Inverted Dimmer effect.

Выход: