BBcode - Текст с тенью (shadow)

Красивый текст с эффектом свечения, пример работы

Ббкоды для красивого оформления и работы с текстом для phpbb
Ответить

Сообщение Admin »

Красивый текст с эффектом свечения, пример работы

Использование BBCode

Код: Выделить всё

[shadow]{TEXT}[/shadow]
Замена HTML

Код: Выделить всё

<span id="text">{TEXT}</span>

      <style type="text/css">

    #text{
       font-size: 1.5em; /* optional. just to increase the font size. */
       display: block;
       line-height: 1em;
       color: #666; /* shadow color */
       background-color: transparent;
       white-space: nowrap; /* wrapping breaks the effect */
    }

    #text:before,
    #text:after{
       content: "{TEXT}"; /* generated text */
       display: block;
    }

    #text:before{
       margin-bottom: -1.05em;
       margin-left: 0.1ex;
       color: #ccc; /* shadow color */
       background-color: transparent;
    }

    #text:after{
       margin-top: -1.05em;
       margin-left: -0.1ex;
       color: #fff; /* text color */
       background-color: transparent;
    </style>
Подсказка

Код: Выделить всё

Текст с тенью: [shadow]Ваш текст тут [/shadow]
Настройки
Показывать на странице ответа - на усмотрение админа
Пример работы:

Код: Выделить всё

[shadow]Модификации, BBcode, Стили - phpbb3.[/shadow]
Модификации, BBcode, Стили - phpbb3.

Сообщение Moroz »

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

Замена html

Код: Выделить всё

    <span class="shadow_text">{TEXT}</span>
<style type="text/css">
            .shadow_text:before,
            .shadow_text:after {
               content: "{TEXT}"; /* generated text */
               }
</style>
В тему стиля добавить:

Код: Выделить всё

.shadow_text {
               font-size: 1.5em; /* optional. just to increase the font size. */
               display: block;
               line-height: 1em;
               color: #666; /* shadow color */
               background-color: transparent;
               white-space: nowrap; /* wrapping breaks the effect */
            }

            .shadow_text:before {
display: block;
               margin-bottom: -1.05em;
               margin-left: 0.1ex;
               color: #ccc; /* shadow color */
               background-color: transparent;
            }

            .shadow_text:after {
display: block;
               margin-top: -1.05em;
               margin-left: -0.1ex;
               color: #fff; /* text color */
               background-color: transparent;
    }
Автор: Alice

Поделитесь ссылкой.

HTML код
BBCode
Link
Ответить

Вернуться в «BBcode оформление текста»

Кто сейчас на конференции

Сейчас этот форум просматривают: Yandex Bot и 1 гость