SCP-1002-RU, но каждое предложение является перекрёстной ссылкой

Особые условия содержания: В зоне вещания SCP-1002 должны постоянно находиться не менее 3 групп агентов, снабжённых оборудованием активного радиоподавления. Одна из групп должна постоянно подавлять сигнал, две другие – проверять частоты, на которых ранее было замечено вещание. Раз в десять минут необходимо прерывать помехи и убеждаться в вещании SCP-1002 на подавляемой частоте. В случае тишины в эфире необходимо проверить все ранее обнаруженные частоты вещания, если и это не даст никаких результатов - начать поиск по всему спектру радиочастот.

Описание: SCP-1002 - это радиосигнал неизвестного происхождения, обнаруженный на территории города ██████ и его окрестностей. Попытка нахождения источника окончилась неудачей, отключение энергии на территории всей ██████████ области также не дало результата.

Частота вещания SCP-1002 меняется случайным образом, чаще всего в пределах ██ известных частот. Не установлено никаких закономерностей в смене частоты и длительности вещания на ней.

SCP-1002 передаёт сведения, попадающие в категорию «Совершенно секретно» различных стран, относящиеся к материалам Фонда, коммерческие тайны и т.д. Язык вещания чаще всего русский, английский или китайский, хотя некоторые наречия так и не удалось опознать. Текст зачитывается монотонным низким мужским голосом. Зачастую вещание ведётся в ускоренном в десятки раз темпе.

Информация, передаваемая SCP-1002, может быть как актуальной, так и устаревшей. Не было замечено ни одного случая передачи информации о будущих событиях. В промежутках между зачитыванием различных документов иногда можно услышать «слоган» SCP-1002: «Радио „Правда“. Все должны это знать!»

Приложение 1:
SCP-1002 был обнаружен агентом [ДАННЫЕ УДАЛЕНЫ], случайно настроившимся на активную тогда частоту вещания по дороге на службу. В тот момент неизвестный зачитывал список предметов, полученных с помощью SCP-1180, с которым агент [ДАННЫЕ УДАЛЕНЫ] был хорошо знаком.

Приложение 2:
Сведения, полученные от SCP-1002:
- точное расположение войск Наполеона в битве при Бородино
- коды запуска ядерных ракет Китая на ██:██ █.██.199█
- секретный рецепт Кока-Колы
- протокол тестирования SCP-1245
- имя убийцы Джона Кеннеди, 35-го президента США
[ДАННЫЕ УДАЛЕНЫ]

великие тайны прошлого

- закрыть блок

Далее представлены шаблоны, полезные при оформлении и добавлении настраиваемых блоков в Вашей статье.

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

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

Свернуть

Содержание

Теория вёрстки гипертекстового документа

Блоки [[span]] и [[p]] или [[paragraph]]

Примеры оформления с использованием [[span]]

Цензура в документе

Спрятанный в цензуре текст

Блоки [[div]] и [[table]]

Уведомление АПАИБ

Использование таблиц [[table]] на примере журнала испытаний

Альтернативный синтаксис для таблиц — [[div]] со свойством flex

Альтернативный синтаксис для таблиц — [[div]] со свойством grid

Транскрипция на терминале

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

Шаблон "переписки" SCiPNET

Пользовательские -u ID

:hover и иные селекторы

"Размытие" блоков

"Увеличение" блоков

Та самая карусель изображений

Карусель на главной странице сайта

Блоки за авторством ParussMan

Блоки с текстом и с треугольниками сверху

Оформление абзацев и приложений

Спойлер "отпечаток пальца"

"Широкий" спойлер

"Переписка" в мессенджере

Изменение [[tabview]]

Изменение заголовков страницы

Изменение фона страницы

Пользовательские шрифты (файлы .ttf и прочие — не работают)

Пользовательские курсоры

"Подвижное" открытие страницы

animation и "появление" элементов / страницы

Добавление изображений

Пример загруженного в "Файлы" статьи изображения

Пример размещённого в интернете изображения

Альтернативный способ добавления изображений [[image]]

Пример употребления тега [[image]]

Классы rimg, limg, cimg

Тег "span" внутри классов rimg, limg, cimg

Свойства и аттрибуты тега [[image]]

Выравнивание image

Свойства CSS в атрибуте style

Фильтры filter

Добавление изображений через свойство CSS "background"

Карусель изображений

Ссылка поверх абзаца / текста

Галерея изображений

Теория вёрстки гипертекстового документа

Все страницы в интернет-браузерах представлены в виде документов с расширением .html, в том числе даже когда они конвертируются с какого-то иного языка вёрстки, вроде XML, JavaScript, PHP и так далее.

Основные понятия:

HTML — "HyperText Markup Language", "язык гипертекстовой разметки".
CSS — "Cascading Style Sheets", "вложенные таблицы стилей"

По большей части, данное руководство предлагает Вам экспериментировать с настраиваемыми блоками, так как правил CSS огромное количество, а функционал HTML на сайте весьма ограничен. Далее будут наиболее распространённые примеры употребления блоков [[div]], в то время как для [[span]] были выбраны лишь несколько специфических функций.

HTML-вёрстку лучше всего демонстрирует следующий пример:


[[div class="blockquote"]]
[[HTML]]
<br>
<p>Так выглядит текст в HTML-вёрстке.<p>
<p>Мало того, его ещё и сложно редактировать, так как каждый чих требует открывающего / закрывающего тега.</p>

Это на самом деле не так, но в то же время это даёт лучшее управление над каждым отдельным абзацем на странице, особенно, когда Вы пишете интерактивную историю, литRPG и так далее.

<p><b>Сам по себе HTML - примитивный</b>, <em>простой</em>, с лишь <u>небольшим</u> количеством опций для оформления.</p>
<br>
[[/html]]
[[/div]]

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

Мы можем прописать свойства в отдельном файле формата .css, или прямо в теге, вроде <span> или <div>, используя свойство style="". В дальнейшем, в статье об оформлении интерактивного контента мы узнаем также о том, как для тега [[HTML]] использовать тег <style> и вносить CSS в документ через тег <script>.

Для того, чтобы распространить свойства CSS на весь документ или на всю статью, нам потребуется использовать тег [[module CSS]], внутри которого нам нужно прописывать правила оформления, которые будут применяться или к классам, или к идентификационным номерам. Классы отличаются тем, что, обычно, применяются для оформления повторяющихся элементов, а номера - для уникальных.

Например, если Вы откроете в своём браузере "Средства разработки", обычно, с помощью кнопки F12, то Вы увидите появившееся в браузере окно, в котором будет вкладка "Элементы". В структуре, начинающейся со строки "<!DOCTIPE html>", Вы можете увидеть тег <body id="html-body">. Если же Вы начнёте раскрывать с помощью значков "►" эти строки, Вы сможете увидеть, например, в <div id="side-bar"> блоки <div class="side-block">, которые отвечают за оформление разделов бокового меню слева на страницах сайта.

При этом, в "Средствах разработки" Вы можете, выбрав строку, увидеть в меню слева во вкладке "Элементы" присуждённые этой строке свойства CSS. Вы можете изменять их, и тут же увидите результат Вашей деятельности на странице. Тем не менее, Ваши действия не сохраняются и будут возвращены к дефолту после перезагрузки страницы. Вы всё равно можете экспериментировать с известными Вам свойствами CSS для того, чтобы впоследствии переписать их в правила в [[module CSS]].

Правила с идентификационными номерами начинаются как #правила{свойства:переменные; …}. Классы выглядят как .правила{свойства:переменные; …}.

Для комплексных правил, когда Вы хотите взаимодействовать с несколькими блоками правил, Вы можете использовать "селекторы", вроде "+" или ">", как, например, .правила1 > #правила2{свойства:переменные; …}. Это сделает так, что на странице все классы .правила1, в которых содержится #правила2, будут применять для этих #правила2 прописанные свойства, но .правила1 без #правила2 внутри или сами по себе #правила2 данным свойствам следовать не будут.

