Черновик Горы для тестирования тем
Объект №: 0001
Допуск5
Класс содержания:
внесистемный
Вторичный класс:
не_содержится
Класс нарушения:
влам
Класс риска:
предупреждение

Что это?

Набор альтернативных [блоков с изображениями], которые добавляют немного интерактива в ваши статьи. Неважно, пишите ли вы объект, рассказ или что-то ещё.

Как использовать

Большинство вариаций понятны сами по себе, но есть ряд общих особенностей:

  • ЭТО РАБОТАЕТ И В SIGMA-9 И В BLACK HIGHLIGHTER
  • Любые параметры со значением true либо false обязательны.
  • Картинки могут "плавать". Т.е. текст будет огибать их. Если вы выбираете |float=true, то не забудьте указать параметр |align=left/right. Он указывает, с какой стороны должно "плавать" изображение.
  • Ширина — это max-width. На мобильных экранах изображения всегда будут иметь размер от указанной ширины до 50% ширины экрана. Если вы хотите это поменять, вам необходимо подредактировать значение CSS:

    .scp-image-block[data-feature="image-feature"] {
    max-width: [здесь укажите ширину] !important;
    }

  • Подписи опциональны! Если вы указываете |add-caption=false, то |caption=текст не нужен.
  • Рекомендуется указывать Alt-текст! У всех изображений есть опции |alt=alt|alt-text=Описание картинки. Их можно опустить, но ради доступности контента их рекомендуется добавлять. Alt-текст должен описывать содержимое изображения.
  • Появление из фрактального шума и Появление из пиксельного шума написаны на HTML и используют iframe, которые что на WikiDot, что у нас, достаточно… странные. Они по идее сработают, но шанс их поломки достаточно высок.
  • Если у вас остались вопросы или пожелания, свяжитесь с Woedenaz.

Многострочные подписи

Многострочные подписи возможны.
Добавляются они следующим образом:

|add-caption=true
|caption=Это супер-пупер длинная подпись у которой будет перенос строки. _
Надо лишь добавить пробел и нижнее подчёркивание после него. _
Помните про пробел, иначе не сработает. _
Добавление пробела после нижнего подчёркивания тоже не сработает.

ПОЯВЛЕНИЯ ИЗОБРАЖЕНИЙ

Появление из размытия при наведении

Нажмите для активации на мобильных устройствах

Вставленная страница "draft:vladthemountain-7-source" не существует (создать её сейчас)


[[include component:image-features-source |blur-reveal=--]
|blur-amount=Число Рекомендуются значения от 1.5 до 5. Больше цифра = больше размытия!
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]

Смена изображения через размытие при наведении

Нажмите для активации на мобильных устройствах

Вставленная страница "draft:vladthemountain-7-source" не существует (создать её сейчас)


[[include component:image-features-source |image-change=--]
|blur-amount=Число Рекомендуются значения от 1.5 до 5. Больше цифра = больше размытия!
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|start-url=Ссылка URL изображения ДО наведения.
|hover-url=Ссылка URL изображения ПОСЛЕ наведения.
|alt1=alt|alt1-text=Описание изображения 1
|alt2=alt|alt2-text=Описание изображения 2
|add-caption=true/false
|caption=Подпись
]]

Откат размытия с изображения при наведении

Нажмите для активации на мобильных устройствах

Код для Firefox предоставлен EstrellaYoshte!

Вставленная страница "draft:vladthemountain-7-source" не существует (создать её сейчас)


[[include component:image-features-source |slide-blur-reveal=--]
|blur-amount=Число Рекомендуются значения от 5 до 10. Больше цифра = больше размытия!
|slide-direction=left/right/top/bottom Направление ОТКУДА будет откатываться размытие.
|float=true/false
|align=left/right
|speed=Число Скорость анимации в миллисекундах
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]

Откат блока-плашки при наведении

Нажмите для активации на мобильных устройствах

Вставленная страница "draft:vladthemountain-7-source" не существует (создать её сейчас)


[[include component:image-features-source |slide-block-reveal=--]
|block-color=hex/rgb/hsl Сработают любые варианты определения цвета из CSS.
|slide-direction=left/right/top/bottom Направление ОТКУДА будет откатываться блок-плашка.
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]

Появление через слайдер

Вставленная страница "draft:vladthemountain-7-source" не существует (создать её сейчас)


[[include component:image-features-source |slide-revealer=--]
|block-color=hex/rgb/hsl Сработают любые варианты определения цвета из CSS.
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения. из CSS.
|left-url=Ссылка URL для левого изображения.
|right-url=Ссылка URL для правого изображения.
|slider-start-percent=0-100 Отступ слева для слайдера, в %.
|slider-color=hex/rgb/hsl Сработают любые варианты определения цвета из CSS.
|slider-circle-size=px/rem/vw/% Диаметр круга слайдера; работают любые единицы измерения из CSS.
|alt1=alt|alt1-text=Описание левого изображения
|alt2=alt|alt2-text=Описание правого изображения
|add-caption=true/false
|caption=Подпись
]]

Проявление из фрактального шума при наведении

Нажмите для активации на мобильных устройствах

Вставленная страница "draft:vladthemountain-7-source" не существует (создать её сейчас)


[[include component:image-features-source |noise-reveal=--]
|fractal-size=1-999 Больше число = меньше фрактал.
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem vw/% НЕ СРАБОТАЮТ.
|background=color/url("")/gradient Здесь принимаются любые варианты свойства background из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]

Проявление из пикселей при наведении

Нажмите для активации на мобильных устройствах

Вставленная страница "draft:vladthemountain-7-source" не существует (создать её сейчас)


[[include component:image-features-source |pixel-reveal=--]
|pixel-res=Число Больше число = больше пиксели. (рекомендуются значения от 4 до 32)
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem vw/% НЕ СРАБОТАЮТ.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]

УВЕЛИЧЕНИЯ ИЗОБРАЖЕНИЙ

Увеличение при наведении

Нажмите для активации на мобильных устройствах

Вставленная страница "draft:vladthemountain-7-source" не существует (создать её сейчас)


[[include component:image-features-source |hover-enlarge=--]
|enlarge-amount=Число Больше число = больше увеличение. (Рекомендуются значения от 5 до 20)
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]

Полноэкранный просмотр при удержании

Нажмите для активации на мобильных устройствах

Вставленная страница "draft:vladthemountain-7-source" не существует (создать её сейчас)


[[include component:image-features-source |click-fullscreen=--]
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]

Текст может быть полужирным, курсивом, подчёркнутым, зачёркнутым и моноширным.

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

logo.svg

Логотип Фонда SCP


Заголовки можно создать, поставив от одного до шести плюс "+" в начале строки.


Это таблица.


Это цитата, её можно создать поставив "> " в начале строки.

Больше текста


Это горизонтальная линия.

Глубокая цитата.


ЭтоТаблица
Ты уже должен знатькак это
сделать

/*
    Это блок кода.
    Держите Hello, World на Java по приколу.
*/
package com.example;

class Project {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Структурные: публичный_черновик
версия страницы: 70, Последняя правка: 05 Фев. 2025, 08:16 (17 дней назад)
Пока не указано иное, содержимое этой страницы распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 License.