Шорткод 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>
Получить шорткод SplitUp