Что это?
Набор альтернативных [блоков с изображениями]
, которые добавляют немного интерактива в ваши статьи. Неважно, пишите ли вы объект, рассказ или что-то ещё.
Как использовать
Большинство вариаций понятны сами по себе, но есть ряд общих особенностей:
- ЭТО РАБОТАЕТ И В 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.
Многострочные подписи
Многострочные подписи возможны.
Добавляются они следующим образом:
|caption=Это супер-пупер длинная подпись у которой будет перенос строки. _
Надо лишь добавить пробел и нижнее подчёркивание после него. _
Помните про пробел, иначе не сработает. _
Добавление пробела после нижнего подчёркивания тоже не сработает.
ПОЯВЛЕНИЯ ИЗОБРАЖЕНИЙ
Появление из размытия при наведении
Нажмите для активации на мобильных устройствах
Вставленная страница "draft:vladthemountain-7-source" не существует (создать её сейчас)
|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" не существует (создать её сейчас)
|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" не существует (создать её сейчас)
|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" не существует (создать её сейчас)
|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" не существует (создать её сейчас)
|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" не существует (создать её сейчас)
|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" не существует (создать её сейчас)
|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" не существует (создать её сейчас)
|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" не существует (создать её сейчас)
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
Текст может быть полужирным, курсивом, подчёркнутым, зачёркнутым и моноширным
.
Горизонтальная линия может быть создана при помощи 5 дефисов "-----" и проходит через всю страницу, если она не находится внутри чего-либо (например, цитат). Линии, разделяющие разделы этой страницы, представляют собой горизонтальные линии.
Логотип Фонда SCP
Заголовки можно создать, поставив от одного до шести плюс "+" в начале строки.
- Табло
- Табло
- Большое табло
- Это пустое табло с длинным названием. Очень длинным. Очень очень длинным.
- Пустое табло
- Пустое табло
- Пустое табло
- Пустое табло
- Пустое табло
Это таблица.
Это цитата, её можно создать поставив "> " в начале строки.
Больше текстаЭто горизонтальная линия.
Глубокая цитата.
Это | Таблица |
---|---|
Ты уже должен знать | как это |
сделать |
/* Это блок кода. Держите Hello, World на Java по приколу. */ package com.example; class Project { public static void main(String[] args) { System.out.println("Hello, World!"); } }