Названия правил не стоит писать через пробел. Это приведёт к тому, что Вы перечисляете название правил, которые должны разделять одни и те же свойства. То есть, .правила1 правила2{свойства:переменные; …} заставит браузер искать написанный Вами .правила1 и перечисленный среди уникальных имён блоков браузера блок под названием "правила 2", и применять к ним одни и те же свойства. Это можно использовать для того, чтобы перечислить общие для правил свойства, и потом прописывать меньший по размерам код для индивидуальных блоков.

Уникальными именами, зарезервированными для браузеров, являются всякие "a", "em", "u", "span", "div", "input", "label", "body", "head", "html" и так далее. Не стоит использовать в качестве названий такие имена, если только Вы не пропишете их как, скажем, "a1", "spanOne", "divX". Иначе a{свойства:переменные; …} будет применяться ко всем <a> на странице, а это — совершенно все ссылки, которые здесь есть. В том числе ссылки для редактирования страницы, (<a id="edit-button" class="btn btn-default" href="#">Редактировать</a>), так что, если Вы напортачите, все ссылки на странице могут или исчезнуть, или стать нечитабельными и недоступными.

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

Блоки [[span]] и [[p]] или [[paragraph]]

Блок [[span]] выполняет роль настраиваемого блока посреди текста. Он отличается от остальных способов форматирования, вроде курсива или подчёркивания тем, что может быть настроен и при редактировании HTML-вёрстки выглядит как <span>-блок.

Жирный текст является <b>-тегом, курсив - <em>-тегом, подчёркивание - <u>-тегом, а [[span]] может быть всем сразу и даже более того. К тегу [[span]] применимо свойство style="", которое позволяет прописывать в нём любые правила CSS, что также возможно для блоков [[div]] и [[p]].

Тег [[p]] по функционалу соответствует тегу <p>. Он используется для создания параграфов и уже в него может быть включен тег <span>, а сам <p> включён в <div>.

Пример:

[[div style="background: orange;"]]
[[p style="background: yellow"]]**Особые условия содержания:** [[[SCP-ES-013]]] не представляет опасности, поэтому может храниться в стандартном контейнере, промаркированном согласно актуальным правилам Фонда. Контейнер должен быть изготовлен из изоляционного материала для содержания объекта в подходящих условиях: температура внутри него не должна опускаться ниже 5°С или подниматься выше 40°С. [[span style="background: lightgreen"]]В связи с основным эффектом SCP-ES-013, рекомендуется ограничить доступ к нему минимально необходимым количеством сотрудников[[/span]].[[/p]]
[[p style="background: yellow"]]**Описание:** SCP-ES-013 на первый взгляд представляет собой ручку с синими чернилами популярной марки ███. [[span style="background: lightgreen"]]Объект имеет форму шестиугольной призмы, также в комплекте с ним идут конический колпачок и круглая пробка, все элементы находятся в превосходном состоянии.[[/span]] Размеры объекта составляют 148 мм в высоту x 8 мм в ширину x 8 мм в длину. Ничего во внешнем виде объекта не указывает на то, что он не был произведён на заводе ███; неизвестно, существуют ли аналогичные ему предметы, также отсутствуют какие-либо данные о том, что производитель был осведомлён о его свойствах.[[/p]]
[[/div]]

Результат:

Особые условия содержания: SCP-ES-013 не представляет опасности, поэтому может храниться в стандартном контейнере, промаркированном согласно актуальным правилам Фонда. Контейнер должен быть изготовлен из изоляционного материала для содержания объекта в подходящих условиях: температура внутри него не должна опускаться ниже 5°С или подниматься выше 40°С. В связи с основным эффектом SCP-ES-013, рекомендуется ограничить доступ к нему минимально необходимым количеством сотрудников.
Описание: SCP-ES-013 на первый взгляд представляет собой ручку с синими чернилами популярной марки ███. Объект имеет форму шестиугольной призмы, также в комплекте с ним идут конический колпачок и круглая пробка, все элементы находятся в превосходном состоянии. Размеры объекта составляют 148 мм в высоту x 8 мм в ширину x 8 мм в длину. Ничего во внешнем виде объекта не указывает на то, что он не был произведён на заводе ███; неизвестно, существуют ли аналогичные ему предметы, также отсутствуют какие-либо данные о том, что производитель был осведомлён о его свойствах.

[[p]] лучше всего подходит для "второго" уровня оформления: первым будет весь [[div]], третьим будет каждое отдельное предложение или [[span]]. Используя [[p]], как описывалось ранее, возможно получить полный контроль в оформлении каждого абзаца.

Например, Вы можете использовать [[module CSS]] для того, чтобы не прописывать класс у [[span]] при каждом его вызове в [[p]]. Об этом речь пойдёт в разделе селекторов.

Пример:

[[module CSS]]
.pCensoredSpans > span {
background: #333;
}
[[/module]]
[[p class="pCensoredSpans"]]**Особые условия содержания:** SCP-863-1 должен [[span]]содержаться в камере размерами 2х2 метра[[/span]] и [[span]]снабжаться питанием согласно пищевой карте 863-1-1[[/span]]. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности [[span]]SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены[[/span]].[[/p]]

Результат:

Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.

Блоки [[span]] могут использоваться внутри тега [[a]], чтобы оформлять отдельные части ссылки:

Код

[[a href="" style="background: #901; color: white;"]]Это пустая ссылка, но [[span style="font-weight: bold; background: darkgoldenrod; color: black;"]] она демонстрирует вам то, [[/span]]как можно оформить текст внутри ссылок[[/a]], не используя при этом [[[ссылки такого синтаксиса]]].

Результат

Это пустая ссылка, но она демонстрирует вам то, как можно оформить текст внутри ссылок, не используя при этом [[[ссылки такого синтаксиса]]].

В отличии от обычного HTML, тегам, кроме [[a]], нельзя присвоить атрибут "href", кроме тега [[image]]. Это значит, что Вы не можете сделать ссылкой на другую страницу отдельные абзацы, [[span]] или [[div]].

Примеры оформления с использованием [[span]]

Цензура в документе

При оформлении статьи участники часто делают замечание о соответствии цензуры стандартам оформления. Со включенным NumPad Вы можете зажать клавишу "Alt", после чего ввести на боковой клавиатуре 2-1-9, и символ "█" появится в тексте на месте курсора.

Очевидно, что символы цензуры не должны выглядеть как SCP-^███, SCP-▄▄▄, SCP-▀▀▀, SCP-░░░, SCP-▒▒▒, SCP-▓▓▓ и SCP-▮▮▮. Как минимум, потому что стандарт уже давно был установлен.

При этом, возможно заметить небольшие пробелы белого цвета между символами "█", особенно в длинной череде символов "████████████████". Альтернативным решением является использования [[span]] тегов, которые используют фон для того, чтобы "спрятать" текст.

Код

**Особые условия содержания:** SCP-[[span style="background: #333"]]███[[/span]]-█ должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте [[span style="background: #333"]]███[[/span]]-█-█. В связи с низким риском нарушения условий содержания SCP-[[span style="background: #333"]]███[[/span]]-█ разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-███-█ должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.

Результат

Особые условия содержания: SCP-███-█ должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте ███-█-█. В связи с низким риском нарушения условий содержания SCP-███-█ разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-███-█ должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.

Зачастую, это того не стоит. Данное решение не влияет на восприятие текста или на "красоту" статьи, тратит Ваше время и вызывает фрустрацию, если Вы видите, что пропустили где-то закрывающий или открывающий тег. Особенно в статьях с большим количеством цензуры.

Спрятанный в цензуре текст

Текст возможно "спрятать" в поле цензуры. Пример далее:

Код

**Особые условия содержания:** SCP-███-█ должен содержаться в [[span style="background: #333"]]камере размерами 2х2 метра[[/span]] и снабжаться [[span style="background: #333"]]питанием согласно пищевой карте ███[[/span]]-█-█. В связи с низким риском [[span style="background: #333"]]нарушения условий содержания[[/span]] SCP-███-█ разрешено оставлять под охраной [[span style="background: #333"]]одного (1) сотрудника[[/span]] службы безопасности. В случае потери конечности SCP-███-█ должна быть [[span style="background: #333"]]предоставлена аналогичная конечность приблизительно одинакового по размерам[[/span]] краба для замены.

