dimayakovlev.ru


SplitUp

Шорткод SplitUp для Grav CMS позволяет разбить слово или строку на отдельные символы.

Работа шорткода заключается в автоматическом преобразовании переданной строки в набор символов, обрамлённых заданным HTML тегом. При этом шорткод SplitUp поддерживает работу со строками в кодировке UTF-8.

Примеры использования шорткода SplitUp

[splitup]Привет![/splitup] - использование шорткода для разбиения строки с параметрами по умолчанию;
[splitup tag="strong" wrapspace="false"]Привет, мир![/splitup] - использование шорткода для разбиения строки с заданными параметрами.

Шорткод SplitUp принимает следующие параметры:

  • tag - необязательный параметр, задаёт HTML тег, использующийся для обрамления отдельных символов переданной строки. По умолчанию принимает значение span;
  • wrapspace - необязательный параметр, задаёт необходимость обрамления в HTML теги символов пробелов. По умолчанию принимает значение false, при котором пробелы не обрамляются.

В качестве практического примера использования шорткода SplitUp можно рассмотреть следующий пример, демонстрирующий создание специального эффекта для оформления текста, не прибегая к использованию JavaScript.

<style type="text/css">
    .splitup {
        background-color: burlywood;
        font-size: 1em;
        font-family: Verdana;
        line-height: 2em;
        padding: 1em;
        text-align: center;
        text-transform: uppercase;
    }
    @media (min-width: 576px) {
        .splitup {
            font-size: 2em;
        }
    }
    .splitup span {
        box-shadow: .1em .1em .1em black;
        color: white;
        font-weight: 600;
        margin: .1em;
        padding: .5em;
    }
    .splitup span:nth-child(odd) {
        background-color: darkgreen;
    }
    .splitup span:nth-child(even) {
        background-color: darkred;
    }
</style>

<div class="splitup">[splitup]Split Up![/splitup]</div>
Split Up!

Получить шорткод SplitUp