Результат

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

Код

[[module CSS]]
.spanCensored {
background: #333;
}
.spanCensored::selection {
background: #334;
/* color: #000; */
}
[[/module]]

**Особые условия содержания:** SCP-███-█ должен содержаться в [[span class="spanCensored"]]камере размерами 2х2 метра[[/span]] и снабжаться [[span class="spanCensored"]]питанием согласно пищевой карте ███[[/span]]-█-█. В связи с низким риском [[span class="spanCensored"]]нарушения условий содержания[[/span]] SCP-███-█ разрешено оставлять под охраной [[span class="spanCensored"]]одного (1) сотрудника[[/span]] службы безопасности. В случае потери конечности SCP-███-█ должна быть [[span class="spanCensored"]]предоставлена аналогичная конечность приблизительно одинакового по размерам[[/span]] краба для замены.

Результат

Проблема становится очевидной после выделения всего абзаца — обычная цензура резко выделяется по сравнению с поддельной. Данный трюк является непрактичным и весьма примитивным, время- и трудозатратным, если только Вы не делаете статью, специально прячущую какую-то информацию от читателя, навроде SCP-4000, который переправляет читателя на [ИСКЛЮЧЕНО СОГЛАСНО ПРОТОКОЛУ 4000-ЭШУ́].

Блоки [[div]] и [[table]]

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

Уведомление АПАИБ

Код

[[div style="border:solid 1px #999999; background:#f2f2c2;"]]
[[=]]
[[span class="h3Parody"]]УВЕДОМЛЕНИЕ АПАИБ[[/span]]

Здесь описать уведомление.

— Мария Джонс, директор АПАИБ
[[/=]]
[[/div]]

Результат

УВЕДОМЛЕНИЕ АПАИБ

Здесь описать уведомление.

— Мария Джонс, директор АПАИБ

"border:solid 1px #999999" отвечает за границу блока.

"solid" сделает границу сплошной линией;
"1px" определяет её толщину в пикселях;
"#999" придаёт ей цвет.

"background:#f2f2c2;" определяет цвет фона внутри блока. Подобрать цвет проще всего с помощью или сторонних сайтов, или с помощью Средств разработки.

В разделе "Стили" Вы можете увидеть квадрат напротив свойств с цветовым кодом.

Нажмите на него и для Вас откроется палитра, в которой в режиме "онлайн" Вы сможете подобрать цвет для элемента на странице.

Использование таблиц [[table]] на примере журнала испытаний

Данный журнал является примером того, как Вы могли бы оформлять таблицы, не прибегая к синтаксису "||" и "||~".

Код

+ Открыть код

Результат

ЗАГОЛОВОК И ПРОЧЕЕ
Субъект	ИНФОРМАЦИЯ
Протокол	ИНФОРМАЦИЯ
Результаты	ИНФОРМАЦИЯ

Синтаксис таблицы строится из трёх тегов, [[table]] [[row]] [[cell]]. Первый формирует таблицу, второй задаёт размер строки, третий размещает в строке ячейки. При изучении тегов в "Средствах разработчика" Вы увидите, что таблица на самом деле состоит из тегов <table> <tbody> <tr> <td>. Вас в первую очередь интересует настройка и проверка свойств CSS на <table> и <td>.

Альтернативный синтаксис для таблиц — [[div]] со свойством flex

Далее представлена модель таблиц, использующая свойство display: flex.

+ Открыть код

- закрыть блок

[[module CSS]]
.divFlexAss1 {
text-align: center; /* выравнивание текста по центру */
border-style: solid; /* границы выглядят как прямые */
border-color: black;
border-width: 0px 0px 1px 1px; /* 123 */
background-color: white; /* 123 */
padding: .3em .7em; /* 123 */
flex: 1 1 0;
}
.divFlexAss2 {
text-align: left;
border-style: solid;
border-color: black;
border-width: 0 1px 1px 1px;
background-color: white;
padding: .3em .7em;
flex: 4 1 0;
}
.divFlexAss1 > p {
margin-block-end: 0px;
margin-block-start: 0px;
}
.divFlexAss2 > p {
margin-block-end: 0px;
margin-block-start: 0px;
}
.divFlexAssHeading1 > * {
margin-block-end: 0px;
margin-block-start: 0px;
}
.divFlexAssHeading2 > * {
margin-block-end: 0px;
margin-block-start: 0px;
}
.divFlexAssHeading1 {
font-weight:bold;
text-align: center;
border-style: solid;
border-color: black;
border-width: 1px 0px 1px 1px;
background-color: silver;
padding: .3em .7em;
flex: 1 1 0;
}
.divFlexAssHeading2 {
font-weight:bold;
text-align: center;
border-style: solid;
border-color: black;
border-width: 1px 1px 1px 0px;
background-color: silver;
padding: .3em .7em;
flex: 4 1 0;
}
.divFlexTable {
border-collapse:collapse;
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 2 1 auto;
}
.divFlexAssHeading > p {
margin: 0;
}
.divFlexRow {
display: flex;
width: 100%;
flex-direction: row;
}
.divFlexWrap {
display: flex;
}
[[/module]]

[[div class="divFlexWrap"]]
[[div class="divFlexTable"]]
[[div class="divFlexRow"]]
[[div class="divFlexAssHeading1" style="border-width: 1px 1px 1px 1px;"]]
ЗАГОЛОВОК И ПРОЧЕЕ
[[/div]]
[[div class="divFlexAssHeading2"]]
[[/div]]
[[/div]]
[[div class="divFlexRow"]]
[[div class="divFlexAss1"]]
Субъект
[[/div]]
[[div class="divFlexAss2"]]
ИНФОРМАЦИЯ
[[/div]]
[[/div]]
[[div class="divFlexRow"]]
[[div class="divFlexAss1"]]
Протокол
[[/div]]
[[div class="divFlexAss2"]]
ИНФОРМАЦИЯ
[[/div]]
[[/div]]
[[div class="divFlexRow"]]
[[div class="divFlexAss1"]]
Результаты
[[/div]]
[[div class="divFlexAss2"]]
ИНФОРМАЦИЯ
[[/div]]
[[/div]]
[[/div]]
[[/div]]

ЗАГОЛОВОК И ПРОЧЕЕ

Субъект

ИНФОРМАЦИЯ

Протокол

ИНФОРМАЦИЯ

Результаты

ИНФОРМАЦИЯ

Альтернативный синтаксис для таблиц — [[div]] со свойством grid

Далее представлена модель таблиц, использующая свойство display: grid

+ Открыть код

ЗАГОЛОВОК И ПРОЧЕЕ

Субъект

ИНФОРМАЦИЯ

Протокол

ИНФОРМАЦИЯ

Результаты

ИНФОРМАЦИЯ

Транскрипция на терминале

+ Открыть код CSS

- закрыть блок

[[module CSS]]

div.terminal{
    border: 1px solid black;
    border: solid 3px #BBBBBB;
    border-radius: 16px;
    background-color: #131;
    /* чёрная тень наверху терминала */
    background-image:
        radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #121);
    background-position: center;
    display: block;
    /* тень вокруг терминала */
    box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
    /* не даёт линии "скана" создавать полосу прокрутки */
    overflow:hidden;
}
div.terminal blockquote {
    background-color: black;
    border: double 3px #80FF80
}
div.scanline{
    margin-top: -40%;
    width: 100%;
    height: 60px;
    position: relative;
    pointer-events: none;
    /* поддержка Safari 4.0 - 8.0 */
    -webkit-animation: scan 12s linear 0s infinite; /* Может потребоваться изменение. Если слишком быстро — ставьте "5s". */
    animation: scan 12s linear 0s infinite; /* То же, как и в предыдущей строке. */
    background: linear-gradient(to bottom, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;
}

div.text{
    color: rgba(128,255,128,0.8);
    padding-left: 2em;
    padding-top: 40%;
    font-family: monospace;
    font-size: 1.2em;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* В зависимости от размера терминала может потребоваться это поменять. Если линия "скана" останавливается на полпути, то увеличьте номер в "to{}".*/
}

@keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* То же, что и в предыдущей анимации.*/
}

div.text a {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a.newpage {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a:hover {
    color: #131;
    text-decoration: underline;
    background-color: #80FF80;
    padding: 1px;
}
div.text a:hover::before{
    content: "> ";
}
[[/module]]

[[div class="terminal"]]
[[div class="scanline"]]
[[/div]]
[[div class="text"]]
[[=]]
[[size 150%]] __Терминал #001__[[/size]]
@@ @@
@@ @@
@@------@@
Добро пожаловать, User
@@------@@
[[/=]]
@@ @@
@@ @@
@@ @@
> Все ссылки внутри терминала приобретают символ ">" перед ними, когда на них наводят курсором.
> [https://www.google.com Вроде такого].
@@ @@
@@ @@
[[/div]]
[[/div]]

Терминал #001

------
Добро пожаловать, User
------

Все ссылки внутри терминала приобретают символ ">" перед ними, когда на них наводят курсором.
Вроде такого.

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

[[=]]
[[div style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-customizable-blocks/scp_trans.png) center no-repeat; float: center; border: solid 2px #000; padding: 1px 15px; box-shadow: 0 1px 3px rgba(0,0,0,.2);"]]
[[size 250%]]ВНИМАНИЕ: СЛЕДУЮЩИЙ ФАЙЛ ПРИЧИСЛЕН К УРОВНЮ #/XXXX СЕКРЕТНОСТИ[[/size]]
----
[[size 150%]]ЛЮБАЯ ПОПЫТКА ДОСТУПА К ЭТОМУ ФАЙЛУ БЕЗ УРОВНЯ ДОПУСКА 4/XXXX БУДЕТ ЗАФИКСИРОВАНА И ПРИВЕДЁТ К НЕМЕДЛЕННОМУ ДИСЦИПЛИНАРНОМУ ВЗЫСКАНИЮ.[[/size]]
[[/div]]
[[/=]]

ВНИМАНИЕ: СЛЕДУЮЩИЙ ФАЙЛ ПРИЧИСЛЕН К УРОВНЮ #/XXXX СЕКРЕТНОСТИ

ЛЮБАЯ ПОПЫТКА ДОСТУПА К ЭТОМУ ФАЙЛУ БЕЗ УРОВНЯ ДОПУСКА 4/XXXX БУДЕТ ЗАФИКСИРОВАНА И ПРИВЕДЁТ К НЕМЕДЛЕННОМУ ДИСЦИПЛИНАРНОМУ ВЗЫСКАНИЮ.

[[div style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-customizable-blocks/scp_trans.png) center center no-repeat; background-size: 40%; text-align: center; width: 600px; margin: 0 auto; font-size: 20px; padding: 0px;"]]

@@ @@
@@ @@

@@ @@

@@ @@

[[=]]
[[size 150%]]* ##black|ПО РАСПОРЯЖЕНИЮ СОВЕТА СМОТРИТЕЛЕЙ##[[/size]]
##black|Следующий файл относится к X/XXXX уровню секретности. Неавторизированный доступ запрещён.##
[[/=]]
= **##black|XXXX##**

@@ @@

@@ @@

[[/div]]

* ПО РАСПОРЯЖЕНИЮ СОВЕТА СМОТРИТЕЛЕЙ
Следующий файл относится к X/XXXX уровню секретности. Неавторизированный доступ запрещён.

XXXX

Шаблон "переписки" SCiPNET

[[module CSS]]
.email-example .collapsible-block-folded a.collapsible-block-link {
    animation: blink 0.8s ease-in-out infinite alternate;
}
@keyframes blink {
    0% { color: transparent; }
    50%, 100% { color: #b01; }
}
.email {border: solid 2px #000000; width: 88%; padding: 1px 15px; margin: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.5)}
.email-example a.collapsible-block-link {font-weight: bold;}
.tofrom {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px maroon}
[[/module]]

[[div class="email-example"]]
[[=]]
------
[[collapsible show="Подключиться к Почте SCiPNET? У Вас (1) новое сообщение!" hide="Re:ТЕМА"]]
[[<]]
[[div class="email"]]
[[div class="tofrom"]]
**Кому:** ПОЛУЧАТЕЛЬ
**От кого:** ОТПРАВИТЕЛЬ
**Тема:** ТЕМА
[[/div]]
------
текст
[[/div]]
@@ @@
[[div class="email"]]
[[div class="tofrom"]]
**Кому:** ПОЛУЧАТЕЛЬ
**От кого:** ОТПРАВИТЕЛЬ
**Тема:** ТЕМА
[[/div]]
------
текст
[[/div]]
[[/<]]
[[/collapsible]]
[[/=]]
[[/div]]

Подключиться к Почте SCiPNET? У Вас (1) новое сообщение!

Пользовательские -u ID

My span element

:hover и иные селекторы

"Размытие" блоков

"Увеличение" блоков

Та самая карусель изображений

Карусель на главной странице сайта

Блоки за авторством ParussMan

Блоки с текстом и с треугольниками сверху

Оформление блочной конструкции из статьи SCP-1460-RU - Ищи себя в прошмандовках [⠀⠀⠀⠀⠀⠀⠀⠀].

 Список экспериментов



Снимок: Сцена убийства, на которой присутствуют орудие убийства, кровь и наручные часы жертвы.

Результат: Орудие убийства, кровь и наручные часы исчезли. Из базы данных компаний, связанных с производством и продажей наручных часов и орудия убийства, пропали все записи о вышеупомянутых экземплярах.



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

Результат: Орудие убийства и одежда исчезли. Со швабры пропала вся кровь и собранная в процессе уборки грязь.



Снимок: Коридор Зоны █, снятый изнутри.

Результат: Четыре шкафа, установленные внутри коридора, исчезли вместе с записками, приклеенными к ним. Следы грязи, оставленные сотрудниками, также исчезли.



Снимок: Коридор Зоны █, снятый снаружи.

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



Снимок: Лагерь локальной ячейки ███████ █████.

Результат: Лагерь исчез вместе со всеми людьми, расположенными в нём на момент снимка. Большое количество записей о сотрудниках Фонда исчезло из базы данных.



Снимок: Здание отдела отслеживания изменений в реальности, принадлежащее ███.

Результат: [ЭКСПЕРИМЕНТ ОТКЛОНЁН].

Оформление абзацев и приложений

Пример оформления из SCP-1452-RU - Конвергенция.

 Нейтрализация

Все запечатлённые деревья были
заражены, но находятся в состоянии бездействия

21.06.20██ приведён в исполнение приказ о частичной нейтрализации SCP-1452: произведена пересадка заражённого дерева в оборудованное биохранилище Фонда, оставшиеся экземпляры уничтожены. Изначально операция была сочтена успешной, однако через несколько месяцев стало известно, что поражённая область намного больше предполагавшейся: подвергшиеся аномальному воздействию деревья неопределённый промежуток времени бездействуют и не выделяют кровь. Новые расчёты показали, что приблизительная площадь области равна ███ км².

Некоторые участки леса в это время были вырублены частными компаниями, которые успели пустить дерево в производство. Результаты исследований, полученные для заражённых деревьев, активно выделяющих кровь, оказались неверны для таковых в состоянии бездействия: в их случае прекращение жизнедеятельности не предотвратило начало аномальной активности. Производные от добытого дерева (доски, мебель, бумага, посуда и т.д.) спустя некоторое время активировались и начали выделять кровь. Она также "заражала" другие деревянные изделия и деревья, на которые попадала во время перевозки.

Спойлер "отпечаток пальца"

+ CSS Код

- Закрыть


.handwrite {
background: #FFF8E1;
border-left: 3px dotted #CFD8DC;
}
/*
Fadeout Page-Contents
- Copyright (c) 2020 ukwhatn
- Released under the MIT License
- http://expunged.xyz/MIT.txt
*/

/*== variables ==*/
:root {

  /* Background Color (Default: white) */
  --fadeout-background: white;

  /* FadeOut Duration */
  --fadeout-time: 1s;

  /* Image FadeIn Duration (If you use image fade-in) */
  --img-fadein-time: 1s;

  /* Image Fadein Delay (If you use image fade-in) */
  --img-fadein-delay: 1s;

  /* Text FadeIn Duration (If you use image fade-in) */
  --txt-fadein-time: 1s;

  /* Text Fadein Delay (If you use image fade-in) */
  --txt-fadein-delay: 1s;

  /* Cropped Header (To erace the shadow under the header)
      If you use themes other than Sigma-9(Default), pls change this variable. */
  --cropped-header: url(http://smlt.wdfiles.com/local--files/ukwhatn:fadeout/header-crop.png);

}

.fadeout-wrapper  {
  position: relative;
}

.fadeout-wrapper .cover{
  width: 100%;
  height: 200%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  background: var(--fadeout-background);
  color: transparent;
  animation: cover-anim var(--fadeout-time) linear 0s 1 forwards;
}

@keyframes cover-anim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeout-wrapper .escape {
  position: relative;
  display: inline-block;
  z-index: 3;
}

.fadeout-wrapper .fadein-img img{
  position: relative;
  z-index: 3;
  opacity: 0;
  animation: cover-anim var(--img-fadein-time) linear var(--img-fadein-delay) 1 forwards;
}

.fadeout-wrapper .fadein-txt {
  position: relative;
  z-index: 3;
  opacity: 0;
  animation: cover-anim var(--txt-fadein-time) linear var(--txt-fadein-delay) 1 forwards;
}

.warn-spoil {
  outline: 1px solid #dcdcdc;
  border-top: 5px solid #901 !important;
  position: relative;
  background: #F8F8F8;
}

.parent {
display: grid;
grid-template-columns: repeat(4, 1fr) 0.5fr;
grid-column-gap: 34px;
grid-row-gap: 0px;
align-items: center;
padding: 16px;
}

.file {
  width: 100px;
  height: 30px;
  background-color: #901;
  clip-path: polygon(100% 0, 70% 100%, 0 100%, 0 0);
  font-family: "Font Awesome 5 Free";
  color: white;
  font-weight: 900;
  display: flex;
  align-items: center;
  font-size: 18px;
  padding-bottom: 4px;
  position: relative;
  margin-bottom: -1px;
}

.file p {
margin-left: 30px;
}

.fingerprint .collapsible-block-unfolded-link .collapsible-block-link {
  background: green;
  animation: none;
  transition: none;
}

.fingerprint .collapsible-block-link {
font-family: "Font Awesome 5 Free", "Inter";
  font-weight: 900;
  font-size: 50px;
  position: absolute;
  right: 16px;
  top: 70px;
  color: white;
  background: #901;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: blink-spoiler 0.5s ease-in-out infinite alternate;
}

.fingerprint .collapsible-block-link:hover {
text-decoration: none;
box-shadow: 0 9px 9px #ccc;
background: white;
  color: black;
  animation: none;
}

.fingerprint .collapsible-block-unfolded-link .collapsible-block-content .collapsible-block-link {
  background: none;

}

.fingerprint .collapsible-block-content .collapsible-block-link {
  font-family: "Font Awesome 5 Free", "Inter";
  font-weight: normal;
  font-size: 12.8px;
  position: relative;
  right: unset;
  top: unset;
  color: #901;
  background: transparent;
  border-radius: 50%;
  width: fit-content;
  height: fit-content;
  display: block;
  justify-content: center;
  align-items: center;
  transition: .3s all;
  animation: none;
}

.fingerprint .collapsible-block-content .collapsible-block-link:hover {
text-decoration: underline;
box-shadow: none;
background: none;
  color: #901;
  animation: none;
}

.warn-confirm {
  background: #901; text-align: center; padding: 4px 0; color: white;
}

.fingerprint .collapsible-block-content {
  background: white;
}

.div1 { grid-area: 1 / 1 / 2 / 3; font-size: 22px; border-right: 5px solid #901; font-weight: 600; background: url(https://files.scpfoundation.net/local--files/scp-5400-j/scp_trans.png) center no-repeat;
    background-size: auto;
    background-size: 33%;}
.div2 { grid-area: 1 / 3 / 2 / 5; font-size: 14px;}
.div3 { grid-area: 1 / 5 / 2 / 6;}

@keyframes height-anim {
    0% {
        max-height: 0px;
    }
    100% {
        max-height: 500px;
    }
}
@keyframes blink-spoiler {
    0% { color: transparent; }
    50%, 100% { color: white; }
}

.warn-content {
  padding: 8px 14px;
}

@media (max-width: 767px) {
.parent {
  display: grid;
  grid-template-columns: 1fr repeat(4, 0);
  grid-column-gap: 0px;
  grid-row-gap: 4px;
}

.wiki-content-table tbody { overflow: scroll }

.div1 { grid-area: 1 / 1 / 2 / 2; border-right: none; border-bottom: 5px solid #901;}
.div2 { grid-area: 4 / 1 / 5 / 2; }
.div3 { grid-area: 5 / 1 / 6 / 2; }
.fingerprint .collapsible-block-link {
  position: relative;
  margin: 1rem auto;
  right: 0;
  top: -15px;
}

.fingerprint .collapsible-block-content .collapsible-block-link {
  margin: 0 !important;
  font-size: 11.52px;
}

.item {
  padding-right: 1px;
}

- Закрыть

[[div class="warn-spoil"]]
[[div class="file"]][[/div]]
[[div class="parent"]]
[[div class="div1"]]
СЛЕДУЮЩЕЕ ПРИЛОЖЕНИЕ ЗАСЕКРЕЧЕНО ПО ФОРМЕ X/XXXX
[[/div]]
[[div class="div2"]]
ЛЮБЫЕ ПОПЫТКИ ПОЛУЧЕНИЯ ДОСТУПА К ДАННОМУ ФАЙЛУ БЕЗ НАЛИЧИЯ ДОПУСКА УРОВНЯ X/XXXX ЗАПИСЫВАЮТСЯ И ПРИВОДЯТ К ПРИНЯТИЮ НЕЗАМЕДЛИТЕЛЬНЫХ ДИСЦИПЛИНАРНЫХ МЕР.
[[/div]]
[[div class="div3"]]
[[/div]]
[[/div]]
[[div class="fingerprint"]]
[[collapsible show="" hide=""]]
[[div_ class="warn-confirm"]]БИОМЕТРИЧЕСКИЕ ДАННЫЕ УСПЕШНО ПОДТВЕРЖДЕНЫ[[/div]]
[[div class="warn-content"]]
Именно так выглядит вывод информации внутри.
[[/div]]
[[/collapsible]]
[[/div]]
[[/div]]



СЛЕДУЮЩЕЕ ПРИЛОЖЕНИЕ ЗАСЕКРЕЧЕНО ПО ФОРМЕ X/XXXX

ЛЮБЫЕ ПОПЫТКИ ПОЛУЧЕНИЯ ДОСТУПА К ДАННОМУ ФАЙЛУ БЕЗ НАЛИЧИЯ ДОПУСКА УРОВНЯ X/XXXX ЗАПИСЫВАЮТСЯ И ПРИВОДЯТ К ПРИНЯТИЮ НЕЗАМЕДЛИТЕЛЬНЫХ ДИСЦИПЛИНАРНЫХ МЕР.



"Широкий" спойлер

"Широкие спойлеры" из темы Отдела временной безошибочности.

Открыть спойлер

"Переписка" в мессенджере

+ CSS Код

[[div class="messanger"]]
[[div class="left-message"]]
[[div_ class="name"]]
Суда вставить имя пользователя
[[/div]]
Суда вставить текст
[[div_ class="timestamped"]]
Суда вставить время
[[/div]]
[[/div]]

[[div class="right-message"]]
[[div_ class="name"]]
Суда вставить имя пользователя
[[/div]]
Суда вставить текст
[[div_ class="timestamped"]]
Суда вставить время
[[/div]]
[[/div]]
[[/div]]

Суда вставить имя пользователя

Суда вставить текст

Суда вставить время

Суда вставить имя пользователя

Суда вставить текст

Суда вставить время

Изменение [[tabview]]

Изменение заголовков страницы

Изменение фона страницы

Пользовательские шрифты (файлы .ttf и прочие — не работают)

Пользовательские курсоры

Для демонстрации мы будем использовать [[html]], чтобы не изменять курсоры глобально на этой странице. Простым языком — чтобы эти курсоры не пугали случайных читателей.

"Подвижное" открытие страницы

animation и "появление" элементов / страницы

Великие тайны прошлого 2

- закрыть блок

Далее представлены шаблоны, полезные при оформлении и добавлении изображений в Ваших статьях.

Свернуть

Содержание

Теория вёрстки гипертекстового документа

Блоки [[span]] и [[p]] или [[paragraph]]

Примеры оформления с использованием [[span]]

Цензура в документе

Спрятанный в цензуре текст

Блоки [[div]] и [[table]]

Уведомление АПАИБ

Использование таблиц [[table]] на примере журнала испытаний

Альтернативный синтаксис для таблиц — [[div]] со свойством flex

Альтернативный синтаксис для таблиц — [[div]] со свойством grid

Транскрипция на терминале

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

Шаблон "переписки" SCiPNET

Пользовательские -u ID

:hover и иные селекторы

"Размытие" блоков

"Увеличение" блоков

Та самая карусель изображений

Карусель на главной странице сайта

Блоки за авторством ParussMan

Блоки с текстом и с треугольниками сверху

Оформление абзацев и приложений

Спойлер "отпечаток пальца"

"Широкий" спойлер

"Переписка" в мессенджере

Изменение [[tabview]]

Изменение заголовков страницы

Изменение фона страницы

Пользовательские шрифты (файлы .ttf и прочие — не работают)

Пользовательские курсоры

"Подвижное" открытие страницы

animation и "появление" элементов / страницы

Добавление изображений

Пример загруженного в "Файлы" статьи изображения

Пример размещённого в интернете изображения

Альтернативный способ добавления изображений [[image]]

Пример употребления тега [[image]]

Классы rimg, limg, cimg

Тег "span" внутри классов rimg, limg, cimg

Свойства и аттрибуты тега [[image]]

Выравнивание image

Свойства CSS в атрибуте style

Фильтры filter

Добавление изображений через свойство CSS "background"

Карусель изображений

Ссылка поверх абзаца / текста

Галерея изображений

Добавление изображений

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

Для прикрепления файла следуйте следующему алгоритму:
Внизу страницы нажмите "Файлы" — нажмите на поле с надписью "Нажмите, чтобы загрузить файл, или перетащите файлы сюда" — при помощи появившегося диалогового окна найдите файл в Вашей файловой системе — выберите файл, нажмите в диалоговом окне "Открыть" — нажмите "Загрузить".

Название файла необходимо использовать в качестве "имени файла" в коде для добавления изображения. Добавить изображение в статью можно при помощи следующего кода:

Код

[[include component:image-block name=имя_файла |caption=Подпись |width=размер_в_пикселях]]

**Особые условия содержания:** SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.

Базовый синтаксис кода:

"name" — название или адрес файла, который должен отображаться в блоке.
"caption" — подпись к изображению.
"width" — ширина изображения.

Результат

Подпись

Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.

Не размещайте в статье теги [[image]] или [[include component:image-block]] без предварительной загрузки изображений в файлы. Из-за этого файл не будет распознаваться сервером примерно пять минут после загрузки, так как он не смог найти его по Вашему тегу и он ждёт обновления данных, которое и происходит раз в пять минут.

Пример загруженного в "Файлы" статьи изображения

Код

[[include component:image-block name=863.jpg|caption=SCP-863|width=100px]]

Результат

SCP-863

Пример размещённого в интернете изображения

Код

[[include component:image-block name=https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg|caption=SCP-863|width=100px]]

Результат

SCP-863

Альтернативный способ добавления изображений [[image]]

Если Вы рассчитываете употребить какие-то свойства CSS относительно изображения, не прибегая к сложным манипуляциям с [[include]], Вам стоит использовать тег [[image]].

[[image]] уникален тем, что может быть размещён в тексте, в отличии от [[include]].

Например, прямо посреди текста , внезапно для читателя. Учтите, что рисунок размещается от нижней границы строки, таким образом занимая верхнее пространство, отодвигая строку от предшествовавших.

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

Пример употребления тега [[image]]

Код

[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]

Результат

Классы rimg, limg, cimg

Для оформления тега [[image]] используйте стандартные конструкции классов "rimg", "cimg", "limg".

Код

[[div class="limg"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]
[[/div]]

[[div class="cimg"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]
[[/div]]

[[div class="rimg"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]
[[/div]]

Результат

Тег "span" внутри классов rimg, limg, cimg

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

Помимо этого, классы "limg", "cimg", "rimg" имеют свойства, которые позволяют им преобразовывать блоки [[span]] внутри блоков [[div]] в подпись под изображением.

Код

[[div class="limg"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]
[[span]]SCP-863[[/span]]
[[/div]]

[[div class="cimg"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]
[[span]]SCP-863[[/span]]
[[/div]]

[[div class="rimg"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]
[[span]]SCP-863[[/span]]
[[/div]]

Результат

SCP-863

Свойства и аттрибуты тега [[image]]

Для тега [[image]] предусмотрено несколько свойств, которые вписываются в пределы квадратных скобок.

Название атрибута	Допустимые значения	Пример значения	Описание	Пример употребления
link	адресное название страницы на сайте или URL	"scp-863", "http://www.example.com", "#anchor", "#"	Изображение становится ссылкой, по нажатии на которую можно перейти на другую страницу; ссылка с апострофом '*' откроет страницу в новом окне; можно применить в отношении якорей на странице с изображением; "#" отправляет экран браузера на верх страницы	[[image 863.jpg link="scp-863"]]
alt	текст	"SCP-863"	Замена текста в случае, если картинка недоступна. Также используется поисковыми системами для описания картинки.	[[image 864.jpg alt="SCP-863"]] — свойство рудиментарно из-за отсутствия случая употребления
title	текст	"SCP-863"	Отображает с небольшой задержкой текст при наведении на изображение. Ускорить отображение текста, как и каким-либо образом изменить рамку, шрифт или цвет фона или текста в ней, на стороне сайта невозможно. Для примера употребления подобной системы на стороне сайта обратитесь к системе стандартизации S7.	[[image 863.jpg title="SCP-863"]]
width	Количество пикселей или процентов	"200px", "100%"	Применяет указанное значение к ширине изображения. Основной способ задать размер изображения. Если значение указано в процентах — оно будет брать процент размера не от оригинального изображения, а от блока, в котором оно находится.	[[image 863.jpg width="100px"]] [[image 863.jpg width="50%"]] [[image 863.jpg width="100%"]]
height	Количество пикселей или процентов	"200px", "100%"	Применяет указанное значение к высоте изображения. В отличии от ширины, высота изображения не влияет на его размеры, пока не указана в пикселях. Примеры, когда это свойство применяется в пикселях, мы разберём дальше.	[[image 863.jpg height="100px"]] [[image 863.jpg height="50%"]] [[image 863.jpg height="100%"]]
style	стандартное CSS-свойство	"border: 1px solid red; padding: 2em;"	Добавляет стиль CSS посредством свойств, перечисленных в атрибуте изображения. Упрощённо говоря, позволяет делать с изображением что угодно в пределах спецификации и поддержки CSS отдельного браузера. При знании CSS Вам будет проще, не открывая Paint, GIMP, Photoshop или иной фоторедактор, редактировать некоторые характеристики изображения.	[[image 863.jpg style="rotate: 15deg;"]] [[image 863.jpg style="filter: hue-rotate(90deg);"]] [[image 863.jpg style="transform: scaleX(-1);"]]
class или id	класс или id CSS	"mystyle"	Применяет указанный в [[module CSS]] класс или номер к изображению и не только. Рекомендуемый способ редактирования кода, чтобы не засорять текст редактора CSS на каждой картинке, а собрать его в одном месте на странице. Также — наиболее удобный способ применять стили CSS сразу к нескольким изображениям.

Выравнивание image

Для тега [[image]] предусмотрено выравнивание следующих типов:

[[=image… - центрирование изображения

[[<image… - изображение слева

[[>image… - изображение справа

[[f<image… - обтекаемое текстом изображение слева

Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.

[[f>image… - - обтекаемое текстом изображение справа

Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.

Свойства CSS в атрибуте style

Возможности изменения изображения с помощью свойств в атрибуте "style" безграничны. По-настоящему раскрыть потенциал CSS на сайте возможно с помощью изучения синтаксиса каскадных стилей, например, с помощью общедоступного словаря/туториала.

Фильтры filter

Фильтры могут применяться не только к изображениям.

[[image 863.jpg width="100"]]
[[image 863.jpg style="filter:blur(1px)" width="100"]] [[image 863.jpg style="filter:blur(2px)" width="100"]]
[[image 863.jpg style="filter:brightness(0.5)" width="100"]] [[image 863.jpg style="filter:brightness(1.5)" width="100"]]
[[image 863.jpg style="filter:contrast(0.5)" width="100"]] [[image 863.jpg style="filter:contrast(1.5)" width="100"]]
[[image 863.jpg style="filter:grayscale(0.5)" width="100"]] [[image 863.jpg style="filter:grayscale(1.5)" width="100"]]
[[image 863.jpg style="filter:hue-rotate(100deg)" width="100"]] [[image 863.jpg style="filter:hue-rotate(360deg)" width="100"]]
[[image 863.jpg style="filter:invert(1)" width="100"]] [[image 863.jpg style="filter:invert(2)" width="100"]]
[[image 863.jpg style="filter:opacity(0.5)" width="100"]] [[image 863.jpg style="filter:opacity(1)" width="100"]]
[[image 863.jpg style="filter:saturate(0.5)" width="100"]] [[image 863.jpg style="filter:saturate(2)" width="100"]]
[[image 863.jpg style="filter:sepia(0.5)" width="100"]] [[image 863.jpg style="filter:sepia(1)" width="100"]]
[[image 863.jpg style="filter:drop-shadow(16px 16px 20px red);" width="100"]] [[image 863.jpg style="filter:drop-shadow(6px 6px 2px blue);" width="100"]]

Добавление изображений через свойство CSS "background"

С помощью свойства "background" становится возможно добавить изображение в качестве фона к блокам [[div]] и [[span]].

Код

**Особые условия содержания:** [[span style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: 50px; font-size: 40px;color:transparent;"]]SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены[[/span]].

Результат

Если мы отойдём на секунду от столь радикального примера употребления тега, Вы можете обратить внимание, что для блоков [[span]] и [[div]] необходимо указывать адрес фонового изображения. Для нашего сайта это, обычно, следующая форма:

https://files.scpfoundation.net/local--files/ адрес страницы, например, article-design-adding-images/863.jpg

Посмотрим на более вменяемые примеры применения свойства background.

Код

[[div class="cimg" style="height: 480px; width: 720px;"]]
[[div style="display: flex; flex-direction: column; background: url(https://upload.wikimedia.org/wikipedia/en/thumb/4/41/ENERGY_CONVERSION_RESEARCH_LABORATORY_%28ECRL%29.jpg/1200px-ENERGY_CONVERSION_RESEARCH_LABORATORY_%28ECRL%29.jpg?20080613005928); background-size: cover; height: 480px; width: 720px; background-position-y: center; background-position-x: center; background-repeat: no-repeat;"]]
[[div style="color: white !important; font-size: 175%; background: black; font-weight: normal;"]]
Глава N — Электрическая будка
[[/div]]
[[/div]]
[[/div]]

Результат

Глава N — Электрическая будка

Или:

Код

[[module CSS]]
.customHeadings {
font-size: 65%;
filter: grayscale(1) invert(1);
}
.titleBlock {
background: url(https://files.scpfoundation.net/local--files/draft:somewhere-in-nevada/Khunjerab_-_the_snowy_landscape.jpg);
width: 100%;
height: 300px;
background-position: -180px -180px;
filter: grayscale(1);
}
.titleContents {
color: #FFF;
font-weight: normal;
font-size: 190%;
width:75%;
height: 200px;
padding: 50px;
background: linear-gradient(90deg, rgb(0, 0, 0) 10%, rgb(27, 27, 27) 50%, rgba(59, 59, 59, 0) 90%);
}

@media only screen and (max-width: 600px) {
.titleBlock {
font-size: 75%;
}
.customHeadings > ul > li {
padding: 0;
}
.titleContents {
width: 75%;
}
}
[[/module]]

[[div class="titleBlock"]]
[[div class="titleContents"]]
ЗДЕСЬ МОГЛА БЫТЬ ВАША РЕКЛАМА
[[div class="customHeadings"]]
##000|ОГЛАВЛЕНИЕ рассказа:##
**[#anchor-1 ● ЯКОРЬ 1]**
**[#anchor-2 ● ЯКОРЬ 2]**
**[#anchor-3 ● ЯКОРЬ 3]**
[[/div]]
[[/div]]
[[/div]]

Результат

ЗДЕСЬ МОГЛА БЫТЬ ВАША РЕКЛАМА

ОГЛАВЛЕНИЕ рассказа:
● ЯКОРЬ 1
● ЯКОРЬ 2
● ЯКОРЬ 3

Карусель изображений

Карусель возможно добавить, например, следующим способом:

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

Код для происходящего выше выглядит так:

+ Открыть код

- закрыть блок

Код

[!-- КВАДРАТЫ #############################--]
[[div class="carousel"]]
[[div class="slidingDiv"]]
[[div class="div1"]]
[[/div]]
[[div class="div2"]]
[[/div]]
[[div class="div3"]]
[[/div]]
[[/div]]
[[/div]]

[!-- КАРТИНКИ #############################--]
[[div class="carousel" style="overflow: hidden;"]]
[[div class="slidingDiv"]]
[[div class="div1" style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: contain; background-repeat: no-repeat;"]]
[[/div]]
[[div class="div2" style="background: url(https://files.scpfoundation.net/local--files/scp-864/864-new.jpg); background-size: contain; background-repeat: no-repeat;"]]
[[/div]]
[[div class="div3" style="background: url(https://files.scpfoundation.net/local--files/scp-862/SCP-862.jpg); background-size: contain; background-repeat: no-repeat;"]]
[[/div]]
[[div class="div4" style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: contain; background-repeat: no-repeat;"]]
[[/div]]
[[/div]]
[[/div]]

[[module CSS]]
.carousel {
width: 150px;
background: #eee;
overflow: hidden;
}
.slidingDiv {
position: relative;
display: flex;
right: 150px;
animation: slide-in-right 20s infinite both;
}
@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translateX(150px);
transform: translateX(150px);
}
33% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
66% {
-webkit-transform: translateX(-150px);
transform: translateX(-150px);
}
100% {
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(150px);
transform: translateX(150px);
}
33% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
66% {
-webkit-transform: translateX(-150px);
transform: translateX(-150px);
}
100% {
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
}
}

.div1 {
position: relative;
background: red;
width:150px;
height: 150px;
order: 1;
flex: none;
}
.div2 {
position: relative;
background: yellow;
width:150px;
height: 150px;
order: 2;
flex: none;
}
.div3 {
position: relative;
background: green;
width:150px;
height: 150px;
order: 3;
flex: none;
}
.div4 {
position: relative;
background: green;
width:150px;
height: 150px;
order: 4;
flex: none;
}
[[/module]]

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

[[div style="overflow: overlay; display: flex; width: 150px;"]]
[[div style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]]
[[/div]]
[[div style="background: url(https://files.scpfoundation.net/local--files/scp-864/864-new.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]]
[[/div]]
[[div style="background: url(https://files.scpfoundation.net/local--files/scp-862/SCP-862.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]]
[[/div]]
[[div style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]]
[[/div]]
[[/div]]

В первом блоке [[div]]:

"overflow: overlay;" отвечает за появление "проматывания" внизу картинок;
"display: flex;" определяет способ отображения остальных блоков, в которых находятся картинки.

В остальных блоках [[div]]:

"background-size: contain" позволяет растянуть изображение на все 150×150 пикселов блока в ширину и высоту;
"background-repeat: no-repeat;" предотвращает повторение изображения, как это выглядит в примере с картинкой, прячущей текст, выше;
"flex: none;" позволяет выстроить блоки в горизонтальную линию.

Похожий принцип, но уже с "overflow-y", применим для вертикального прокручивания.

[[div style="overflow-y: auto; display: flex; flex-direction: column; height: 150px; width: 150px;"]]
[[div style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]]
[[/div]]
[[div style="background: url(https://files.scpfoundation.net/local--files/scp-864/864-new.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]]
[[/div]]
[[div style="background: url(https://files.scpfoundation.net/local--files/scp-862/SCP-862.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]]
[[/div]]
[[div style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]]
[[/div]]
[[/div]]

Это лишь два возможных способа решить вопрос "карусели". Возможно также использовать JavaScript и блок [[HTML]] для создания "кнопок", переключающих картинки.

Блоки [[div]] рассматриваются подробно в разделе Настраиваемые блоки, а блок [[HTML]] - в разделе Интерактивный контент.

Ссылка поверх абзаца / текста

[[image]], в некоторых критических случаях применения, может использоваться для создания ссылок на другие страницы поверх текста или иных элементов.

Код

[[div class="blockquote" style="position: relative;"]]
[[image Empty.png width="100%" height="100%;" link="sandbox:scp-template" style="position: absolute; background: aliceblue; opacity: 25%; top: 50%; left: 50%; transform: translate(-50%, -50%);"]]
**Особые условия содержания содержания:** Фиктивная корпорация, контролируемая Фондом, выкупила Голос Графства Дикси, единственную местную новостную службу службу в области влияния [[[scp-2930|SCCP-2930]]]. Местная мобильная оперативная группа 352-Ламед (“Стучащие Стучащие по дереву”) и их Региональный Пресс-Директор Т. Соловски Соловски ответственны за соблюдение соблюдение текущего режима контроля, согласно согласно которому никакие иные местные средства средства массовой информации не могут посещать собрания собрания совета совета Кросс-сити сити и никакие протоколы, записи, стенограммы стенограммы, или цитаты собраний собраний коллектива ратуши Кросс-сити сити не должны попасть в свободный свободный доступ в сеть сеть Интернет.
[[/div]]

Результат

Особые условия содержания содержания: Фиктивная корпорация, контролируемая Фондом, выкупила Голос Графства Дикси, единственную местную новостную службу службу в области влияния SCCP-2930. Местная мобильная оперативная группа 352-Ламед (“Стучащие Стучащие по дереву”) и их Региональный Пресс-Директор Т. Соловски Соловски ответственны за соблюдение соблюдение текущего режима контроля, согласно согласно которому никакие иные местные средства средства массовой информации не могут посещать собрания собрания совета совета Кросс-сити сити и никакие протоколы, записи, стенограммы стенограммы, или цитаты собраний собраний коллектива ратуши Кросс-сити сити не должны попасть в свободный свободный доступ в сеть сеть Интернет.

Несмотря на то, что это относится к настраиваемым блокам, мы опишем применяемые здесь свойства:

position: relative — позиционирует блок относительно самого себя, не влияя на структуру документа и окружающие блоки;
position: absolute — позиционирует блок относительно родительского блока, в котором тот находится;
background: aliceblue — фоновый цвет блока. Сама по себе используемая [[image]] она прозрачная и прикреплена к этой статье файлом Empty.png;
opacity: 25% — описывает прозрачность блока. В данном случае, он на 75% прозрачен, чтобы видеть текст. Вы, тем не менее, можете использовать это для того, чтобы оставлять "подсказки" о ссылках полупрозрачными элементами;
top: 50%; left: 50%; transform: translate(-50%, -50%); — три свойства, позиционирующие блок со свойством "position: absolute" относительно родителя. В данном случае это можно интерпретировать как "сместить вниз на 50%; сместить вправо на 50%; трансформировать по горизонтали на 50%; трансформировать по вертикали на 50%". Не спрашивайте, это не я придумал.

Этот приём можно применить хоть на всю страницу целиком, но это рискованно и может караться предупреждением от администрации, если это повлияет на функционал сайта.

Галерея изображений

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

Код

[[size 150%]]Для увеличения изображения наведите на него указатель и зажмите левую кнопку мышки.[[/size]]

[[div class="thisFakeGallery"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]] /* изображение-пример. */
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[/div]] — закрывающий тег для блока.

[[module CSS]]
.thisFakeGallery > p {
display: flex; /* принцип отображения содержимого блока, "гибкое" */
flex-direction: row; /* направление содержимого в виде "строки". Будь здесь пронумерованные изображения, то они шли бы 1-2-3-4-5. Если здесь написать вместо "row" свойство "column", то они пойдут таким порядком вниз по "столбцу". Если добавить "reverse-" в начале "row" или "column", то изображения пойдут в порядке 5-4-3-2-1. */
flex-wrap: wrap;
}
.thisFakeGallery > p > img{
width: 12em;
clear: both;
margin: .5em;
padding: .5em;
/* border: 1px solid black;
background: white; */
transition: transform .2s; /* скорость "роста" изображения при приближении */
cursor: pointer;
}
.thisFakeGallery > p > img:active {
transform: scale(3.0); /* коэффициент приближения, в данном случае составляет 300% */
z-index: 999; /* это правило "поднимает" изображение поверх всех прочих элементов на странице */
}
[[/module]]

Результат

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

В зависимости от размера изображения Вы можете сделать их больше четырёх в ряд (у меня они четыре в ряд при 16:9 экране).

Кроме того, Вы можете проследовать комментариям в коде и настроить галерею иным образом.

[ОГЛАВЛЕНИЕ]
«С чего начать новичку | Добавление изображений | Настраиваемые блоки»

версия страницы: 453, Последняя правка: 08 Март 2025, 18:09 (26 дней назад)

SCP Foundation

Russian Branch

Список доступных тегов

Список доступных тегов

Теория вёрстки гипертекстового документа

Блоки [[span]] и [[p]] или [[paragraph]]

Примеры оформления с использованием [[span]]

Цензура в документе

Спрятанный в цензуре текст

Блоки [[div]] и [[table]]

Уведомление АПАИБ

Использование таблиц [[table]] на примере журнала испытаний

Альтернативный синтаксис для таблиц — [[div]] со свойством flex

Альтернативный синтаксис для таблиц — [[div]] со свойством grid

Транскрипция на терминале

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

Шаблон "переписки" SCiPNET

Пользовательские -u ID

:hover и иные селекторы

"Размытие" блоков

"Увеличение" блоков

Та самая карусель изображений

Карусель на главной странице сайта

Блоки за авторством ParussMan

Блоки с текстом и с треугольниками сверху

Оформление абзацев и приложений

Спойлер "отпечаток пальца"

"Широкий" спойлер

"Переписка" в мессенджере

Изменение [[tabview]]

Изменение заголовков страницы

Изменение фона страницы

Пользовательские шрифты (файлы .ttf и прочие — не работают)

Пользовательские курсоры

"Подвижное" открытие страницы

animation и "появление" элементов / страницы

Добавление изображений

Пример загруженного в "Файлы" статьи изображения

Пример размещённого в интернете изображения

Альтернативный способ добавления изображений [[image]]

Пример употребления тега [[image]]

Классы rimg, limg, cimg

Тег "span" внутри классов rimg, limg, cimg

Свойства и аттрибуты тега [[image]]

Выравнивание image

Свойства CSS в атрибуте style

Фильтры filter

Добавление изображений через свойство CSS "background"

Карусель изображений

Ссылка поверх абзаца / текста

Галерея изображений